Question

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

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

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

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

但这也没有用。

你能帮帮我解决这个问题吗？：）

谢谢！

Answer 1

   <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>

有关如何使用旋钮库的更多示例，请转到their demo page并查看来源。它将向您展示更改旋钮的各种不同方法。

Answer 2

我不认为jQuery Knob接受百分比作为值。尝试获取窗口的宽度和高度并计算75％，然后设置该像素值。类似的东西：

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

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

Answer 3

我也有这个问题，我带了一些更简单的解决方案和一些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
    }
}

我正在使用bootstrap，所以我在这里添加了span4的宽度，即'31 .914893617021278％'，请注意这只是一个例子，所有的宽度和代码可能与你的不同，但这都是宽度。

问候。

Answer 4

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

将jQuery旋钮大小动态调整为布局

4 个答案: