Question

我的jquery移动应用程序中的标题部分出现了以下问题：

enter image description here

以下是代码：

<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应用中的那个。

打开和关闭的按钮位于标题的左侧，因为我无法将其放在右侧，是否应该像小提琴放置一个叠加说明结果并且难以获得点击。

演示我正在使用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");  
});

<强>结果

enter image description here

2014年12月29日更新

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

演示有些Css需要修复才能正常使用，但看起来还不错

http://jsfiddle.net/zhxc830f/

enter image description here

响应式jQuery Mobile标题按钮

1 个答案: