0

進行状況を表示するために jQuery Knob を使用しています (読み取り専用モード)。アプリが動的に使用されているレイアウト/デバイスのサイズに合わせて円のサイズを調整したい。

すでに使用しようとしましdata-width="75%"たが、円が消えます。

私の 2 番目の試みは、スクリプトでサイズを定義することでした。

$(".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

私もこの問題を抱えていたので、いくつかのJavaScriptコードを使用したより簡単なソリューションを用意しました。

まず、(レスポンシブ デザインとして) いくつかの解像度をターゲットにするには、次のコードを custom.js などの 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
    }
}

私はブートストラップを使用しているので、ここに「31.914893617021278%」である span4 の幅を追加します。これは単なる例であり、すべての幅とコードはあなたのものとは異なる可能性があることに注意してください。

ご挨拶。

于 2013-09-02T13:36:23.590 に答える