带有Page元素的Jquery Mobile Dialog

时间:2011-09-19 12:51:15

标签: jquery-mobile

我正在尝试让应用的标题按钮在页面上启动嵌入的表单。任何想法,如果这是可能的,或者不是手册JS将实现它的目的是什么?

<div data-role="header" class="ui-header ui-bar-a" role="banner">
  <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Devices</h1>
  <a class="ui-btn-right ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-down-a ui-btn-up-a" data-icon="gear" data-rel="dialog" data-transition="flip" href="#filter_form" data-theme="a"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Options</span><span class="ui-icon ui-icon-gear ui-icon-shadow"></span></span></a>
</div>
<!-- other page stuff -->
    <div id='filter_form' style='display: none'>
      <h3>Device Criteria</h3>
      <form accept-charset="UTF-8" action="/devices" method="get">
        <div data-role='fieldcontain'>
          ...
        </div>
        <div>
          <button data-theme='a'>Submit</button>
        </div>
      </form>
    </div>
    <script>
      //<![CDATA[
        $(function(){
          $('.show_filter_form').click(function(){
            console.log("in click handler")
            $.mobile.changePage($('#filter_form form'), {transition: 'pop', changeHash: false, role: 'dialog'});
            return false;
          })
        })
      //]]>
    </script>

点击被触发但页面上没有任何反应,除了标题中显示的无样式后退按钮。

如果您有任何想法,我会为它设置一个小提琴:http://jsfiddle.net/BHMmP/

1 个答案:

答案 0 :(得分:0)

关于您的JS编码,点击“ .show_filter_form ”后会弹出对话框。但是,这个元素在哪里“ .show_filter_form ”?