您如何将Kendo Switch宽度设置为动态？

我试图使用Kendo移动开关的自定义标签不只是三个字符，但交换机保持相同的宽度，切断文本。对于我的生活，我无法弄清楚如何让它对文本宽度具有动态性。我试过重写.km-switch，nada。注意“声明式自定义标签”开关。您如何将Kendo Switch宽度设置为动态？

Plunker演示：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

对于这个工作，你必须调整开关的包装的宽度，并调用refresh function用于识别新的尺寸，使开关切换功能的移动切换到正确的位置。

您还必须调整开关背景的位置。

我更新了你的例子，并且包含了一个可以实现这个技巧的按钮。你也许不得不调整额外的空间，我说：

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

您如何将Kendo Switch宽度设置为动态？

回答

相关问题