select下拉框转苹果IOS样式分段按钮jQuery插件

当前位置:主页 > jQuery库 > 按钮和图标 > select下拉框转苹果IOS样式分段按钮jQuery插件
select下拉框转苹果IOS样式分段按钮jQuery插件
分享:

    插件介绍

    Segment.js是一款能够将任何select元素转化为苹果IOS样式的分段按钮的jQuery插件。在苹果设备流行的今天,在你的网页中添加一些IOS样式的按钮,可以使你的页面显得更加时尚。

    浏览器兼容性

    浏览器兼容性
    时间:2015-05-12
    阅读:
简要教程

Segment.js是一款能够将任何select元素转化为苹果IOS样式的分段按钮的jQuery插件。在苹果设备流行的今天,在你的网页中添加一些IOS样式的按钮,可以使你的页面显得更加时尚。

使用方法

该IOS样式的分段按钮的使用方法非常简单。首先在页面中引入jQuery和segment.js以及segment.css文件。

<link rel="stylesheet" type="text/css" href="segment.css" />
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="segment.js"></script>               
              
HTML结构

该jQuery插件可以将页面中所有的select元素转换为IOS样式的分段按钮,它的基本HTML结构如下:

<select class="segment-select">
    <option value="1">None</option>
    <option value="2">First</option>
    <option value="3">Second</option>
</select>

<select class="segment-select">
    <option value="1">Yes</option>
    <option value="0">No</option>
</select>                
              
初始化插件

在页面加载完毕之后,可以通过下面的方法来初始化该IOS分段按钮插件。

<!--  Transform all select elements with the class of `segment-select` -->
<script type="text/javascript">
    jQuery(function ($){
         $(".segment-select").Segment();
    });
</script>