博客

jQuery Mobile面板toggle()方法

  • Post category:jquery

jQuery Mobile面板toggle()方法详解

什么是jQuery Mobile面板toggle()方法？

toggle()方法可以在面板（panel）的“打开”和“关闭”状态之间切换。jQuery Mobile面板插件（panel widget）可以用于创建侧边栏菜单或选项卡等UI元素。

如何使用toggle()方法？

1.基本语法：

$( "#mypanel" ).panel( "toggle" );

其中，#mypanel 为你要进行“打开”或“关闭”的面板的ID。

2.同时打开/关闭多个面板：

$( "[data-role='panel']" ).panel( "toggle" );

此代码段会同时打开和关闭所有 data-role 属性为“panel”的元素。

示例说明

示例1：单个面板的打开/关闭

HTML代码：

<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Welcome to My Website</h1>
    </div>
    <div data-role="main" class="ui-content">
      <a href="#mypanel" class="ui-btn ui-btn-inline ui-corner-all">Open Panel</a>
      <div data-role="panel" id="mypanel">
        <h2>Title</h2>
        <p>Panel content goes here.</p>
      </div>
    </div>
  </div>
</body>

CSS代码：

#mypanel {
  width: 200px;
}

JS代码：

$( document ).on( "pagecreate", function() {
  $( "#mypanel" ).panel({
    beforeopen: function( event, ui ) {
      console.log( "Panel is about to open" );
    },
    beforeclose: function( event, ui ) {
      console.log( "Panel is about to close" );
    }
  });
  $( "#mypanel-toggler" ).on( "click", function() {
    $( "#mypanel" ).panel( "toggle" );
  });
});

此示例中，我们创建了一个面板和一个按钮来控制面板的打开/关闭。点击“Open Panel”按钮，面板就会打开；再次点击，面板就会关闭。

示例2：多个面板的打开/关闭

HTML代码：

<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Welcome to My Website</h1>
    </div>
    <div data-role="main" class="ui-content">
      <div data-role="panel" id="panel1" data-display="push">
        <h2>Panel 1</h2>
        <p>Panel 1 content goes here.</p>
      </div>
      <div data-role="panel" id="panel2" data-display="reveal">
        <h2>Panel 2</h2>
        <p>Panel 2 content goes here.</p>
      </div>
      <a href="#" id="panel-toggler" class="ui-btn ui-btn-inline ui-corner-all">Toggle Panels</a>
    </div>
  </div>
</body>

CSS代码：

/* Set default width for the panels */
[data-role=panel] {
  width: 250px;
}
/* Set the position of the panels */
#panel1.ui-panel,
#panel2.ui-panel {
  position: fixed;
  top: 0;
  bottom: 0;
}
/* Set the transition classes for the panels */
#panel1.ui-panel {
  -webkit-transform: translate3d(-100%,0,0);
  transform: translate3d(-100%,0,0);
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
#panel1.ui-panel.panel-closed {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
#panel2.ui-panel {
  -webkit-transform: translate3d(100%,0,0);
  transform: translate3d(100%,0,0);
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
#panel2.ui-panel.panel-closed {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

JS代码：

$(document).on("pagecreate", function () {
  $("#panel1, #panel2").panel();

  $("#panel-toggler").on("click", function () {
    $("#panel1, #panel2").panel("toggle");
  });
});

此示例中，我们创建了两个面板并使用 panel() 方法初始化它们。点击 “Toggle Panels” 按钮，两个面板都会同时打开或关闭。注意：在CSS中针对每个面板定义了不同的 data-display 属性值（push和reveal）。同时，我们还为两个面板分别设置了不同的移动效果。

Tags: