jquery mobile怎么设置slider滑动开关颜色形状
时间: 2023-11-18 10:19:36 浏览: 74
您可以通过设置`data-track-theme`和`data-thumb-theme`属性来自定义jQuery Mobile中slider的颜色和形状。
`data-track-theme`属性用于设置滑动条轨道的颜色,它接受任何jQuery Mobile主题中的颜色类名,例如:`a`、`b`、`c`、`d`等。
`data-thumb-theme`属性用于设置滑块的颜色,也接受同样的类名。
以下是一个示例代码,演示如何设置slider滑动开关的颜色和形状:
```html
<div data-role="fieldcontain">
<label for="slider">Slider:</label>
<select name="slider" id="slider" data-role="slider"
data-track-theme="b" data-thumb-theme="a">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
```
在上面的示例中,`data-track-theme`属性的值设置为 `b`,`data-thumb-theme`属性的值设置为 `a`。这将使滑动条轨道的颜色为主题中的 `b` 类,滑块的颜色为主题中的 `a` 类。
您还可以使用CSS来进一步自定义slider的样式。例如,您可以使用以下CSS样式来设置slider滑块的形状:
```css
.ui-slider-switch .ui-slider-handle {
border-radius: 25px;
}
```
在上面的示例中,我们使用CSS设置了滑块的圆角为 `25px`。您可以根据需要自定义slider的样式。
阅读全文