Jquery: - listview不令人耳目一新

时间:2014-02-24 06:26:09

标签: jquery html5 listview jquery-mobile

问题: -

我的问题是,当我分配$('#ulmember').attr( 'data-filter','true');时。即使我的search-bar中没有listview。即使我在警报中显示listview data-filter属性,我也会收到true。即使此属性未应用 在listview上。我在memsearch click申请此属性。我想通过jquery代码分配data-role="true"。所以,如果有人对我的问题有所了解,那么请帮助我。

我的例子是Here

源代码: -

<div data-role="header">
    <div data-role="navbar" data-iconpos="right" >
        <ul>
            <li><a id="memsearch"  href="#" data-icon="search" style="padding:0px"><h2 id="groupname" style="margin:8px">Member List</h2></a></li>
        </ul>
    </div>
</div>
<div id="memberlist">        
    <ul id="ulmember" data-role="listview" data-filter-placeholder="Search Member..." data-inset="true">
        <li><a id="mem1"><h2>Member 1</h2></a></li>
        <li><a id="mem2"><h2>Member 2</h2></a></li>
        <li><a id="mem3"><h2>Member 3</h2></a></li>
        <li><a id="mem4"><h2>Member 4</h2></a></li>
    </ul>
</div>

Jquery代码: -

$(document).ready(function(){

    $("#memsearch").click(function(){

       alert($("#ulmember").attr("data-filter"));

        $('#ulmember').attr( 'data-filter','true');

        alert($("#ulmember").attr("data-filter"));
        $("#ulmember").listview('refresh');
    });
});

1 个答案:

答案 0 :(得分:0)

按预期工作。这样做:

<强> HTML:

<div data-role="content">
    <div data-role="controlgroup" data-type="horizontal">
        <a href="#" class="ui-btn toggle">Show/Hide Filter</a>
    </div>
    <ul data-role="listview" data-filter-placeholder="Search Member..." data-inset="true" id="ulmember">
        <li><a href="#">Member 1</a>

        </li>
        <li><a href="#">Member 2</a>

        </li>
        <li><a href="#">Member 3</a>

        </li>
        <li><a href="#">Member 4</a>

        </li>
        <li><a href="#">Member 5</a>

        </li>
        <li><a href="#">Member 6</a>

        </li>
    </ul>
</div>

<强> JS:

$("#ulmember").filterable({
    filterReveal: false
});
$(".ui-filterable").addClass("ui-screen-hidden");
$(".toggle").on("click", function () {
    $(".ui-filterable").toggleClass("ui-screen-hidden");
    $("ul li").removeClass("ui-screen-hidden");
    $("#ulmember").listview("refresh");
});

您可以查看:JSFIDDLE

相关问题