博客

jQuery Mobile Popup open()方法

  • Post category:jquery

当我们需要在页面中弹出一个对话框或者Popup面板时，jQuery Mobile提供了一个方便的工具——Popup组件。其中，open()方法用于弹出Popup组件，本文将详细讲解这个方法的使用。

1. 语法

open()方法可以使用两种语法，分别为：

$( "#myPopup" ).popup( "open" );

或者

$( "#myPopup" ).popup( { "transition": "pop", "positionTo": "window" } );
$( "#myPopup" ).popup( "open" );

第一种语法比较简单，它只需要在选择器中指定Popup组件的id，然后调用popup()方法，并传入”open”作为参数即可。

第二种语法稍微复杂一些，不过也很容易理解。首先通过popup()方法设置Popup组件的一些属性，比如动画效果、弹出位置等；然后再调用open()方法打开Popup组件。

2. 实例

下面通过几个实例来演示open()方法的使用。

实例1

首先创建一个简单的Popup组件：

<div data-role="popup" id="myPopup">
  <p>Hello World!</p>
</div>

然后通过按钮的点击事件触发open()方法弹出Popup：

<a href="#" data-rel="popup" data-position-to="window" data-transition="pop" id="myButton">Popup</a>

<script>
$( "#myButton" ).click(function() {
  $( "#myPopup" ).popup( "open" );
});
</script>

在上面的代码中，我们使用了第一种语法，先通过按钮的点击事件获取到Popup组件的id，然后调用popup()方法并传入”open”作为参数，即可弹出Popup。

实例2

下面演示第二种语法的使用，先创建一个带有选择框的表单：

<form>
  <label for="select-choice-1">Choose a shipping method:</label>
  <select name="select-choice-1" id="select-choice-1" data-native-menu="false">
    <option value="standard">Standard: 7 day</option>
    <option value="rush">Rush: 3 days</option>
    <option value="express">Express: next day</option>
    <option value="overnight">Overnight</option>
  </select>
</form>

然后创建一个Popup组件，将上面的表单放进去：

<div data-role="popup" id="myPopup" data-overlay-theme="a" data-theme="a" data-dismissible="false">
  <div data-role="header" data-theme="a">
    <h1>Select a shipping method</h1>
  </div>
  <div>
    <form>
      <div style="padding:10px 20px;">
        <label for="select-choice-1" class="select">Choose shipping method:</label>
        <select name="select-choice-1" id="select-choice-1" data-native-menu="false">
          <option value="standard">Standard: 7 day</option>
          <option value="rush">Rush: 3 days</option>
          <option value="express">Express: next day</option>
          <option value="overnight">Overnight</option>
        </select>
        <div class="ui-grid-a">
          <div class="ui-block-a"><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-b">Cancel</a></div>
          <div class="ui-block-b"><a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-a" id="confirmButton">Confirm</a></div>
        </div>
      </div>
    </form>
  </div>
</div>

最后，通过点击按钮触发open()方法弹出Popup：

<a href="#" data-role="button" data-inline="true" data-rel="popup" data-theme="a" data-transition="pop" id="openButton">Open Popup</a>

<script>
$( "#openButton" ).click(function() {
  $( "#myPopup" ).popup({
      transition: "pop",
      positionTo: "window"
  });
  $( "#myPopup" ).popup( "open" );
});
</script>

在这个实例中，我们采用了第二种语法，先使用popup()方法设置了Popup组件的动画效果和位置，然后再通过open()方法打开了Popup组件。

3. 总结

open()方法是jQuery Mobile Popup组件中非常重要的一个方法，它可以方便地弹出Popup组件，非常适用于实现对话框等功能。上面的两个实例分别演示了open()方法的两种常见用法，希望可以帮助读者更好地理解这个方法。

Tags: