响应式jQuery Mobile标头按钮

Question

我在jquery移动应用程序中的标头部分遇到以下问题：

这是代码：

<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）如果没有，我该如何解决该问题？

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

        </div>

Answer 1

我看了twitter引导程序，如果您在页面下拉菜单显示了菜单之后，我在此处为JQM做了一个演示， 例如JQuery Mobile之类的Javascript菜单

我为侧边菜单创建了另一个演示，而不是淡入淡出并单击。 简单而美观，就像Gmail应用程序中的一样。

打开和关闭的按钮位于标题的左侧，因为我不能将其放在右侧，因为它应该是在小提琴上放置一个覆盖层，上面说结果，并且很难使点击继续。

演示我正在使用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在本机Android App中实现了确切的弹出菜单，并且仅使用Jquery进行了快速演示以及Velocity动画插入http://julian.com/research/velocity/ 。 归功于进行原始演示的人员和速度代码。

演示一些CSS需要正确使用才能修复，但看起来还可以

http://jsfiddle.net/zhxc830f/