jquery移动数据转换和数据相关

时间:2014-09-16 11:14:23

标签: jquery-mobile

Iam的代码有两个对话框,从第二个对话框返回到第一个我已经将数据转换为幻灯片,但它无法正常工作。请有人帮助我,谢谢。

这是代码

    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale="1"">



<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>


<style>
.ui-simpledialog-screen-modal{
    opacity: 0.4;
}
.ui-simpledialog-container {
    border: 1px solid rgb(221, 221, 221) !important;
}
.ui-grid-a > div {
    padding: 2px;
}
</style>

<script>
$(document).on("pagecreate", "#page1", function () {

    $(document).on('click', '#openPopup', function() {
        $('#inlinecontent').simpledialog2({
            mode: "blank",
            headerText: "Select Item(s)",
            headerClose: false,
            blankContent: true,
            themeDialog: 'a',
            width: '75%',
            zindex: 1000
        });
    });

    $(document).on('click', '#dialogSubmit', function() {
        var numChecked = $('#cBoxes').find('[type=checkbox]:checked').length;
        if (numChecked > 0){
            $(document).trigger('simpledialog', {'method':'close'});
        } else {
          $('<div>').simpledialog2({
            mode: 'blank',
            headerText: 'Warning',
            headerClose: true,
            transition: 'flip',
            themeDialog: 'b',
            zindex: 2000,
            blankContent :
              "<div style='padding: 15px;'><p>Please select at least one checkbox first.</p>"+
              // NOTE: the use of rel="close" causes this button to close the dialog.
              "<a rel='close' data-role='button' href='#'>OK</a></div>"
          });
        }
    });

});
</script>
</head>
<body>
<!-- the page markup -->
<div data-role="page" id="page1">
    <div data-role="header" data-position="fixed">
         <h1>SimpleDialog2 Chained Popup</h1>
    </div>
    <div class="ui-content" role="main">
        <!-- button that opens the popup -->
        <button id="openPopup">Select One or More Item(s)...</button>
    </div>
</div>

<!-- the popup markup -->
<div id="inlinecontent" style="display:none" >
    <div  style="padding: 15px;">
        <fieldset id="cBoxes" data-role="controlgroup" >
            <legend>Favorite Fruit:</legend>
            <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a" />
            <label for="checkbox-v-2a">Apple</label>
            <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b" />
            <label for="checkbox-v-2b">Banana</label>
            <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c" />
            <label for="checkbox-v-2c">Orange</label>
        </fieldset>
        <div class="ui-grid-a">
            <div class="ui-block-a"><button id="dialogSubmit" data-theme="b">OK</button></div>
            <div class="ui-block-b"><button id="dialogCancel" rel='close'>Cancel</button></div>
        </div>
    </div>
</div>
</body>
</html>

0 个答案:

没有答案