javascript - 响应式 jQuery Mobile 标题按钮

Question

我的 jquery 移动应用程序中的 header 部分存在以下问题:

这是代码:

<div data-role="footer" class="ui-bar">
            <a href="#searchpage" data-role="button" data-icon="search" style="border-right:1px solid #0E6251;">Search</a>
            <a href="#sellbookpage" data-role="button" id="ContactSellButton" data-icon="dollar" style="border-right:1px solid #0E6251;">Sell</a>
            <a href="#" data-role="button" data-icon="email">Contact Us</a>

            <div id='ContactUsProfileButtons' class='ui-btn-right' style="display: flex;">  
                <a data-icon='home' href="#profilepage"  data-role='button' style="border-right:1px solid #0E6251;">Profile</a>
                <a data-icon='forward' onclick='LogOut()' data-role='button'>Log Out</a>
            </div>  

理想情况下，我希望按钮能够压缩成一个下拉菜单，如 twitter bootstrap 所示。但我似乎无法做到这一点。 jquery mobile a) 不满足这个需求吗？ b) 如果不是，我该如何解决这个问题？

注意我遵循的代码 link 。我知道我在这里使用了页脚类，但我这样做只是为了让按钮的格式彼此相邻，并且可以自由地移动它们，而不必担心标签。

        </div>

Answer 1

我查看了 twitter bootstrap，如果您在下拉页面后显示菜单，我在这里为 JQM 做了一个演示 Javascript Menu like JQuery Mobile

我为侧面菜单创建了另一个演示，而不是在单击时淡入。简单又漂亮，就像 Gmail 应用程序中的那样。

打开和关闭的按钮位于标题的左侧，因为我不能将其放在右侧，如果它应该像 fiddle 那样放置一个覆盖层，说明结果在那里，并且很难点击。

演示我正在使用 Font Awesome Icons，因为菜单有更多种类

http://jsfiddle.net/qd0cfvd6/

HTML

<div data-role="header">
<a data-iconpos="notext" id="panelleft" data-role="button"><i class="button fa fa-ellipsis-v"></i></a>
    <h1>Page Title</h1>
</div>

<div id="menu">
    <ul data-role="listview">
        <li><i class="icon fa fa-search"></i><span class="text">Search</span></li>
        <li><i class="icon fa fa-envelope"></i><span class="text">Contact</span></li>
            <li><i class="icon fa fa-book"></i><span class="text">Profile</span></li>
            <li><i class="icon fa fa-level-up"></i><span class="text">Logout</span></li>
    </ul>
</div>

CSS

#menu{
    width:100px !important;
    height: auto; 
    padding:10px;
    background-color:#fff; 
    position:fixed;
    top:47px;
    right:0px;
    -moz-box-shadow:-2px 0px 5px #aaa;
    -webkit-box-shadow:-2px 0px 5px #aaa;
    box-shadow:-2px 0px 5px #aaa;
    width:100px;
    display:none;
}

.ui-btn-left, .ui-btn-right {
border: 0 !important;
background-color: transparent !important;
box-shadow: none !important;
}

.fa {
 font-size:18px;
}

.icon {
 margin-left:-14px; 
 font-size:12px  
}
.text { margin-left:20px !important;
font-size:12px }
}

Jquery

 $(document).on("click",".button", function(){
 $('#menu').fadeToggle("fast");  
});

结果

2014 年 12 月 29 日更新

我看到了这个教程 http://www.syncano.com/getting-started-reactjs-tutorial/使用 React Js 和 Velocity 在 native Android 应用程序中实现精确的弹出菜单，并仅使用 Jquery 和 Velocity 动画插件进行快速演示 http://julian.com/research/velocity/ 。感谢制作原始演示和 Velocity 代码的人。

演示 一些 CSS 需要修复才能正常使用，但看起来没问题

http://jsfiddle.net/zhxc830f/