Jquery Mobile 滑块不工作 JQM 1.3.2 和 Jquery 1.10.2

Posted

技术标签:

【中文标题】Jquery Mobile 滑块不工作 JQM 1.3.2 和 Jquery 1.10.2【英文标题】:Jquery Mobile slider not working JQM 1.3.2 and Jquery 1.10.2 【发布时间】:2013-08-09 05:43:50 【问题描述】:

我第一次使用 Jquery Mobile 设计移动 Web 应用程序。该应用程序有一个页面,该页面具有放置在固定位置的标题和导航栏。单击导航栏上的选项卡时,页面会加载到 div 内导航栏下方的同一页面上,该页面最初为空白。似乎通过 ajax 在同一页面上调用新页面会使 Jquery 移动效果不起作用。数据主题、数据角色、范围和其他数据属性都不起作用。 我正在尝试为页面“期刊”实现滑块,但它只显示一个带有值的文本框

<div style="float:left" data-role="fieldcontain">
<label for="slider-fill">Input slider:</label>
<input type="range" name="slider-fill" id="slider-fill" min="0" max="100" data-highlight="true" />
</div>

我正在使用 Jquery Mobile 1.3.2 和 Jquery 1.10.2 !

这是页面的 html 代码。 你会看到很多重复的代码,因为一旦我将它连接到数据库,它就没有连接到完整的数据库,那么它就不会那么混乱了。

  <body>
<link href="css/description.css" type="text/css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/style (2).css" type="text/css" rel="stylesheet" />
<script src="js/custom.js"></script>
<script src="js/jquery.raty.js"></script>

<script>
$(document).ready(function(e)
    $('#star').raty(
  cancel   : true,
  cancelOff: 'images/cancel-off-big.png',
  cancelOn : 'images/cancel-on-big.png',
  half     : true,
  size     : 30,
  starHalf : 'images/star-half-big.png',
  starOff  : 'images/star-off-big.png',
  starOn   : 'images/star-on-big.png'
);

    $('#add_journal').click(function(e) 
        $('#add_journal').hide();
        $('#journal_content').show();
    );
    );



</script>

<style>
#journal_content

    display:none;


</style>



<div data-role="content" data-theme="a">

    <div style="text-align:center; margin:10px; margin-bottom:10px;">
        <a href="#" data-role="button" id="add_journal" style="text-decoration:none; background-color:#67222e; padding:10px; color:#fff;">New Journal Entry</a>
    </div>

    <div id="journal_content">
        <div class="data">
            <h3> My Ratings: </h3>
            <div id="star"></div>
        </div>

        <div class="data">
            <div style="float:left">
                <h3> Tasting Notes: </h3>
            </div>
            <div style="float:right; padding-top:20px;">
                <a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
             </div>
             <div style="clear:both" id="notes">

            </div>
       </div>

       <div class="data">
            <h3> Appearance </h3>
            <hr>
            <div class="data_inside">
                <div style="float:left">
                    <h4> Descriptor words: </h4>
                </div>
                <div style="float:right; padding-top:20px;">
                    <a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
                 </div>
                <div style="clear:both" id="notes">

                </div>
             </div>
             <hr>
             <div class="data_inside">
                <div style="float:left">
                    <h4> Color Match: </h4>
                </div>
                <div style="float:right; padding-top:20px;">
                    <a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
                 </div>
                <div style="clear:both" id="notes">

                </div>
             </div>

      </div>



      <div class="data">
            <h3> Aroma </h3>
            <hr>

            <div class="data_inside">
                <div style="float:left">
                    <h4> Aroma Wheel: </h4>
                </div>
                <div style="float:right; padding-top:20px;">
                    <a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
                 </div>
                <div style="clear:both" id="notes">

                </div>
             </div>
             <hr>
             <div class="data_inside">
                <div style="float:left">
                    <h4> Descriptor Words: </h4>
                </div>
                <div style="float:right; padding-top:20px;">
                    <a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
                 </div>
                <div style="clear:both" id="notes">

                </div>
             </div>

      </div>

        <div class="data">
            <h3> Taste: </h3>
            <hr>

            <div class="data_inside">
                <div style="float:left">
                    <h4> Tasting Wheel: </h4>
                </div>
                <div style="float:right; padding-top:20px;">
                    <a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
                 </div>
                <div style="clear:both" id="notes">

                </div>
             </div>
             <hr>
             <div class="data_inside">
                <div style="float:left">
                    <h4> Descriptor Words: </h4>
                </div>
                <div style="float:right; padding-top:20px;">
                    <a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
                 </div>
                <div style="clear:both" id="notes">

                </div>
             </div>

      </div>


           <div class="data">
            <h3> Body/Structure: </h3>
            <hr>

            <div class="data_inside">
                <div style="float:left">
                    <h4> Descriptor Words: </h4>
                </div>
                <div style="float:right; padding-top:20px;">
                    <a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
                 </div>
                <div style="clear:both" id="notes">

                </div>
             </div>
             <hr>
             <div class="data_inside">
                <div style="float:left" data-role="fieldcontain">
                    <h4> Tannis: </h4>
                    <label for="slider-fill">Input slider:</label>
                    <input type="range" name="slider-fill" id="slider-fill" min="0" max="100" data-highlight="true" />
                </div>

                <div style="clear:both" id="notes">

                </div>
             </div>

      </div>








    </div> 





</div>



</body>

【问题讨论】:

将您的代码复制/粘贴到我的项目模板中,该模板也有页眉/页脚,它按原样运行良好。我正在使用 jquery 1.9.1 和 jqm 1.3.1。你能发布你的html页面的全部内容吗? 更新了我的代码以提取 jquery 1.10.2 和 jqm 1.3.2 以匹配您所做的事情并且它仍然有效。 @Drew:你能告诉我你的页面是如何运作的吗?如,你如何在 div 中调用你的页面?我调用的页面只有内容部分,因为通过 ajax 调用页面不会加载 head 部分。 以上页面由主页面调用,该页面加载了所有依赖项,如 jquery 、 jquery mobile。我无法在此页面中加载依赖项,因为它会导致某种 UI 错误。 我创建了一个答案,其中包含指向我用来测试滑块的代码的链接。我会将代码粘贴到答案中,但它很长,我似乎最终会破坏显示 【参考方案1】:

我把我创建的模型文件的副本放在了 pastebin 上。

HTML 页面

sandbox_slider.htm

外部 Javascript

sandbox_slider.js

【讨论】:

以上是关于Jquery Mobile 滑块不工作 JQM 1.3.2 和 Jquery 1.10.2的主要内容,如果未能解决你的问题,请参考以下文章

JQuery 滑块不可见但可以正常工作

通过ajax加载时jquery滑块不起作用

引导 4 升级后 jquery 滑块不显示

引导滑块不起作用

JQuery Month 滑块不起作用

JQuery UI滑块,仅加载Button而不加载Range并且滑块不滑动