Question

我正在尝试使用页面页脚中的选项列表在jquery mobile中获得具有不同样式的菜单。如下所示。

enter image description here

先谢谢。

更新

    $('body').bind('hideOpenMenus', function(){
    $("ul:jqmData(role='menu')").find('li > ul').hide();
}); 
var menuHandler = function(e) {
    $('body').trigger('hideOpenMenus');
    $(this).find('li > ul').show();
    e.stopPropagation();
};
$("ul:jqmData(role='menu') li > ul li").click(function(e) {
   $('body').trigger('hideOpenMenus');
e.stopPropagation();
});
$('body').delegate("ul:jqmData(role='menu')",'click',menuHandler);
$('body').click(function(e){
   $('body').trigger('hideOpenMenus');
});

Answer 1

这是最简单的解决方案，没有javascript或CSS，基本上是纯粹的jQuery Mobile解决方案。

工作示例：http://jsfiddle.net/Gajotres/PMrDn/58/

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="a" data-role="header">
                <h1>Index page</h1>
            </div>

            <div data-role="content">
                <div data-role="popup" id="popupMenu">
                    <ul data-role="listview" data-inset="true" data-theme="a">
                        <li data-icon="arrow-r"><a href="">Item1</a></li>
                        <li data-icon="grid"><a href="">Item2</a></li>
                        <li data-icon="info"><a href="">Item3</a></li>
                    </ul>
                </div>
            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">
                <h1>Index page</h1>                
                <a href="#popupMenu" class="ui-btn-left" data-icon="bars" data-iconpos="notext" data-rel="popup" data-transition="pop">Next</a>                
            </div>            
        </div>    
    </body>
</html>

菜单和使用jquery的选项列表？

1 个答案:

HTML：