如何更改 jQuery 移动翻转开关大小

Question

我需要一个 jQuery 具有自定义宽度和高度的移动翻转开关。我设法通过将翻转开关包裹在 div 中并应用以下 CSS:

来改变它的大小

   #flipswitchWrapper .ui-flipswitch {
       position:absolute;
       width:400px;
       height:100px;
   }

   #flipswitchWrapper .ui-flipswitch-active {
       padding-left:0px;
   }

   #flipswitchWrapper .ui-flipswitch .ui-flipswitch-on,
   #flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on{
       width:98px;
       height:98px;
   }

   #flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
       padding-top:0px;
       margin-left:300px;
   }

但是文本位置不正确。在此处查看 jsfiddle：

https://jsfiddle.net/dinkoivanov/8czs4qzn/

我想我可能没有做正确的事。你能告诉我这在 jQuery 移动设备上是否可行吗？

Answer 1

如示例 here 您可能需要在 CSS

中介绍

自定义缩进
自定义宽度

because the length of custom labels differs from the length of the standard labels

您可以通过更正 CSS

中的缩进来定位文本

#flipswitchWrapper .ui-flipswitch .ui-flipswitch-on,
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on{
    width:98px;
    height:98px;
    text-indent: -20em;
}

#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
    padding-top:0px;
    margin-left:300px;
    text-indent: -18em;
}

更新：https://jsfiddle.net/8czs4qzn/1/

将文本放在中间（见下面的评论）：

#flipswitchWrapper .ui-flipswitch {
    position:absolute;
    width:400px;
    height:100px;
    line-height: 100px;
}
#flipswitchWrapper .ui-flipswitch-active {
    padding-left:0px;
}
#flipswitchWrapper .ui-flipswitch .ui-flipswitch-on, #flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
    width:98px;
    height:98px;
    text-indent: -20em;
}
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
    padding-top:0px;
    margin-left:300px;
    text-indent: -18em;
    line-height: inherit;
}

#flipswitchWrapper .ui-flipswitch-off {
    line-height: inherit;
}

标签垂直对齐：https://jsfiddle.net/8czs4qzn/3/

如何更改 jQuery 移动翻转开关大小

How to change jQuery Mobile flipswitch size

jquery-mobile

jquery-mobile-flipswitch