下拉控件jQuery插件
2024-10-19 09:37:53
由于后端开发需要一个下拉控件，能输入，能选择，于是自己写了一个
;(function($,window,document,undefined){
function Select(el,opt){
this.$el = el;
this.default={
title:'选择类别',
showTitle:true,
wth:'',// ''100%，half:50%,third:30%
require:true,
items:[{
id:"01",
contxt:'项目一'
},{
id:"02",
contxt:'项目二'
}]
}
this.settings = $.extend({},this.default,opt);
}
Select.prototype={
init:function(){
var that = this,
$html=$('<div class="title"><span class="eis-require">*</span>\n'+
that.settings.title+
'</div>\n'+
'<div class="es-input-wrapper">\n' +
' <div class="input-box">\n' +
' <input type="text" value="" placeholder="'+that.settings.title+'">\n'+
'<i class="fa fa-angle-down"></i>\n' +
'<ul class="eis-new-form-dropmenu"></ul>'+
' </div>\n' +
' </div>');
that.$el.append($html);
var $list=that.$el.find('.eis-new-form-dropmenu'),
$require = that.$el.find('.eis-require'),
$input = that.$el.find('input[type="text"]'),
$title=that.$el.find('.title'),
$inputWrapper=that.$el.find('.es-input-wrapper');
//判断显示标题
if(that.settings.showTitle===false){
$title.remove()
$inputWrapper.css({'margin-left':"0"})
}else{
$inputWrapper.css({'margin-left':"100"})
}
if(!that.$el.hasClass('es-form-group')){
that.$el.addClass('es-form-group')
}
switch (that.settings.wth){
case '':
break
case 'half':
that.$el.addClass('half');
break;
case 'third':
that.$el.addClass('third')
}
// 添加下拉列表
var $listHtml = '';
if(that.settings.items && that.settings.items.length>0){
for(var i = 0;i<that.settings.items.length;i++){
$listHtml+='<li class="eis-dropmenu-item">'+that.settings.items[i]['contxt']+'</li>'
}
$list.html($listHtml)
}
//判断显示必填
if(that.settings.require){
$require.text('*')
}else(
$require.text('')
)
//下拉展示收缩
var $dropToggle = that.$el.find('.fa');
$dropToggle.on('click',function(e){
if(e){
e.stopPropagation();
}else{
window.event.cancelBubble=true
}
if($(this).get(0).style['transform']==''){
$(this).get(0).style['transform']='translate(0,-50%) rotate(180deg)';
}else if( $(this).get(0).style['transform']==='translate(0px, -50%) rotate(180deg)'){
$(this).get(0).style['transform']='translate(0,-50%) rotate(0deg)';
}else{
$(this).get(0).style['transform']='translate(0,-50%) rotate(180deg)'
}
$list.slideToggle()
})
var $listItem = $list.find('.eis-dropmenu-item');
$listItem.each(function(){
$(this).on('click',function(e){
if(e){
e.stopPropagation();
}else{
window.event.cancelBubble=true
}
$input.val('');
$input.val($(this).text())
$list.slideToggle()
})
})
$(document).on('click',function(){
$list.hide();
})
}
}
$.fn.extend({
select:function(opt){
return this.each(function(){
new Select($(this),opt).init()
})
}
})
})(jQuery,window,document)
外部调用
$(function(){
$('#select').select({
title:'联系人',//标题
wth:'half',// ''100%，half:50%,third:30%
require:true,//true,显示红*，false不显示
showTitle:false,//是否显示标题
//item数据
items:[{
id:"01",
contxt:'项目一'
},{
id:"02",
contxt:'项目二'
}]
})
})
最新文章
- python3安装lxml（windows）
- Spotlight的连接设置
- 深入Java事务的原理与应用
- css页面布局基础
- 剑指Offer:面试题28——字符串的排列(java实现)（待序）
- 远程连接Kali Linux使用PuTTY实现SSH远程连接
- ZeroMQ 在 centos 6.5_x86_64 下的安装
- Linux启动遇到的问题
- (转)PHP的ereg()与eregi()的不同及相同点。对比
- 关于cocopads 不能正确安装的问题
- opencart配置United States Postal Service快递
- Mahout源码分析：并行化FP-Growth算法
- Spring Boot学习总结二
- Linux-Kconfig总结与分析
- logback日志配置
- process.argv
- AngularJS简单例子
- 软工作业PSP与单元测试训练：java语言判断电子邮箱格式
- 【Linux基础】VI 编辑器基本使用方法
- 项目管理软件 GanttProject 节日表