Question

我正在尝试使用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>

Answer 1

将您的代码包含在委托给pagecreate的{{1}}个事件中。您还需要将#pageRate添加到data-role="none"以防止jQM对其进行样式设置。

input

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

<强> Demo

Answer 2

我解决了。看起来这是一个小错误在（“。dial”）。旋钮功能中，我不小心添加了“宽度：100％”，这是没有为jQuery旋钮插件定义的。它应该进入css。我删除了该行，一切正常。感谢

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

2 个答案: