响应jQuery移动头按钮
我的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引导程序中看到的那样。但我好像搞错了。jquery移动电话()不满足这种需求吗？( b)若否，我如何解决问题？
注意我遵循这个链接的代码。我知道我在这里使用的是一个页脚类，但是我这样做只是为了让按钮在彼此的旁边格式化，并且可以自由地移动它们，而不必担心标签。
</div>回答 1
Stack Overflow用户
发布于 2014-12-25 05:29:36
我看了一下twitter引导程序，如果您是在打开显示菜单的页面后，我在这里为JQM做了一个演示，像Javascript一样的JQuery菜单
我为一个边菜单创建了另一个演示，而不是在点击时消失。简单又好，就像Gmail应用程序中的那种。
打开和关闭的按钮是在标题的左边，因为我不能把它放在右边，如果它应该像小提琴一样放置一个覆盖，在那里说的结果和它很难让点击开始。
演示我在使用字体很棒的图标，因为菜单有更多的变化
http://jsfiddle.net/qd0cfvd6/
<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日
我偶然看到了这个使用React和http://www.syncano.com/getting-started-reactjs-tutorial/来实现本地Android中精确的弹出菜单的图层http://julian.com/research/velocity/，并使用Jquery和速度动画插件http://julian.com/research/velocity/做了一个快速演示。荣誉的人，谁做了原始演示和速度代码。
演示一些Css需要修复才能正确使用，但看起来还行
http://jsfiddle.net/zhxc830f/
https://stackoverflow.com/questions/27627771
复制相似问题
腾讯云开发者
