可折叠集&数据过滤器不能同时工作

时间:2014-01-09 07:21:36

标签: jquery jquery-ui jquery-mobile user-interface

如何在ul中使用data-role =“listview”data-autodividers =“true”data-filter =“true”data-inset =“true”data-filter-placeholder =“Search For Names ...”标签... 我不能同时使用数据过滤器和data-role =“listview”data-autodividers =“true”......

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="pageone">
            <div data-role="content">
                <h2>My Phonebook</h2>
                <ul  data-role="listview"  data-autodividers="true"  data-filter="true"  data-inset="true" data-filter-placeholder="Search For Names..." >
                    <div data-role="collapsible-set">
                        <li data-role="collapsible">
                            <h3>Adele </h3>
                            <h5>098039847098</h5>
                            <h5>098039847098</h5>   
                        </li>
                        <li data-role="collapsible">
                            <h2>Agnes</h2>
                            <a href="demo.asp" data-ajax="false">098039847098</a>
                            <h5>098039847098</h5>       
                        </li>   
                        <li data-role="collapsible">
                            <h2>Bgnes</h2>
                            <a href="demo.asp" data-ajax="false">098039847098</a>
                            <h5>098039847098</h5>       
                        </li>   
                        <li data-role="collapsible">
                            <h2>Bakgnes</h2>
                            <a href="demo.asp" data-ajax="false">098039847098</a>
                            <h5>098039847098</h5>       
                        </li>   
                    </div>
                </ul>



                <p>The text inside the search box now says "Search For Names...".</p>
            </div>
        </div>
    </body>
</html>

1 个答案:

答案 0 :(得分:-1)

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js">  </script>
 </head>
<body>
    <div data-role="page" id="pageone">
        <div data-role="content">
            <h2>My Phonebook</h2>
            <ul  data-role="listview"  data-autodividers="true"  data-filter="true"  data-inset="true" data-filter-placeholder="Search For Names..." >
                    <li data-role="collapsible">
                        <h3>Adele </h3>
                        <h5>098039847098</h5>
                        <h5>098039847098</h5>   
                    </li>
                    <li data-role="collapsible">
                        <h2>Agnes</h2>
                        <a href="demo.asp" data-ajax="false">098039847098</a>
                        <h5>098039847098</h5>       
                    </li>   
                    <li data-role="collapsible">
                        <h2>Bgnes</h2>
                        <a href="demo.asp" data-ajax="false">098039847098</a>
                        <h5>098039847098</h5>       
                    </li>   
                    <li data-role="collapsible">
                        <h2>Bakgnes</h2>
                        <a href="demo.asp" data-ajax="false">098039847098</a>
                        <h5>098039847098</h5>       
                    </li> 
            </ul>
            <p>The text inside the search box now says "Search For Names...".</p>
        </div>
    </div>
  </body>
</html>