How to add multiple icons in jquery mobile collapsible list

不问归期 提交于 2019-12-10 16:47:11

问题


I would like to add an another icon near by the plus icon of the jquery mobile collapsible list. But could not able to add it since jquery mobile creates that icon dynamically. Any suggestion would be greatly appreciated!


回答1:


This is certainly a hack but you can wait for the page to initialize, then find the list-view widget and append the jQuery Mobile HTML for an icon to each list-item:

//wait for a certain pseudo-page to initialize
$(document).delegate('#home', 'pageinit', function () {

    //find the listview and append to it's second tier children (the `<div class="ui-btn-inner ui-li" />` element)
    $(this).find('ul[data-role="listview"]').children().children().append('<span class="ui-icon ui-icon-home ui-icon-shadow" style="right:30px;">&nbsp;</span>');
});​

Notice I changed the right CSS property of the new icon so it doesn't overlap the initial icon.

Here is a demo: http://jsfiddle.net/uZxXB/




回答2:


<fieldset data-role="collapsible" data-iconpos="left" >
                        <h1 ><span    class="ui-icon ui-icon-home ui-icon-shadow ui-btn-icon-right" style="right:30px;">&nbsp;</span>Header</h1>

You can add it in html

Two icons one in the left and other for the right and change css of jQuery min to text align center

.ui-collapsible-heading .ui-btn{text-align:center;margin:0;border-left-width:0;


来源:https://stackoverflow.com/questions/10302769/how-to-add-multiple-icons-in-jquery-mobile-collapsible-list

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!