为什么jQuery mobile会自动更改主题?

时间:2013-04-21 08:50:42

标签: javascript jquery css css3 jquery-mobile

我弹出一个表单,它无法立即关注iPad上的输入。 另一个问题是表单按钮的主题在按下之后从e变为b,它不会再变回来了!

     <div data-role="page" id="addrPage">
       <div id="popupLogin" data-theme="e" class="ui-corner-all"
        style="z-index: 2;position:fixed;display: none;left:10%;top:15%;width: 250px;height: 150px;background-color:#0">
        <form id="OKForm" >
            <input type="text" id="formEdit" value="" placeholder="Input"           data-theme="e" autofocus="autofocus"/>
            <button type="submit" id="btnOK" data-theme="e">
                OK
            </button>
        </form>
        </div>
        <a data-role="button" id="tbProp">show</a>
    </div><!-- /page -->
<script>
$('#tbProp').bind( "click", function(event, ui) {
    $('#popupLogin').show();
        setTimeout(function(){
            $("#formEdit").focus();
        },0);
});

$('#OKForm').submit(function() {
    $("#popupLogin").hide();
    $("btnOK").removeClass("ui-btn-up-b ui-btn-hover-b").addClass("ui-btn-up-e ui-btn-hover-e");
    return false;
});
</script>

演示:http://jsfiddle.net/gclsoft/JZgWT/1/

1 个答案:

答案 0 :(得分:1)

  

更新:要在弹出窗口打开后打开虚拟键盘,请使用以下代码。

$('#popupLogin').on('popupafteropen', function () {
 $('#formEdit').trigger('click');
});

jQuery中的弹出窗口有一个data-role="popup",必须放在data-role="page" div中。这是显示/关闭它的正确方法。建议不要使用.show().hide()

<强>标记

<div data-role="page" id="addrPage">
 <div id="popupLogin" data-theme="e" data-role="popup">
  <form id="OKForm">
   <input type="text" id="formEdit" value="" placeholder="Input" data-theme="e"/>
   <button type="submit" id="btnOK" data-theme="e">OK</button>
  </form>
 </div> <!-- /popup -->
 <a data-role="button" id="tbProp">show</a>
</div> <!-- /page -->

jQuery Mobile

打开弹出窗口:

$('#tbProp').on('click', function () {
 $('#popupLogin').popup('open');
 $('#formEdit').focus();
});

关闭它并刷新提交按钮:

$('#OKForm').submit(function () {
 $('#popupLogin').popup('close');
 $('#btnOK').closest('div').removeClass('ui-btn-active');
});

或者您可以在弹出窗口关闭后刷新按钮:

$('#popupLogin').on('popupafterclose', function () {
 $('#btnOK').closest('div').removeClass('ui-btn-active');
});

CSS - 可选

#popupLogin {
 padding: 10px !important;
}

<强> Working Demo