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

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

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

35

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/

35

4

0

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

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

java - Spring 上下文不使用 @ContextConfiguration 初始化，而是使用 new ClassPathXmlApplicationContext 初始化
我是 Spring 新手，这就是我想要做的事情: 我正在使用一个基于 Maven 的库，它有自己的 Spring 上下文和 Autowiring 字段。它的bean配置文件是src/test/res
具有动态元素数的python列表文字/初始化
我在我的测试脚本中有以下列表初始化: newSequenceCore=["ls", "ns", "*", "cm", "*", "ov", "ov", "ov", "ov", "kd"] (代表要在控
C++初始化
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: Class construction with initial values 当我查看 http://en.
非常量静态成员变量的C++初始化？
我得到了成员变量“objectCount”的限定错误。编译器还返回“ISO C++ 禁止非常量静态成员的类内初始化”。这是主类: #include #include "Tree.h" using n
为非虚拟方法指定的c++初始化
我有如下所示的a.h class A { public: void doSomething()=0; }; 然后我有如下所示的b.h #include "a.h" class b: publi
Kotlin 初始化 : how to fail
我需要解析 Firebase DataSnapshot (一个 JSON 对象)转换成一个数据类，其属性包括 enum 和 list。所以我更喜欢通过传递 DataSnapshot 来手动解析它进入二
JQUERY $(function() { 初始化
我使用 JQuery 一段时间了，我总是使用以下代码来初始化我的 javascript: $(document).ready( function() { // Initalisation logic
cocoa - NSString 初始化
这里是 Objective-C 菜鸟。为什么会这样: NSString *myString = [NSString alloc]; [myString initWithFormat:@"%f", s
cocoa - NSArrayController 初始化
我无法让核心数据支持的 NSArrayController 在我的代码中正常工作。下面是我的代码: pageArrayController = [[NSArrayController alloc] i
javascript - 放大的弹出窗口安装/初始化
我对这一切都很陌生，并且无法将其安装到我的后端代码中。它去哪里？在我的页脚下面有我所有的 JS？比如，这是什么意思: Popup initialization code should be exec
java - 初始化 JFrame
这可能是一个简单的问题，但是嘿，我是初学者。所以我创建了一个程序来计算一些东西，它目前正在控制台中运行。我决定向其中添加一个用户界面，因此我使用 NetBeans IDE 中的内置功能创建了一个 J
Phalcon 初始化()不工作
我有 2 个 Controller ，TEST1Controller 和 TEST2Controller 在TEST2Controller中，我有一个initialize()函数设置属性值。如果我尝
javascript - dependentObservable 初始化
据我所知， dependentObservable 在声明时会进行计算。但如果某些值尚不存在怎么办？例如: var viewModel ={}; var dependentObservable1 =
带有关键字参数的 ruby 初始化
我正在阅读 POODR 这本书，它使用旧语法进行默认值初始化。我想用新语法实现相同的功能。 class Gear attr_reader :chainring, :cog, :wheel de
polymer 初始化(无响应)
我按照 polymer 教程的说明进行操作: https://www.polymer-project.org/3.0/start/install-3-0 (我跳过了可选部分) 但是，在我执行命令“po
kotlin - Kotlin和构造函数，初始化
很抱歉问到一个非常新手的Kotlin问题，但是我正在努力理解与构造函数和初始化有关的一些东西。我有这个类和构造函数: class TestCaseBuilder constructor(
c# - 康威的生命游戏 - 初始化
假设我们有一个包含 30 列和 30 行的网格。生命游戏规则简而言之: 一个小区有八个相邻小区当一个细胞拥有三个存活的相邻细胞时，该细胞就会存活如果一个细胞恰好有两个或三个活的相邻细胞，那么它就
java - 初始化 ByteArrayOutputStream？
我是 MQTT 和 Android 开放附件“AOA” 的新手。在阅读教程时，我意识到，在尝试写入 ByteArrayOutputStream 类型的变量之前，应该写入 0 或 0x00首先到该变量。
Phalcon 初始化()不工作
我有 2 个 Controller ，TEST1Controller 和 TEST2Controller 在TEST2Controller中，我有一个initialize()函数设置属性值。如果我尝
inotify - 初始化:目录创建时的奇怪行为
我有一个inotify /内核问题。我正在使用“inotify” Python项目进行观察，但是，我的问题仍然是固有的关于inotify内核实现的核心。 Python inotify项目处理递归ino

首页

博学

6Ren·AI

商城

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