将页面显示为对话框 [英] show page as dialog box

问题描述

你好



我是phonegap的新手（jquery mobile）。我有两页。我需要在点击按钮上显示第二页作为对话框。但它显示我需要显示为对话框的全新页面。



这是我的代码我需要在添加按钮上调用CaseInformationScreen单击作为对话框

 <  ！DOCTYPE     html  >  
 <   html  >  
 <   head  < span class =code-keyword>>  
 <   meta     charset   =  utf-8 >  
 <   meta    名称  = 视口   内容  =  initial-scale = 1.0，user-scalable = no >  
 <   meta    名称  =  apple-mobile-web-app-capable    content   = 是 >  
 <   meta     name   =  apple-mobile-web-app-status-bar-style    content   =  black >  
 <   title  >  <   / title  >  
 <！ -     link rel =stylesheethref =css / jquery.mobile-1.3.1.min.css   - >   
 <   link     rel   = 样式表    href   =  css / jquery.mobile-1.3.1.css >  
 <！ -     link rel = stylesheethref =css / jquery.mobile.structure-1.3.1.css   - >   
 <！ -     link rel =stylesheethref =css / jquery.mobile.structure-1.3.1.min.css   - >   
 <   link     rel   =  stylesheet    href   =  css / jquery.mobile .theme-1.3.1.css >  
 <！ -     link rel =stylesheethref =css / jquery.mobile.theme-1.3.1.min.css   - >   
 
 <！ -    额外的Codiqa功能   - >   
 
 
 <！ -     jQuery和jQuery Mobile    - >   
 <   script     src   =  js / jquery-1.9.1.min.js >  <   /   script  >  
 <   script     src   =  js / jquery.mobile-1.3.1.min.js >  <   /   script  >  
 <   script     src   =  js / jquery.mobile-1.3 .1.min.js >  <   /  脚本 >  
 <   script     src   =  js / jquery.mobile-1.3.1.js >  <   /  脚本 >  
 <   script     src   =  js / EventHandler.js >  <   /   script  >  
 
 <！ -    额外的Codiqa功能   - >   
 
 
 <   / head  >  
 <  风格 >  
 
。 ui-page  {
  background   ： 透明网址（img / Background-Screen.png）重复0 0;  位置 ： 绝对;   height  ：  100％;  
  background-size  ： 封面;  
} 
 
 < /   style  >  
 
 
 <   body     onload   =  loadData （） >  
 
 
 
 < ;！ -    第一页我的案例屏幕-----------    - >   
 <   div     data-role   =  page    id   = 主页 >  
 <   div     data-role   =  header    data-theme   =  b    data-position   = 已修复 >  
 <   h1     class   =  ui-title      id   =  hdr    style   =  text-align：left; margin-left：20px; > 我的案例<   / h1  >  
 <   div     class   =  ui-btn-right    id   =  addbuttons    data-角色  =  controlgroup    data-type   =  horizo​​ntal >  
 <   a     href   = ＃   数据-role   = 按钮    data-inline   =  true    data-iconpos   =  notext    data-icon   =  gear    data-theme   =  b    id   = 设置 > 设置<   / a  >  
 <   a     href   = ＃newevent1    data-role   = 按钮    data-iconpos   =  notext    data-inline   =  true    data-icon   = < span class =code-keyword> plus    data-theme   =  b    data-rel   = 对话框    id   = 添加 > 添加<  < span class =code-leadattribute> / a  >  
 <   a     href   = ＃newevent1   数据角色  = 按钮    data-inline   =  true    data-theme   =  b    data-rel   = 对话框  id   = 编辑 > 编辑<   / a  >  
 <   / div  >  
 <   / div  >  
 
 <   div     id   =  here_table >  <   / div  >  
 <   / div  >  
 
 <！ -    第二页案例信息屏幕------------------------  < span class =code-comment>  - >   
 
 <   div     data-role   =  page    id   =  CaseInformationScreen >  
 <   div     data-role   =  header < span class =code-attribute>   data-theme   =  b    data-position   = 已修复 >  
 
 < span class =code-keyword><   a     href   = ＃     data-role   = 按钮    data-corners   =  false > 取消<   / a  >  
 < span class =code-keyword><   h1  > 案例信息<   / h1  >  
 <   a     href   = ＃     ddata-role   = 按钮    data-corners   =  false > 添加<   / a  >  
 < span class =code-keyword><   / div  >  
 
 <   div     data-role   =  f ieldcontain >  
 <   label     for   =  text-12    style  < span class =code-keyword> =  text-align：top; margin-left：0px; > 案例名称：<   / label  >  
 <  输入    name   =  text -12    id   =  text-12    value   =    类型  =  text >  
 <   / div  >  
 <   div     data-role   =  fieldcontain >  
 <  标签      =  text-12    style   =  text-align：left; margin-left：0px; > 案例日期：<   / label  >  
 <  输入    name   =  text-12    id   =  text-12    value   = < span class =code-keyword>    type   =  text >  
 <   / div  >  
 <   div     data-role   =  fieldcontain >  
 <   label       =  textarea-12  >  Textarea：<   / label  >  
 <   textarea     cols   =  40   < span class =code-attribute> rows   =  8   名称  =  textarea-12    id   =   textarea-12 >  <   / textarea  >  
 <   / div  >  
 <   / div  >  
 
 
 
 <   / body  >  
 
 
 <  脚本   >  
 
 $（ document ）。ready（ function （）{
  //   $（'。ui-loader'）。remove（）;  
 $ .mobile.loading（'  hide'）; 
 
}）; 
  var  loadData =  function （）{
 
  var  content =  < table>; 
  for （i =  0 ; i<  30 ; i ++）{
 content + = ' < tr class =row id =' + i + ' >< td>' + < span class =code-string>'  result' + i + ' < / TD>< / TR GT&;'; 
} 
 content + =  < / table> 
 $（' ＃here_table'）。append（content）; 
 
 
 $（ 。row）。click（  function （）{
 alert（ this  .id）; 
}）; 
} 
 $（  #addbuttons）。on（ 单击，  a， function （）{
 
  if （$（ this ）。attr（  id ）==  添加）{
 $ .mobile.changePage （$（ ＃CaseInformationScreen），{
 transition：  slide，
 reverse： false ，
 changeHash： false  
}） ; 
} 
}）; 
 <   /   script  >  
 <   / html  >  

解决方案

（ document ）。ready（ function （）{
//

（'。ui-loader'）。remove（）;

。 mobile.loading（' hide'）;

}）;
var loadData = function （）{

var content = < table>;
for （i = 0 ; i< 30 ; i ++）{
content + = ' < tr class =row id =' + i + ' >< td>' + < span class =code-string>' result' + i + ' < / TD>< / TR GT&;';
}
content + = < / table>

Hello

I am new in phonegap (jquery mobile). I have two page . i need to show second page as a dialog box on clicking button.But it show whole new page i need to show as a dialog box.

Here is my code i need to call CaseInformationScreen on Add button click as a dialog box

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <title></title>
        <!--link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"-->
        <link rel="stylesheet" href="css/jquery.mobile-1.3.1.css">
        <!--link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.css"-->
        <!--link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.min.css"-->
        <link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.css">
        <!--link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.min.css"-->

        <!-- Extra Codiqa features -->


        <!-- jQuery and jQuery Mobile -->
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/jquery.mobile-1.3.1.min.js"></script>
        <script src="js/jquery.mobile-1.3.1.min.js"></script>
        <script src="js/jquery.mobile-1.3.1.js"></script>
        <script src="js/EventHandler.js"></script>

        <!-- Extra Codiqa features -->


    </head>
    <style>

        .ui-page {
            background : transparent url(img/Background-Screen.png) repeat 0 0; position:absolute; height:100%;
            background-size : cover;
        }

    </style>


    <body onload="loadData()">



        <!--page one My Cases Screen------------->
        <div data-role="page" id="Home">
            <div data-role="header" data-theme="b" data-position="fixed">
                <h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 20px;">My Cases</h1>
                <div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal"> 
                    <a href="#" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gear" data-theme="b" id="Setting">Setting</a>
                    <a href="#newevent1" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="dialog" id="Add">Add</a>
                    <a href="#newevent1" data-role="button" data-inline="true" data-theme="b" data-rel="dialog"id="Edit">Edit</a>
                </div>
            </div>

            <div id="here_table"> </div>   
        </div>

        <!-- Page two  Case Information Screen-------------------------->  

        <div data-role="page" id="CaseInformationScreen">
            <div data-role="header" data-theme="b" data-position="fixed">

                <a href="#" data-role="button" data-corners="false">Cancel</a>
                <h1>Case Information</h1>
                <a href="#" ddata-role="button" data-corners="false">Add</a>
            </div>

            <div data-role="fieldcontain">
                <label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
                <input name="text-12" id="text-12" value="" type="text">
            </div>  
            <div data-role="fieldcontain">
                <label for="text-12" style="text-align:left;margin-left: 0px;">Case Date:</label>
                <input name="text-12" id="text-12" value="" type="text">
            </div>
            <div data-role="fieldcontain">
                <label for="textarea-12">Textarea:</label>
                <textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
            </div>
        </div>


        
    </body>


    <script >

        $(document).ready(function() {
            // $('.ui-loader').remove();
            $.mobile.loading('hide');

        });
        var loadData = function() {

            var content = "<table>";
            for (i = 0; i < 30; i++) {
                content += '<tr class="row" id="' + i + '"><td>' + 'result ' + i + '</td></tr>';
            }
            content += "</table>"
            $('#here_table').append(content);


            $(".row").click(function() {
                alert(this.id);
            });
        }
        $("#addbuttons").on("click", "a", function() {
          
            if ($(this).attr("id") == "Add") {
                $.mobile.changePage($("#CaseInformationScreen"), {
                    transition: "slide",
                    reverse: false,
                    changeHash: false
                });
            } 
        });
    </script>
</html>

解决方案

(document).ready(function() { //

('.ui-loader').remove();

.mobile.loading('hide'); }); var loadData = function() { var content = "<table>"; for (i = 0; i < 30; i++) { content += '<tr class="row" id="' + i + '"><td>' + 'result ' + i + '</td></tr>'; } content += "</table>"

这篇关于将页面显示为对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！