用jQuery做更好的组件 通用组件定义模式

这个模式的优势:
在jQuery对象和组件和实例之间可以互相保留引用。
代码清晰。
易于扩展。
可以摆脱一些复杂的机制,手工完成组件。
最后一点是最有意思的,如果按这个模式来做,构造函数和原型方法都可以自由控制。能够摆脱的东西就是一些继承的hack手段,甚至jQuery也不是必须的。
手工的总是最好的。
一个简陋DEMO


代码如下:

/*
* @by ambar_li
* @create 2010-11-30
* 标签选择,验证
*/
(function($){
var tagSelector = function(input,options){
var me = this;
var opt = me.opt = $.extend({
limit : 5
,tags : null
,delimiter : ','
}, options || {});
var $el = me.input = $(input);
var $tags = me.tags = $(opt.tags);
if(!$el.length || !$tags.length) return;
$tags.click(function(e){
e.preventDefault();
var tag = $(this).text();
me[me.has(tag)?'remove':'add'](tag);
});
};
tagSelector.prototype = {
add : function(tag){
if(tag){
var me = this, tags = me.get(), del = me.opt.delimiter;
tags.push(tag);
me.input.val( tags.join(del) );
}
return me;
}
,remove : function(tag){
var me = this, exist = function(v){ return v !=tag; };
me.input.val( $.grep(me.get(),exist) );
return me;
}
,cleanify : function(){
return this.remove();
}
,limit : function(){
var me = this, tags = me.cleanify().get()
,len = tags.length, max = me.opt.limit;
if(len>max){
me.input.val( tags.slice(0,max) );
}
return me;
}
,has : function(tag){
return $.inArray(tag,this.get()) > -1;
}
,get : function(){
var val = $.trim(this.input.val());
return val ? $.map( val.split(/[,,]+/), $.trim ) : [];
}
};
$.fn.tagSelector = function(options){
return this.each(function(){
$(this).data('tagSelector',new tagSelector(this,options));
});
};
})(jQuery);

最重要的是最后一段。
jQueryUI对比,有初始化检查:


代码如下:

this.each(function() {
var instance = $.data( this, name );
if ( instance ) {
instance.option( options || {} )._init();
} else {
$.data( this, name, new object( options, this ) );
}
});

两种调用方式


代码如下:

var $input = $('#tb_tags').tagSelector( { tags:'div.tag_group a:not(.btn_tag_more)'} );
var api = $input.data('tagSelector');
// var api = new tagSelector('#tb_tags',{ tags :'div.tag_group a:not(.btn_tag_more)' });

完整演示:

简易的标签选择

.tag_group a{margin:0 3px;}

标签:

最多5个,用逗号隔开

腐败休假蜜月电影读书蜜月更多

腐败休假蜜月腐败休假蜜月腐败休假蜜月腐败休假蜜月腐败休假蜜月腐败休假蜜月

/*
* @by ambar_li
* @create 2010-11-30
* 旅行页面标签选择,验证
*/

(function($){
var tagSelector = function(input,options){
var me = this;
var opt = me.opt = $.extend({
limit : 5
,tags : null
,delimiter : ','
}, options || {});
var $el = me.input = $(input);
var $tags = me.tags = $(opt.tags);

if(!$el.length || !$tags.length) return;

$tags.click(function(e){
e.preventDefault();
var tag = $(this).text();
me[me.has(tag)?'remove':'add'](tag);
});
};
tagSelector.prototype = {
add : function(tag){
if(tag){
var me = this, tags = me.get(), del = me.opt.delimiter;
tags.push(tag);
me.input.val( tags.join(del) );
}
return me;
}
,remove : function(tag){
var me = this, exist = function(v){ return v !=tag; };
me.input.val( $.grep(me.get(),exist) );
return me;
}
,cleanify : function(){
return this.remove();
}
,limit : function(){
var me = this, tags = me.cleanify().get()
,len = tags.length, max = me.opt.limit;
if(len>max){
me.input.val( tags.slice(0,max) );
}
return me;
}
,has : function(tag){
return $.inArray(tag,this.get()) > -1;
}
,get : function(){
var val = $.trim(this.input.val());
return val ? $.map( val.split(/[,,]+/), $.trim ) : [];
}
};

$.fn.tagSelector = function(options){
return this.each(function(){
$(this).data('tagSelector',new tagSelector(this,options));
});
};
})(jQuery);

$(function(){
var $input = $('#tb_tags').tagSelector( { tags:'div.tag_group a:not(.btn_tag_more)'} );
var api = $input.data('tagSelector');
// var api = new tagSelector('#tb_tags',{ tags :'div.tag_group a:not(.btn_tag_more)' });
});

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • 用jQuery做更好的组件 通用组件定义模式

    这个模式的优势: 在jQuery对象和组件和实例之间可以互相保留引用. 代码清晰. 易于扩展. 可以摆脱一些复杂的机制,手工完成组件. 最后一点是最有意思的,如果按这个模式来做,构造函数和原型方法都可以自由控制.能够摆脱的东西就是一些继承的hack手段,甚至jQuery也不是必须的. 手工的总是最好的. 一个简陋DEMO 复制代码 代码如下: /* * @by ambar_li * @create 2010-11-30 * 标签选择,验证 */ (function($){ var tagSele

  • 原生Javascript和jQuery做轮播图简单例子

    接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较. jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮

  • jQuery EasyUI基础教程之EasyUI常用组件(推荐)

    本文主要内容是介绍EasyUI的一些常用组件的使用,都是一些非常基础的知识,适合入门者学习,主要包括Base(基础).Layout(布局).菜单和按钮.表单.窗口.表格和树等的使用.要求完全掌握这些内容,学会查阅文档,了解开发基本思想.如果想进一步深入学习,可以直接去官网进行学习,查阅文档等http://www.jeasyui.com/. 一.简介 EasyUI是一种第三方组织开发的,开源的,功能强大的,基于jquery的插件库. 主要可以用于web的后台前端.jQuery EasyUI 提供易

  • 基于jQuery实现的美观星级评论打分组件代码

    本文实例讲述了基于jQuery实现的美观星级评论打分组件代码.分享给大家供大家参考,具体如下: 这款jquery星级评论打分组件,是通用打分组件,callBack打分后执行的回调,this.Index:获取当前选中值. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-rate-dfzj-codes/ 具体代码如下: <!DOCTYPE HTML> <html> <head> <meta charset

  • 如何在vue中更优雅的封装第三方组件详解

    目录 一.需求场景描述 二.关键技术点介绍 1.v-bind="$attrs" 2.v-on="$listeners" 三.封装el-image的代码示例 总结 一.需求场景描述 实际开发的时候,为了减少重复造轮子,提高工作效率,节省开发时间成本, 免不了会使用ui组件库,比如在web前端很受欢迎的element-ui. 但有的时候,我们需要在原组件的基础上做些改造,比如一个image组件, 我们需要统一在图片加载失败的时候展示的特定图,每次使用组件都加一遍, 麻烦

  • jQuery自定义组件(导入组件)

    1.组件js (function($){ //自定义去除字符串两边空白 String.prototype.trim=function(){ return this.replace(/(^\s*)|(\s*$)/g, ""); } //自定义导入组件 $.fn.customImport = function(methodOroptions,value){ if(typeof methodOroptions == "string"){//存在方法时,调用方法 retur

  • jQuery实现的上拉刷新功能组件示例

    本文实例讲述了jQuery实现的上拉刷新功能组件.分享给大家供大家参考,具体如下: 技术要点: 1.jQuery的插件写法 2.上拉刷新步骤分解 3.css样式 jQuery的插件写法: $.fn.pluginName = function() { return this.each(function () { fn(); }) }; 上拉刷新步骤分解: 上拉刷新可以分解成三个部分:一是开始(start),记录当前鼠标的位置:二是移动(move),根据下拉的位移响应不同的视图:三是结束(end),

  • 封装一个更易用的Dialog组件过程详解

    目录 场景 搭建环境 创建组件 创建调用组件的hook函数 Dialog的缓存.隐藏 隐藏 缓存 完整代码 总结 场景 在项目中,我们经常会遇到使用弹窗的场景,但有时组件库自带的弹窗不能满足我们的需求,需要我们自己封装,这时我们如何去自定义一个更加方便调用的弹窗? 搭建环境 首先我们需要搭建一个Vue3+ts的环境. 用vite的官方模板: yarn create vite demo-app --template vue-ts 进入并安装依赖 cd demo-app yarn 依赖安装完成后启动

  • Vue.js每天必学之组件与组件间的通信

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 使用组件 注册 之前说过,我们可以用 Vue.extend() 创建一个组件构造器: var MyComponent = Vue.extend({ // 选项... }) 要把这个构造器用作组件,需要用 `Vue.compone

  • vue 怎么创建组件及组件使用方法

    什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 我知道vue中核心就是组件,但是组件是什么呢?组件有什么用呢? 这里来说说怎么用组件?怎么样创建自己的组件?: 1)创建自己的组件 通过vue.extend("template");通过vue构造器去拓展一个模板,

随机推荐