0

我正在使用 jQuery Knob 来显示进度（只读模式）。我希望圆的大小能够适应动态使用我的应用程序的布局/设备的大小。

我已经尝试使用data-width="75%"但圆圈消失了。

我的第二次尝试是在脚本中定义大小：

$(".knob").knob({
    height: 75%;

但这也没有奏效。

你们能帮我解决这个问题吗？:)

谢谢！

4

4 回答 4

3 
   <html>
    <head id="Head1" runat="server">
        <title></title>
        <style>
            body {height:100%; width:100%; }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.knob.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var knobWidthHeight,
                    windowObj;
                // store reference to div obj
                windowObj = $(window);
                // if the window is higher than it is wider
                if(windowObj.height() > windowObj.width()){
                    // use 75% width
                    knobWidthHeight = Math.round(windowObj.width()*0.75);
                } else {
                // else if the window is wider than it is higher
                    // use 75% height
                    knobWidthHeight = Math.round(windowObj.height()*0.75);
                }
                // change the data-width and data-height attributes of the input to either 75%
                // of the width or 75% of the height
                $('#knob').attr('data-width',knobWidthHeight).attr('data-height',knobWidthHeight);

                // draw the nob NOTE: must be called after the attributes are set.
                $(function() {

                    $("#knob").knob({
                        draw : function () {}
                    });

                });
            });
        </script>
    </head>
    <body>
        <!-- knob has to be an input | set default data-width and height, the jquery above will reset them before the knob is loaded
        knob width and height must always be the same as each other -->
        <input id="knob" data-width="500" data-height="500" data-displayInput=false value="35">
    </body>
</html>

有关如何使用旋钮库的更多示例，请转到他们的演示页面并查看源代码。它将向您展示更改旋钮的各种不同方法。

于 2013-07-06T18:36:48.223 回答
0

我不认为 jQuery Knob 接受百分比作为值。尝试获取窗口的宽度和高度并计算其中的 75%，然后设置该像素值。就像是：

var windowObj = $(window);
var newHeight = Math.round((windowObj.height() / 4) * 3);
var newWidth = Math.round((windowObj.width() / 4) * 3);

newHeight现在只需用和newWidth像素值替换百分比值。

于 2013-07-06T16:22:30.860 回答
0

我也遇到了这个问题，我用一些 javascript 代码提供了一个更简单的解决方案。

首先，要针对某些分辨率（作为响应式设计），您必须将此代码添加到 js 文件中，例如 custom.js：

$(window).bind("resize", widthFunctions);

    function widthFunctions( e ) {
       var winHeight = $(window).height();
       var winWidth = $(window).width();

       if (winWidth < 980 && winWidth > 750) {

          $(".pinkCircle").knob({
         'min':0,
         'max':10000,
         'readOnly': true,
         'width': ... ,
         'height': ... ,
         'fgColor': '#e42b75',
         'dynamicDraw': true,
         'thickness': 0.2,
         'tickColorizeValues': true,
         'skin':'tron'
          })

       }
    }

winWidth 是您想要定位的宽度，就像您对媒体查询所做的那样。然后你可以添加你想要的设置。请注意，此类 (.pinkCircle) 已添加到<input>.

然后，您必须使用媒体查询添加与使用 js 添加的宽度相同的宽度，例如：

@media only screen and (max-width: 768px) {
    .divStats > div[onTablet="span4"] {
        width: ... ; // Here you could add a width for 3 circles display inline for example
    }
}

我正在使用引导程序，所以我在这里添加了 span4 的宽度，即“31.914893617021278%”，注意这只是一个示例，所有宽度和代码都可能与你的不同，但这都是从宽度开始的。

问候。

于 2013-09-02T13:36:23.590 回答
0

您可以在输入上使用数据宽度。 这是响应式实现的第一次提交。

于 2017-02-10T11:10:59.400 回答