在jquery mobile中的左侧覆盖面板上启动弹出窗口

时间:2014-11-04 11:40:45

标签: html5 jquery-mobile

我正在开发移动应用。我有一个面板和一个弹出窗口,我希望弹出窗口在单击登出时在左侧覆盖面板上启动。我不会在我要去的地方开始。请有人建议。提前致谢。以下是我的代码。

  <div data-role="page" data-theme="a" id="demo-page" class="my-page">
  <div data-role="panel" id="mypanel" data-position="left" data-display="overlay" data-position-fixed="true"  >
  <div data-role="header" data-theme="a" data-position="absolute" >
  <h1>settin</h1>
  </div>
  <div data-role="content">
  <div class="content-primary">
  <ul data-role="listview" data-icon="false" data-theme="a" data-dividertheme="a" >
  <li><a href="#signout" rel="external"><img src="images/signout.png" alt="Documents" class="ui-li-icon">Sign out</a></li>
    </ul>
  </div>
  <!--/content-primary --> 
  </div>
  </div>
  <div data-role="popup" id="signout" data-theme="a" class="ui-corner-all"> <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
  <form>
  <div style="padding:10px 20px;">
    <h3 style="color:#29a797;"> Window</h3>
    <label for="un" class="ui-hidden-accessible">Username:</label>
    <input type="text" name="user" id="un" value="" placeholder="username" data-theme="a">
     <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Sign in</button>
    </div>
    </form>
   </div>
   <div data-role="header" data-position="fixed" data-theme="b">
   <h1>Panel</h1>
   <a href="#mypanel" data-rel="popup" data-transition="slideup" data-icon="bars" data-iconpos="notext" >Bars</a> </div>
  </div>

2 个答案:

答案 0 :(得分:1)

您不是指弹出窗口并使用不正确的rel属性。

<a href="#signout" rel="external">

您应该将其更改为

<a href="#signout" data-rel="popup" data-position-to="origin">

data-rel="popup"表示目标哈希是一个弹出窗口,data-position-to="origin"表示弹出窗口位于引荐按钮的顶部。

  

<强> Demo

答案 1 :(得分:0)

是肯定的。对于jqm中的每个元素,您应该设置data-rel。没有它按钮不能执行元素并运行它。例如,如果要为后退操作设置按钮,则应为按钮设置data-rel =“back”。