博客

jQuery Mobile面板的positionFixed选项

  • Post category:jquery

jQuery Mobile是一种基于jQuery框架的移动网站开发工具套件，提供了丰富的UI组件，其中面板（Panel）是其中之一。面板是一种滑入式导航条，类似于抽屉效果，可以显示一个菜单或者一个内容区域。而positionFixed选项则是面板的一个属性，用于控制面板在页面上的固定位置。

positionFixed属性的含义

为了实现面板始终固定在页面上，开发者可以使用positionFixed选项。当为该选项设置为true时，面板元素就会修复在界面上的某一个位置不动，无法跟随页面滚动而滚动，直到用户主动关闭面板。这个特性对于一些移动端应用或者提供在线预览的网站来说十分实用。

positionFixed属性的用法

positionFixed属性通常会被设置在面板元素的初始化选项中，如下：

$( "#mypanel" ).panel({
  position: "right",
  positionFixed: true,
  display: "push"
});

在上述代码中，positionFixed属性值被设置为true，可以观察到面板元素（ID为#myPanel）会固定在屏幕的右侧不动。

positionFixed属性的示例说明

以下是两个示例，演示如何使用positionFixed属性实现固定面板。

示例1：固定面板

在这个例子中，面板会默认出现在左侧，并且面板顶部将固定在屏幕上方，面板底部的灰色部分将会自动滚动。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Mobile：positionFixed属性示例1</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.css">
  <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
  <div data-role="page" id="pageone">
    <div data-role="panel" id="myPanel" data-position="left" data-position-fixed="true">
      <h2>面板示例</h2>
      <p>这是一个面板，位于左侧固定</p>
      <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-b ui-icon-delete ui-btn-icon-left">关闭</a>
    </div>
    <div data-role="header">
      <h1>我的页面</h1>
      <a href="#myPanel" class="ui-btn ui-shadow ui-corner-all ui-icon-bars ui-btn-icon-left">菜单</a>
    </div>
    <div data-role="main" class="ui-content">
      <h2>欢迎访问我的网站！</h2>
      <p>这里是我的主页。</p>
    </div>
    <div data-role="footer">
      <h1>页脚</h1>
    </div>
  </div>
</body>
</html>

在上述代码中，我们将data-position-fixed属性设置为true，实现了面板的固定。

示例2：Vimeo视频面板

这个例子展示了如何嵌入Vimeo视频并使用持续拖动面板呈现统一的用户界面：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Mobile：positionFixed属性示例2</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.css">
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }

    #content {
      position: relative;
      z-index: 0;
    }

    #video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
  </style>

  <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>

  <script>
    $(document).on('pagecreate', '#videoPage', function() {
      var iframe = document.querySelector('iframe');
      var player = $f(iframe);

      player.addEvent('ready', function() {
        player.addEvent('finish', function() {
          $.mobile.navigate("#pageone");
        });
      });

      $('#mypanel').panel();
      $('#mypanel').on( "panelbeforeopen", function( event, ui ) {
         ui.panel.html("<h3>请登录以收看视频</h3><form><label for='u'></label><input type='text' name='user'></form>");
      });
      $('#mypanel').on( "panelclose", function( event, ui ) {
        player.api('play');
      });
      $('#mypanel').on('submit', 'form', function() {
        $.mobile.changePage("#videoPage",{ transition: "pop", changeHash: false});
        return false;
      });
    });
  </script>
</head>

<body>
  <div data-role="page" id="pageone">
    <div data-role="panel" id="mypanel">
      <h2>请选择您离常见协议最近的一个协议符号？</h2>
      <ul data-role="listview">
        <li><a href="#">HTTP</a></li>
        <li><a href="#">FTP</a></li>
        <li><a href="#">SSH</a></li>
        <li><a href="#">SFTP</a></li>
        <li><a href="#">SNMP</a></li>
      </ul>
    </div>
    <div data-role="header">
      <h1>我的页面</h1>
      <a href="#myPanel" class="ui-btn ui-shadow ui-corner-all ui-icon-bars ui-btn-icon-left">菜单</a>
    </div>
    <div data-role="main" class="ui-content">
      <h2>欢迎访问我的网站！</h2>
      <p>这里是我的主页。</p>
    </div>
    <div data-role="footer">
      <h1>页脚</h1>
    </div>
  </div>

  <div data-role="page" id="videoPage">
    <div id="content">
      <iframe id="video" src="//player.vimeo.com/video/76979871?api=1&player_id=video&badge=0&title=0&byline=0&portrait=0">
      </iframe>
    </div>
    <div data-role="panel" id="mypanel" data-position="right" data-position-fixed="true" data-display="overlay">
      <h2>登录以继续播放</h2>
      <form>
        <div class="ui-field-contain">
          <label for="name">用户名</label>
          <input type="text" name="name" id="name">
        </div>
        <div class="ui-field-contain">
          <label for="password">密码</label>
          <input type="password" name="password" id="password">
        </div>
        <input type="submit" value="登录">
      </form>
    </div>
  </div>
</body>
</html>

在这个例子中，我们使用了panelbeforeopen事件和on方法，在面板打开之前动态地设置其内容。在这种情况下，我们要求用户输入其凭据才能观看视频。当用户输入凭据并单击登录按钮时，视频将开始播放。我们还在videoPage页面中使用了一个相对定位的内容层，以便能够在面板出现时实现整体滚动，但是仍然保持面板在固定位置。

Tags: