Наложение слоя / диалоговое окно, похожее на Sencha Touch - PullRequest
Новая
       33

Наложение слоя / диалоговое окно, похожее на Sencha Touch

2 голосов
/ 18 февраля 2012

Мне нужно нажать на кнопку в заголовке, тогда наложение покажет как Sencha Touch:

Example image in Sencha touch

как сделать это наложение с jQueryMobile на той же странице

JsFiddle Пример: http://jsfiddle.net/ReMZ6/184/

1 Ответ

2 голосов
/ 18 февраля 2012

В настоящее время эта поддержка наложения для диалога недоступна в jquery mobile. Но ожидается, что она появится в будущих версиях. Они продемонстрировали демонстрацию того, как эта функция будет в этом URL - http://filamentgroup.com/tests/popup/docs/pages/popup/index.html

В настоящее время вы можете использовать следующий код для достижения чего-то похожего на то, что вам нужно: 

<!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/

Это только черновик, и могут быть некоторые проблемы.

Дайте мне знать, если это поможет.

...