【问题标题】:JQuery Mobile - version conflicts, radiobutton JS refreshJQuery Mobile - 版本冲突,单选按钮 JS 刷新
【发布时间】:2020-06-13 18:58:40
【问题描述】:

我正在重新开始使用 JQueryMobile 进行开发,这对于制作移动应用程序原型来说非常棒,但是我遇到了一个潜在的版本问题: 要么格式工作正常,但 js-checked 单选按钮不刷新,要么格式需要退出窗口,然后同一个 JS 确实设法产生刷新。我正在研究 dreamweaver CS6 并与 js-bin 进行交叉检查.

这是具有有效 JQM 格式的页面,但缺少单选按钮自我更新功能。 http://jsfiddle.net/tearex/bh9szuer/

    <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head> 
<body ONLOAD="heja()"> 

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <fieldset data-role="controlgroup">
    <legend>Choose a pet:</legend>
         <input class="group1" type="radio" name="radio-choice" id="WTEDY_0" value="choice-1" />
         <label for="WTEDY_0">Cat</label>

         <input class="group1" type="radio" name="radio-choice" id="WTEDY_1" value="choice-2"   />
         <label for="WTEDY_1">Dog</label>
</fieldset>
    </div><!-- /content -->

</div><!-- /page -->

</body>

<script>
function heja()
{

document.getElementById("WTEDY_0").checked = true;


        $("WTEDY_0").checkboxradio("refresh");

}
</script>

不确定检查的状态是否已更新但没有刷新。

这是一个带有最新 jqm 的页面 - 它根本没有显示 jqm 格式(顺便说一下,页面也被加载到 chrome 中 - 最新的,在 windows 7 64少量) http://jsfiddle.net/tearex/bh9szuer/2/

    <head> 
    <title>My Page</title> 

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/themes/my-custom-theme.css" />
  <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" /> 
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body ONLOAD="heja()"> 

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <fieldset data-role="controlgroup">
    <legend>Choose a pet:</legend>
         <input class="group1" type="radio" name="radio-choice" id="WTEDY_0" value="choice-1" />
         <label for="WTEDY_0">Cat</label>

         <input class="group1" type="radio" name="radio-choice" id="WTEDY_1" value="choice-2"   />
         <label for="WTEDY_1">Dog</label>
</fieldset>
    </div><!-- /content -->

</div><!-- /page -->

</body>

<script>
function heja()
{

document.getElementById("WTEDY_0").checked = true;


        $("WTEDY_0").checkboxradio("refresh");

}
</script>

这里是完全没有引用css的页面,并且onload函数可以正常工作。 http://jsfiddle.net/tearex/y4a369ps/1/

    <head> 
    <title>My Page</title> 

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

</head> 
<body ONLOAD="heja()"> 

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <fieldset data-role="controlgroup">
    <legend>Choose a pet:</legend>
         <input class="group1" type="radio" name="radio-choice" id="WTEDY_0" value="choice-1" />
         <label for="WTEDY_0">Cat</label>

         <input class="group1" type="radio" name="radio-choice" id="WTEDY_1" value="choice-2"   />
         <label for="WTEDY_1">Dog</label>
</fieldset>
    </div><!-- /content -->

</div><!-- /page -->

</body>
<script>
function heja()
{

document.getElementById("WTEDY_0").checked = true;


        $("WTEDY_0").checkboxradio("refresh");

}
</script>

我有一些问题。 1、JQM如何实现单选按钮状态变化和刷新保留? 2. 你认为哪个版本的 jqm 是最佳的,或者——理想情况下——你如何使最新的版本工作? 3. 附带问题推荐的最兼容的基于 Web 的 jsfiddle 等效项是什么? 非常感谢。

【问题讨论】:

标签: javascript jquery-mobile radio-button compatibility


【解决方案1】:

是时候切换到https了:

<!-- JQM theme shall be loaded before structure -->
<link rel="stylesheet" href="css/my-custom-theme.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<link rel="stylesheet" href="css/my-custom-styles.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
  $(document).on("mobileinit", function () {
    /* my custom settings */
  });
</script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
<script src="js/my-custom-functions.js">

关于刷新,也请不要忘记 jQuery 需要 CSS 样式的选择器:

function heja() {
  var id = 'WTEDY_0', el = document.getElementById(id);
  el.checked = true; 
  $('#' + id).prop('checked', true); /* The jQuery way */
  var isInstance = $.data(el, 'mobile-checkboxradio');
  if(isInstance) {
    $('#' + id).checkboxradio('refresh'); /* The JQM Widgets way */
  }
}

这是 Plunker 上的一个工作示例:https://plnkr.co/edit/yLEB2XFlM8H4cqsZ?open=lib%2Fscript.js

【讨论】:

    猜你喜欢
    • 2013-03-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-06-12
    • 2012-01-16
    • 1970-01-01
    相关资源
    最近更新 更多