一款jQuery的手机关键字选择插件,点击输入框时,在页面底部出现多个预设的关键字,可以点击选中关键词,重复点击同一个关键词则取消选择,也可以点击“重置”按钮来清空所有选择,点击“确定”后,所有选中关键词出现输入框下面。
页面的head部分,需引入关键词样式文件,简单设置演示样式,代码如下:
<link type="text/css" rel="stylesheet" href="css/keyword.css">
<style type="text/css">
#keyword{
line-height: 40px;
border: 1px solid #b5b5b5;
padding-left: 10px;
}
#showKeyword{
padding: 10px;
line-height: 30px;
}
</style>
页面的body部分,需设置好关键词的显示容器,代码如下:
<div id="wrap">
<div id="keyword">请选择关键词</div>
<div id="showKeyword"></div>
</div>
页面的底部,需引入jQuery库和关键词插件,并启用插件设置好相关参数,代码如下:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/keyword.js"></script>
<script type="text/javascript">
var dataArr=[
"IT互联网",
"金融",
"房产安居",
"企业服务",
"教育",
"法务",
"策划",
"影视歌曲戏剧",
"咨询服务",
"电子元件",
"英语小语种",
"财务会计",
"体育运动"
];
$("#keyword").keyword({
"data":dataArr,
"wrapId":"wrap",
"afterClick":function(ret){
$("#showKeyword").html(ret.join(","))
}
});
$(document).ready(function(){
$("#wrap").height(document.documentElement.clientHeight+"px");
})
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791