剣道スイッチの幅をどのように動的に設定しますか？

私は剣道モバイルスイッチを3文字以上のカスタムラベルで使用しようとしていますが、スイッチはその幅を同じにしてテキストを切り捨てます。私の人生にとって、私はそれをテキスト幅に対してダイナミックにする方法を理解できません。私は.km-switch、nadaを上書きしようとしました。「Declarative Custom Label」スイッチに注目してください。剣道スイッチの幅をどのように動的に設定しますか？

Plunkerデモ：あなたはスイッチのラッパーの幅を調整し、トグル機能は、スイッチを動かすように、新しいサイズを認識するためにスイッチのrefresh functionを呼び出す必要があり、これが機能するためにhttp://plnkr.co/edit/5yjjY3uQE0QxPYzAuMB7?p=preview

<!DOCTYPE html> 
<html ng-app="MyApp"> 

    <head> 
    <link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.common-bootstrap.core.min.css" /> 
    <link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.bootstrap.min.css" /> 
    <link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.bootstrap.mobile.min.css" /> 

    <script data-require="[email protected]" data-semver="1.9.1" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script data-require="[email protected]" data-semver="1.2.16" src="http://code.angularjs.org/1.2.16/angular.js"></script> 
    <script src="//cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script> 
    <script src="angular-kendo.js"></script> 

    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <div ng-controller="MyCtrl"> 

     <div class="panel panel-primary"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Switch Labels</h3> 
     </div> 
     <div class="panel-body"> 
      Default Label: 
      <input kendo-mobile-switch type="checkbox" /> 
      <br /> 

      Declaritive Custom Label: 
      <input kendo-mobile-switch type="checkbox" k-on-label="'GOOD'" k-off-label="'BADDEREST'" /> 
      <br /> 

      k-options Custom Label: 
      <input kendo-mobile-switch type="checkbox" k-options="options" /> 
     </div> 
     </div> 

     <div class="panel panel-info"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Switch Bindings</h3> 
     </div> 
     <div class="panel-body"> 
      ng-model binding: 
      <input kendo-mobile-switch type="checkbox" ng-model="myValue1" /> 
      value: {{myValue1}} 
      <br /> 

      with on-change: 
      <input kendo-mobile-switch type="checkbox" ng-model="myValue2" k-on-change="change(kendoEvent)"/> 
      value: {{myValue2}} 
     </div> 
     </div> 


    </div> 
    </body> 

</html>

出典

2017-07-26 Jason Sheridan

正しい位置。

また、スイッチのバックグラウンドの位置を調整する必要があります。

あなたの例を更新し、そのトリックを行うボタンを追加しました。

：関数は「特大」はスイッチのウィジェットに実際の必要性とセットこのスペースをラベルとリフレッシュ機能を呼び出すことスペースを計算

http://plnkr.co/edit/ZCmpGgKi3W6LQiP3X1YW?p=preview

：あなたは多分、私が追加された追加のスペースを調整する必要があります

$("input[data-role=switch]").each(function() { 
     var kSwitch = $(this).getKendoMobileSwitch(); 
     if (!kSwitch) return; 

     // calculate labels' width 
     var tmpOn = $("<span>").hide().css({"text-transform": "uppercase"}).html(kSwitch.options.onLabel); 
     var tmpOff = $("<span>").hide().css({"text-transform": "uppercase"}).html(kSwitch.options.offLabel); 
     tmpOn.insertAfter(kSwitch.wrapper); 
     tmpOff.insertAfter(kSwitch.wrapper); 
     var wOn  = tmpOn.width(); 
     var wOff = tmpOff.width(); 
     var max  = Math.max(wOn, wOff) + 8; 
     var width = max + kSwitch.handle[0].offsetWidth + 2; 
     tmpOn.remove(); 
     tmpOff.remove(); 

     kSwitch.wrapper.find(".km-switch-label-on").css({width: max + "px", left: "-" + max + "px"}); 
     kSwitch.wrapper.find(".km-switch-label-off").css({width: max + "px"}); 
     kSwitch.wrapper.css({width: width + "px"}); 
     kSwitch.wrapper.find(".km-switch-background").css({"background-position": width + "px 0"}); 

     kSwitch.refresh(); 
    });

出典

2018-01-12 13:32:48 Rico

剣道スイッチの幅をどのように動的に設定しますか？

答えて

関連する問題