Question

我需要点击标题中的按钮，然后叠加将显示为Sencha Touch：

Example image in Sencha touch

如何在同一页面中使用jQueryMobile进行覆盖

JsFiddle示例： http://jsfiddle.net/ReMZ6/184/

Answer 1

目前，这种对话框的叠加支持在jquery mobile中不可用。但是预计它将在未来的版本中出现。他们已经在这个网址中提供了该功能的演示 - http://filamentgroup.com/tests/popup/docs/pages/popup/index.html < / p>

目前您可以使用以下代码实现类似于您所需的代码：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script>
        $("#show-overlay").live("click",function(){
            $(".overlay").toggle(50);
        });
        $(".ui-mobile-viewport").live("click",function(event){
            var target = event.target;
            //Close the overlay if you have clicked on anywhere in body except the overlay itself and the button in header.
            //If the check for button in this if is skipped,you will not be able to show the overlay.Clicking on button in header to close is //handled by previous event handler.
            if($('#show-overlay').find(target).length==0 && $('.overlay').find(target).length==0) {
                $(".overlay").hide(50);
            }

        });
    </script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <style>
        .overlay{
            width:150px;
            position:absolute;
            top:45px;
            left:5px;
            border-radius:5px;
            background:#25374c;
            z-index:1501;
            padding:3px 5px 5px 5px;
        }
        .overlay-header{
            text-align:center;
            color:#fff;
            margin-bottom:3px;
        }
    </style>
</head> 
<body> 

<div id="home" data-role="page">
  <div data-role="header">
    <h1>Title</h1>
    <a name="submit" value="submit-value" id="show-overlay" data-icon="gear">OverLay</a>
  </div>
  <div data-role="content">
        <ul id='company_list' data-role='listview' data-inset='false'> 
            <li>item 1</li>    
            <li>item 2</li>    
            <li>item 3</li>    
            <li>item 4</li>    
        </ul>
  </div>
  <div class="overlay" style="display:none">
    <div class="overlay-header">
        Title
    </div>
    <div class="overlay-content">
    <ul id='tas_list' data-role='listview' data-theme="e">
            <li>Overlay item 1</li>
            <li>Overlay item 2</li>
            <li>Overlay item 3</li>
            <li>Overlay item 4</li>
        </ul>
    </div>
</div>
</div>



</body>
</html>

此处的演示 - http://jsfiddle.net/K3Tpu/

这只是草稿而且可能存在一些问题。

如果有帮助，请告诉我。

与Sencha Touch类似的叠加层/对话框

1 个答案: