javascript - 无法在 jquery 移动页面中初始化 jQuery 旋钮-6ren

javascript - 无法在 jquery 移动页面中初始化 jQuery 旋钮

转载作者：行者123 更新时间：2023-11-28 13:27:42

36

4

我正在尝试使用jquery knob plugin显示一个圆圈，用户可以通过该圆圈发表评级。但我无法让它显示。我在这里发布我的代码，请告诉我出了什么问题。

PS:我正在使用 JQuery Mobile。所以页面是通过 Ajax 加载的。请记住这一点。

<html>
   <head>
    <title>Rate and Review</title>  

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

 <link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">

 <script src="jquery-2.1.3.min.js"></script>

    <script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
    <link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />

<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>

<link rel="stylesheet" type="text/css" href="flatUI/jquery.mobile.flatui.css" />

</head>

<body>
<div data-role="page" id="pageRate">

<script src="jQueryKnob/jquery.knob.js"></script>
<script src="jquery-2.1.3.min.js"></script>

<style type="text/css">

#ratingHeader {
font-family: arial;
font-size: 1em;
font-weight: bold;
margin: 18vw 0 0;
padding: 1.5vh;
text-align: center;
width: 90%;
}

#reviewHeader {
font-family: arial;
font-size: 1em;
font-weight: bold;
margin: 0;
padding: 2% 2% 2% 10vw;
text-align: left;
width: 90%;
}

#ratingCircleDiv {
width: 50vw;
overflow: hidden;
position:relative;
margin-left:25vw;
}

.dial {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none;
color: #ff8800;
font: bold 3em Arial;
height: 80px;
left: 0;
margin: 0; !important
padding: 0;
position: absolute;
text-align: center;
top: 0;
vertical-align: middle;
width: 124px;
}

#header1 {
color: white;
font-family: arial;
font-size: 1.4em;
margin: 0;
padding: 1.5vh;
text-align: center;
width: 90%;
}

#textarea {
margin-left: 3vw;
width: 93%;
}

</style>

 <div data-role="header" style="width:100%;position:fixed;z-index:1" data-theme="a">

     <div class="ui-grid-a" style="width:100%">

        <div class="ui-block-a" style="min-height:10vw;width:20%;overflow:hidden;margin-left:2%"> <div class="ui-bar ui-bar-a" style="height:90%;width:90%;margin:5%;padding:0;border:0">
            <img src="images/logo.png" style="max-height:100%;max-width:100%">
        </div></div>
        <div class="ui-block-b" style="min-height:10vw;width:70%;overflow:hidden;margin-left:0%"> <div class="ui-bar ui-bar-a" style="height:90%;width:90%;margin:0;padding:0;border:0">
            <h2 class="removeShadow" id="header1">Rate & Review</h2>
        </div></div>


    </div><!-- /grid-a -->


    </div><!-- /header -->
<div data-role="content" style="padding:0;z-index:0;position:relative;height:100vh" data-theme="a">

<label id="ratingHeader">
Your Rating : </label>

<div id="ratingCircleDiv">
    <input class="dial" data-width="200" data-min="-100" data-displayPrevious=true value="2.5" style="margin:0">
    <script>
        $("#pageRate").on("pageinit",function(e) 
        {
            $(".dial").knob({
                'min':0,
                'max':5,
                'step':0.5,
                'fgColor':'#ff8800',
                'bgColor':'#BBBBBB',
                'width':'100%'
                alert('initialized Knob');
            });

        $('.dial').css('margin','11vw 0 0 10vw');
        });
    </script>
</div>

<label id="reviewHeader">
write a review : </label>
<div data-role="fieldcontain">
    <!-- <label for="textarea">review:</label> -->
    <textarea name="textarea" id="textarea"></textarea>
</div>

</div><!-- /content -->

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

</body>
</html>

最佳答案

将代码包装在委托(delegate)给#pageRate 的pagecreate 事件中。您还需要将 data-role="none" 添加到 input 以防止 jQM 设置样式。

<input class="dial" data-role="none">

$(document).on("pagecreate", "#pageRate", function () {
    $(".dial", this).knob({
        'min': 0,
        'max': 5,
        'step': 0.5,
        'fgColor': '#ff8800',
        'bgColor': '#BBBBBB'
    });
});

Demo

关于javascript - 无法在 jquery 移动页面中初始化 jQuery 旋钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27797392/

36

4

0

文章推荐： html - 如何将输入定位到 iframe 的内部和底部？

文章推荐： ios - Swift 5 - 导航页面

jQuery 旋钮，放置图像而不是文本
我正在使用jQuery Knob我想知道是否有任何方法可以将图像而不是文本放入旋钮内，如果没有，是否有任何其他类似于 jQuery Knob 的插件具有此功能？最佳答案简单的回答是肯定的。该旋钮将
低分辨率下的 jQuery 旋钮
我正在尝试使用 jQuery Knob在移动网络应用程序中，因此屏幕分辨率为 320x480(您可以使用 http://www.resizemybrowser.com/ 进行测试)。但是，在此分辨率下
delphi - 德尔福 Sprite (旋钮)
我目前正在设计一个应该包含旋钮的GUI。 png文件有点像“动态图片”堆叠（缺少更好的单词）。假设图像的长度为32，每个旋钮的高度为32：我需要代码每转下降32。因此，默认情况下，Timage显示
jQuery 旋钮 tron 皮肤问题
如果有人以前使用过这个插件: https://github.com/aterrien/jQuery-Knob 我正在尝试应用皮肤:“tron” 尝试添加但没有成功，还在初始化代码中尝试过: $(".
javascript - 动态启用和禁用 jquery 旋钮
我正在使用优秀的 jQuery knob plugin .但是，我需要根据用户输入动态启用/禁用该元素。支持在页面加载时具有 disabled 状态，其效果是没有鼠标(或触摸)事件绑定(bind)到
javascript - 将动画笑脸添加到范围 slider 旋钮
我正在尝试向范围 slider 的旋钮添加动画笑脸，但我不确定是否有办法做到这一点。这是我正在使用的: var emojis = ['😠','😦','😑','😀','😍']; $("inp
javascript - NaN Jquery 旋钮
我正在尝试删除 jquery 旋钮上显示的 NaN。我尝试了一些方法，例如设置超时和调整倒计时器。如何修复我的旋钮，使其在首次调用时不再显示 NaN？示例http://codepen.io/miss
Javascript 旋钮/ slider 控制
我找到了一个使用旋钮/ slider 来控制 map 上的不透明度的 map 示例。我想使用相同的旋钮/ slider ，但用于不同的东西，而不是 map 的一部分。我有代码( http://www.
jQuery 旋钮 0.5 步？
我们想要使用 jQuery Knob 来选择我们尝试配置的步长为 0.5 的值步骤:.5 但它不起作用。在 jQuery Slider 中，这确实是这样工作的。是否也可以在旋钮中使用它？这个的语法是什
javascript - jquery 旋钮，动画和增量 alpha
我正在使用 jquery knob使用 .animate 作为百分比计，效果很好，但我想将旋钮的 Canvas 笔触样式的不透明度设置为 alpha 值，如:0% = 0.1, 100% = 1 并具
jquery - 将 CSS 添加到 Jquery 旋钮？
我有两个问题。首先，您如何更改旋钮的 CSS？我试过向它添加一个类，但这似乎没有用。也没有做内联样式。任何人都知道如何做到这一点(一个例子会很棒)？其次，有谁知道如何根据窗口大小修改旋钮的大小？我似
javascript - 无法在 jquery 移动页面中初始化 jQuery 旋钮
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
javascript - 仪表/旋钮 Jquery、Javascript、css3
有没有人做过这个？ - 我正在创建仪表/旋钮。我试图在这张照片中说明想法想法:您可以拖动按钮并根据拖动按钮的值更改一些文本和填充颜色。我在谷歌上搜索了可能的方法 - 有多种用于仪表动画的解决方案，例
使用 Foundation 5 损坏的 jQuery 旋钮
美好的一天。我正在尝试使用 Anthony Terrien 的 jquery Knob使用 Zurb Foundation，但似乎文本输入已损坏。这是一个屏幕截图: http://i.imgur.co
小米推出米家智能破壁料理机：配 OLED 旋钮，支持米家 App
小米米家智能破壁料理机现已开启预售，这款产品支持破壁熬煮、冷热双打，到手价 379 元。 IT之家了解到，米家智能破壁料理机支持破壁、研磨、碎冰、榨汁、冷热双打。热饮最大容量 1200ml，冷

首页

博学

6Ren·AI

商城

javascript - 无法在 jquery 移动页面中初始化 jQuery 旋钮