jQuery Mobile最佳实践-面板按钮，后退按钮或两者 [英] jQuery Mobile best practice - panel button, back button, or both

问题描述

我正在创建一个针对iPad Mini的移动应用程序.我有一个带有导航菜单的面板，该面板从左侧滑出.我还需要标题中的后退按钮.标题中按钮的最佳做法是什么?在应用程序流程中的某些时候，我需要一个后退按钮，我也需要在页眉中打开面板的按钮.

I'm creating a mobile app targeted for iPad Mini. I have a panel that slides out from the left with navigation menu. I also have the need for a back button in the header. What is the best practice for buttons in the header? I need a back button at certain times in the flow of the application and I also need the button that opens the panel in the header too.

感谢您的建议.

我忘了提到标题的右侧有一个加载条形码扫描器的按钮.因此，我只剩下标题的左侧以争夺2个按钮.

I forgot to mention the right side of header has a button that loads barcode scanner. So, I'm left with left side of header to compete for 2 buttons.

推荐答案

页眉可在左右两个按钮上分别容纳ui-btn-left和ui-btn-right.

Header can accommodate two buttons on right and left, ui-btn-left and ui-btn-right respectively.

但是，您可以使用具有data-type="horizontal"属性的 controlgroup 小部件.

However, you can place more than two buttons in header by using controlgroup widget with data-type="horizontal" attribute.

<div data-role="header">
    <!-- right-hand button -->
    <a href="#" class="ui-btn-right" data-icon="bars">Bcode</a>

    <!-- if you don't want to use title,
    replace it with <span class="ui-title"></span> -->
    <h1>Header</h1>

    <!-- left-hand button -->
    <div data-role="controlgroup" data-type="horizontal" class="ui-btn-left">
        <a href="#panel" data-role="button" data-icon="star">Panel</a>
        <a href="#" data-role="button" data-icon="back">Back</a>
    </div>
</div>

演示 jQM< = 1.3

Demo jQM <= 1.3

演示 jQM> = 1.4

Demo jQM >= 1.4

这篇关于jQuery Mobile最佳实践-面板按钮，后退按钮或两者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！