android - 如何使用 jquery mobile 构建一个 android 样式的操作栏溢出

Question

我正在尝试使用 jQuery mobile 将 Andriod 样式的操作栏添加到我的应用程序中。具体来说，我想模拟此页面上标记为 #4 的“动作溢出” 。我很难相信以前没有这样做过，所以我不想重新发明轮子。如果还没有完成，我怀疑有一个很好的理由。目前我在我的应用程序中使用这些指南。但我想让它看起来更像动作栏（显然）。

它是由其他概念所知道的吗？还是 Jquery Mobile 没有真正的概念？

谢谢

Answer 1

我不知道有这样的事情。我建议从标题中的布局网格开始。这是一个简单的例子：http: //jsfiddle.net/Twisty/YTGKs/4/

<div data-role="page" id="index">
    <div data-role="header" data-theme="d">
        <div class="ui-grid-c">
            <div class="ui-block-a" style="width: 40px;">
                <a href="#back" data-rel="back"><img src="" style="display: block; width: 40px; height: 40px;"></a>
            </div>
            <div class="ui-block-b"  style="width: 75%">Action Bar</div>
            <div class="ui-block-c" style="width: 40px;">
                <span class="ui-btn-inner">
                    <a href="#search"><span class="ui-icon ui-icon-search"></span></a>
                </span>
            </div>
            <div class="ui-block-d" style="width: 40px;"></div>
        </div>
    </div>
    <div data-role="content">
        <p>Hello JQuery Mobile</p>
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

这将帮助您创建一个您想要的操作栏，并且您可以将其设置为执行您需要的操作、使用您自己的图像并适合您自己的样式。

编辑：更新为更清洁的示例：http: //jsfiddle.net/Twisty/YTGKs/4/