jQuery移动组件的Javascript API?
我试图附加将操纵JQM组件的事件,但一旦我有了对该组件的引用,我就不知道可以对其应用什么操作。例如,在新的可折叠列表视图中,“如何通过单击按钮折叠所有项目?”下面是可折叠列表视图的演示:对于可折叠的,您可以利用jQuery移动组件的Javascript API?,javascript,jquery,jquery-mobile,javascript-framework,jquery-events,Javascript,Jquery,Jquery Mobile,Javascript Framework,Jquery Events,我试图附加将操纵JQM组件的事件,但一旦我有了对该组件的引用,我就不知道可以对其应用什么操作。例如,在新的可折叠列表视图中,“如何通过单击按钮折叠所有项目?”下面是可折叠列表视图的演示:对于可折叠的,您可以利用展开和折叠事件: $('.ui-collapsible').trigger('expand'); 例如,您可以根据当前状态折叠/扩展DOM中的所有可折叠小部件,如下所示: //attach the code to an event (click on a link) $('a').on(
展开和折叠事件:
$('.ui-collapsible').trigger('expand');
例如,您可以根据当前状态折叠/扩展DOM中的所有可折叠小部件,如下所示:
//attach the code to an event (click on a link)
$('a').on('click', function () {
//cache all the widgets
var $all = $('.ui-collapsible');
//iterate through each widget
$.each($all, function () {
//if the widget has the "collapsed" class, then expand it
if ($(this).hasClass('ui-collapsible-collapsed')) {
$(this).trigger('expand');
} else {
//otherwise collapse it
$(this).trigger('collapse');
}
});
});
下面是一个演示:
下面是一个可折叠小部件的HTML示例,用于验证您是否可以通过“折叠”类进行选择:
呜呼
我希望这有帮助
更新
以下是这些事件的文档(尽管很稀疏):
<div data-role="collapsible" class="ui-collapsible ui-collapsible-collapsed">
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-up-c ui-fullsize ui-btn-icon-left ui-corner-top ui-corner-bottom ui-btn-active ui-btn-hover-null ui-btn-down-null" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="plus" data-iconpos="left" data-theme="null" data-mini="false">
<span class="ui-btn-inner ui-corner-top ui-corner-bottom">
<span class="ui-btn-text">Zero
<span class="ui-collapsible-heading-status"> click to expand contents</span>
</span>
<span class="ui-icon ui-icon-plus ui-icon-shadow"> </span>
</span>
</a>
</h3>
<div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">
<p>Woohoo!</p>
</div>
</div>