1、新建html文档。
2、书写hmtl代码。
3、书写css代码。
div.sp_result_area div.sp_pagination li { text-align: center; display: inline; box-sizing: border-box; }
div.sp_result_area div.sp_pagination>ul>li>a { margin: 0; /* border: 1px solid #ddd; */
border-radius: 0; padding: 0; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; background-color: white; float: left; text-decoration: none; border: 0; box-sizing: content-box; color: #666666; font-size: 20px; height: 26px; line-height: 26px; -webkit-transition: all .5s cubic-bezier(.175, .885, .32, 1); transition: all .5s cubic-bezier(.175, .885, .32, 1); }
div.sp_result_area div.sp_pagination li.csFirstPage a, div.sp_result_area div.sp_pagination li.csPreviousPage a, div.sp_result_area div.sp_pagination li.csNextPage a, div.sp_result_area div.sp_pagination li.csLastPage a { width: 30px; }
div.sp_result_area div.sp_pagination li.csFirstPage a { border-left: 0; border-bottom-left-radius: 2px; }
div.sp_result_area div.sp_pagination li.csLastPage a { border-right: 0; border-bottom-right-radius: 2px; }
div.sp_result_area div.sp_pagination>ul>li>a:hover { color: #000000; background-color: #E8E8E8; }
div.sp_result_area div.sp_pagination>ul>li.disabled>a { color: #DDDDDD; cursor: default; }
div.sp_result_area div.sp_pagination>ul>li.disabled>a:hover { color: #DDDDDD; background-color: white; }
div.sp_result_area div.sp_pagination>ul>li.pageInfoBox>a { width: 178px; text-align: center; /* padding-left: 4px;
padding-right: 4px; */
color: #666666; font-size: 14px; }
4、书写并添加js代码。
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//表单声明元素
<input type="text" id="selectPage" >
//定义数组，在服务端返回的数据也以该格式返回：Array[{Object},{...}]
var tag_data = [
{id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'},
{id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士'},
{id:3 ,name:'Detroit Pistons',desc:'底特律活塞'},
{id:4 ,name:'Indiana Pacers',desc:'印第安纳步行者'}
];
//showField：设置下拉列表中显示文本的列
//keyField：设置下拉列表项目中项目的KEY值，用于提交表单
//data：数据源，可以是JSON数据格式，也可以是URL
$('#selectPage').selectPage({
showField : 'desc',
keyField : 'id',
data : tag_data
});
//获得选中项目的文本内容
$('#func1').click(function(){
alert($('#selectPage').selectPageText());
});
//清除所有选中的项目
$('#func2').click(function(){
$('#selectPage').selectPageClear();
});
//动态修改选中项目
$('#func3').click(function(){
$('#selectPage').val('20');
$('#selectPage').selectPageRefresh();
});
//设置插件禁用 / 启用
$('#funcDisabled').click(function(){
if($('#selectPage').selectPageDisabled())//判断当前状态
$('#selectPage').selectPageDisabled(false);
else
$('#selectPage').selectPageDisabled(true);
});
]]>
</script>
5、代码整体结构。
6、查看效果。
