博客

jQuery Mobile面板display选项

  • Post category:jquery

下面是jQuery Mobile面板display选项的完整攻略：

概述

在jQuery Mobile中，面板是一种常用的交互方式，它可以在一个大的内容区域中显示多个不同的页面，用户可以在这些页面之间进行切换。面板由<div>元素和data-role="panel"属性定义。在<div>元素中，可以设置data-display属性来指定面板的显示方式。该属性有三种可选值，分别是：reveal、push、overlay。

reveal显示方式

当data-display="reveal"时，面板会以一种从屏幕边缘滑入的形式出现，覆盖部分页面内容，但并不覆盖整个页面。该选项适用于需要让用户在现有页面中访问其他内容时使用。

push显示方式

当data-display="push"时，面板会以一种“推出”的方式出现，将原本存在的页面内容推至屏幕一侧，使面板占据页面的另一侧，并在面板内显示新的内容。该选项适用于在页面上可容纳两个内容界面时使用，例如一个具有左右布局的页面。

overlay显示方式

当data-display="overlay"时，面板会以一种覆盖原本存在的页面内容的形式出现，整个页面的内容被覆盖并暂时不可访问。该选项适用于只希望用户一次访问一些内容的情况，例如一些提示框或菜单。

示例

下面通过两个示例来说明如何使用data-display选项。

示例一：

在该示例中，我们创建了一个基本的页面，其中包含了一个按钮以及一个面板。面板可以通过点击按钮来打开，并采用reveal显示方式。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile Panel Display Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page">
    <div data-role="header">
        <h1>Panel Display Example</h1>
    </div>
    <div data-role="content">
        <a href="#myPanel" class="ui-btn ui-corner-all ui-shadow">Open Panel</a>
        <div data-role="panel" id="myPanel" data-display="reveal">
            <h2>Panel Content</h2>
            <p>This is the content of the panel.</p>
        </div><!-- /panel -->
    </div>
    <div data-role="footer">
        <h4>Footer Text</h4>
    </div>
</div>

</body>
</html>

在上面的代码中，我们给面板添加了data-display="reveal"属性，使得面板以reveal显示方式出现。如果我们将data-display属性的值改成overlay，或者push，就可以分别尝试其他两种显示方式。

示例二：

在该示例中，我们演示了面板的三种不同的display选项。我们创建了一个左右布局的页面，左边显示页面内容，右边是一个面板。面板和页面一起移动，当页面宽度足够宽时，面板从屏幕右侧滑入；当页面宽度变窄时，面板会覆盖在页面内容上。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile Panel Display Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" />
    <style>
        .ui-panel-display-push {
            box-shadow: none !important;
        }
        .ui-panel {
            position: absolute !important;
            top: 0 !important;
            z-index: 999 !important;
            height: 100% !important;
            background: #fff !important;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>

    <div data-role="page" id="myPage" class="ui-responsive-panel">
        <div data-role="header" data-position="fixed">
            <h1>Panel Display Example</h1>
            <a href="#myPanel" data-role="button" data-icon="bars" data-iconpos="notext" class="ui-btn-right">Menu</a>
        </div>
        <div data-role="content">
            <h2>Page Content</h2>
            <p>This is the content of the page.</p>
        </div><!-- /content -->
        <div data-role="panel" id="myPanel" data-position="right" data-display="reveal">
            <h2>Panel Content</h2>
            <p>This is the content of the panel.</p>
            <ul data-role="listview">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </div><!-- /panel -->
    </div><!-- /page -->

</body>
</html>

上述示例中，我们使用data-display选项为面板分别设置了reveal、push、overlay三种显示方式。reveal和overlay显示方式设置并不需要太多的CSS样式，而push显示方式需要添加ui-panel-display-push样式，以便正确地显示和移动面板。此外，面板默认会覆盖整个页面内容，因此我们还需要添加一些样式，将页面中的元素移动到正确的位置。

以上就是jQuery Mobile面板display选项的完整攻略。

Tags: