Question

我在每个页面的标题中都有一个正确的注销按钮，以这种方式定义：

<div data-role="page" id="displaySchedule" data-title="Display Schedule">
<div data-role="header" data-theme="a">
<a href="#home" data-icon="home" data-iconpos="notext"></a>
<h1>Schedule</h1>
<div class="ui-btn-right">
<a class="logoffButton" data-role="button" id="logoffButton" href="#logout" data-icon="delete" data-iconpos="notext"></a>
</div>
.....

这在1.1.1中运行良好。但是，当页面显示在1.2.0-Beta-1中时，标题如下所示（注意X图标位于主页按钮的水平线下方（约为其高度的1/2）和单词Schedule ）。在1.1.1中，所有三个都正确排列。

enter image description here

当然，任何帮助都表示赞赏。

Answer 1

事实上，你不应该在div中包含你的右键。

试一试：

<html>
    <head>
        <meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile.structure-1.2.0-beta.1.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>

    </head>

    <body>

        <div data-role="page" id="displaySchedule" data-title="Display Schedule">
            <div data-role="header" data-theme="a">

                <a href="#home" data-icon="home" data-iconpos="notext"></a>
                <h1>Schedule</h1>
                <a class="logoffButton" data-role="button" id="logoffButton"
                    href="#logout" data-icon="delete" data-iconpos="notext"></a>

            </div>
        </div>

    </body>
</html>

screenshot

如果您想在标题中添加多个对齐的按钮，您可以执行以下操作：

将课程 class="ui-btn-right"（或class="ui-btn-left"）添加到您的按钮/链接<a>，以获取位于右侧（左侧）标题标题
使用CSS的margin-right和/或margin-left来区分同一侧（右/左）的不同按钮;否则，按钮将堆叠在一起。

这是一个简单的例子，包括几个按钮：

<html>
    <head>
        <meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>        

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile.structure-1.2.0-beta.1.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>                        
    </head>

    <body>
        <div data-role="page" id="page_1">
            <div data-role="header" data-theme="a">

                <!-- 1st LEFT BUTTON FROM THE LEFT -->
                <a href="#" data-icon="arrow-l" data-iconpos="notext" 
                    class="ui-btn-left"></a>

                <!-- 2nd LEFT BUTTON FROM THE LEFT -->
                <a href="#" data-icon="arrow-r" data-iconpos="notext" 
                    class="ui-btn-left" style="margin-left: 30px"></a>

                <!-- HEADER TITLE -->   
                <h1>hello</h1>

                <!--  1st RIGHT BUTTON FROM THE RIGHT -->
                <a href="#" data-icon="gear" data-iconpos="notext" 
                    class="ui-btn-right"></a>

                <!--  2nd RIGHT BUTTON FROM THE RIGHT -->
                <a href="#" data-icon="arrow-r" data-iconpos="notext" 
                    class="ui-btn-right" style="margin-right: 30px;"></a>

                <!--  3rd RIGHT BUTTON FROM THE RIGHT -->
                <a href="#" data-icon="arrow-l" data-iconpos="notext" 
                    class="ui-btn-right" style="margin-right: 60px;"></a>

            </div>
        </div>
    </body>
</html>

以上是上述示例的屏幕截图：

在纵向模式下：

portrait mode

横向模式：

landscape mode

jquery mobile标题图标位置在1.2.0-Beta-1中有所不同

1 个答案: