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

Question

我正在尝试使用 jquery knob plugin 显示一个圆圈，用户可以通过该圆圈 post 进行评分。但是我无法显示它。我正在 post 编写我的代码，请告诉我哪里出了问题。

附言：我正在使用 JQuery 手机。所以页面是通过 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>

Answer 1

我解决了。看起来这是一个小错误在 (".dial").knob 函数中，我不小心添加了一个 "width:100%"，它没有为 jQuery 旋钮插件定义。它应该放在 css 中。我删除了那条线，一切正常。谢谢

Answer 2

将您的代码包装在委托给 #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

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

cannot initialise jQuery knob in jquery moble page

html

javascript

ajax

jquery

jquery-mobile