Question

我正在尝试使用不超过三个字符的自定义标签的Kendo移动开关，但是开关的宽度保持不变，切断了文字。对于我的生活，我无法弄清楚如何使它成为文本宽度的动态。我试过重写.km-switch，nada。请注意“声明式自定义标签”开关。

Plunker演示：http://plnkr.co/edit/5yjjY3uQE0QxPYzAuMB7?p=preview

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

  <head>
    <link data-require="bootstrap-css@3.1.1" 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="jquery@1.9.1" data-semver="1.9.1" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script data-require="angular.js@1.2.16" 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>

Answer 1

为此，您必须调整开关包装的宽度，并调用refresh function以使开关识别新的尺寸，以便切换功能将开关移动到正确的位置。 / p>

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

我更新了你的例子并包含了一个可以解决问题的按钮。您可能需要调整我添加的额外空间：

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

该函数计算＆＃34;过大的空间＆＃34;标记实际需要并将此空间设置为切换小部件并调用刷新功能：

    $("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();
    });

如何将剑道开关宽度设置为动态？

1 个答案: