新普京网站-澳门新普京 > 新普京网站 > jquery插件开发之实现google

jquery插件开发之实现google

2019/12/30 04:02
  • '+ v.name+'

'+name+'x

复制代码 代码如下:; { /* * 基于jQuery实现近似谷歌(Google卡塔尔(قطر‎+圈子选用作用插件@Mr.Think */ $.fn.iChoose = function { var SELF=this; var iset = $.extend({}, $.fn.iChoose.defaults, options); var _h,pull=null; var main=$; var chose=$; var input=$; var tips=$; var cls=iset.selCls; var ids=$; var _l=iset.limit; //若无列表数据则中断 if{return false} //开头化下拉列表 var tpl='

  • 当已选换行时 -- var len=pull.find.size{ len=pull.find; } if{ pull.height{ this.hide(State of Qatar; } }else{ pull.height; } pull.css('top',chose.outerHeight; }, match:function{ //过滤选取 - 拼音选择须插件扶持 var visible=pull.find; visible.each{ var name=$.attr; name.match!=null ? $ : $; if==0 && $.size{ pull.find.before } this.upstyle; }, blur:function{ //非选取区域点击掩瞒 pull.find.each{ var name=$; if{ Action.choose; input.val; } } Action.init(卡塔尔(قطر‎; //键盘调整 - 绑定输入表单 $.on({ //键盘弹起 'keyup change':function(卡塔尔国{ var val= $.trim; Action.match; }, //失去主题 'blur':function(卡塔尔{ var val= $.trim; Action.blur; }, //键盘按下 -- 捕获键盘值,以实践相应事件 /* 8 - delete; 27 - esc; 38 - up; 40 - down; 9 - tab; 13 - enter */ 'keydown':function{ switch { case 8: if==''卡塔尔{ e.preventDefault(State of Qatar; var last=chose.find('.'+iset.removeEl+':last'卡塔尔; if{ Action.undock; } } break; case 27: e.preventDefault; break; case 38: e.preventDefault; break; case 40: e.preventDefault(卡塔尔; Action.move break; case 9: case 13: e.preventDefault(卡塔尔(قطر‎; Action.choose; break; default: $.noop; //点击非当前区域隐敝弹出层 main.click{ e.stopPropagation.click{ Action.hide; } $.fn.iChoose.defaults = { /* data:传入值,能够实时ajax传上,演示中是json值,具体魄式可参看mod.udatas.js中的$.map limit:每趟展现的条数,别的滚动突显 choMain:载入区域id pullCls:弹出列表的class choCls:已采摘列表的外围class selItemCls:已采撷的单个成分class removeEl:删除元素的class selCls:列表高亮的class inputWCls:input的class tips:暗中同意提示值成分钩子 noResCls:列表中无结果时的cls chsIds:已接收列表的id值,传给后端用的。 */ data:UDatas, limit:5, choMain:'#iChooseMain', pullCls:'icm-list', choCls:'.icm-box', selItemCls:'icm-item', removeEl:'icm-delete', selCls:'selected', inputWCls:'icm-input-w', tips:'.icm-cur-txt', noResCls:'hook_noresult', chsIds:'#iChooseIds' }});

'卡塔尔国; input.focus.removeClass; //重临选中列表id ids.val : ids.val; pull.find('li.hook_visible:first'卡塔尔(قطر‎.addClass.removeClass; }, undock:function{ //删除已选 var mid=el.attr; var idsArr=ids.val; input.focus.remove(卡塔尔国; idsArr=$.grep{ return v != mid; }卡塔尔国; ids.val; pull.find.show(卡塔尔(قطر‎.addClass; this.upstyle{ //突显列表 pull.slideDown{Action.match; pull.find('li.hook_visible:first'卡塔尔国.addClass.removeClass; tips.hide(卡塔尔; input.addClass; }, hide:function(卡塔尔国{ //隐敝列表 pull.slideUp; tips.show(卡塔尔; input.removeClass; }, upstyle:function{ //更新下拉列表样式

'; if{ main.append; } pull=$('.'+iset.pullCls,main); _h=pull.find.outerHeight; pull.width; //操作函数 var Action={ init:function(卡塔尔(قطر‎{ //列表鼠标划过 pull.delegate('li.hook_visible','mouseover',function.addClass.removeClass; //选取列表 pull.delegate('li.hook_visible','click',function(卡塔尔{ Action.choose; //点击弹出列表 chose.click{ Action.show; //移除已选择chose.delegate('.'+iset.removeEl,'click',function(State of Qatar{ Action.undock; }, move: function { //上下移动 - 上::str=up | 下::step=down; var index; var item=pull.find.filter; var cur=item.filter==0 ? index=-1 : index=item.index; item.eq(dir=='up' ? (index<1 ? 0 : index-1卡塔尔 : index+1卡塔尔国.addClass.removeClass; //移动时跟随滚动 if{ //下翻滚动 if{ pull.scrollTop; } //上翻滚动 if{ pull.scrollTop; } } }, choose:function{ //列表接纳 var mid=el.attr; var name=el.text(卡塔尔国; tips.before('

现实原理与调用不详述,可看代码注释及DEMO演示(演示中mod.udata.js里有三个汉字转拼音方法,它并非插件的一片段,但为插件提供了拼音找出的遵循)。

上一篇:js完成通用的Wechat分享组件示例,js完成通用的Wechat分享组件示例_底子知识_脚本之家 下一篇:用nodejs实现PHP的print_r函数代码