标签归档:jquery plugin

ToFishes系列jQuery插件之 – jCover元素界面锁定(遮罩)

为啥要写这么个插件,源于jQuery blockUI插件,因为效果基本和这个插件是一样的(我在造轮子。。。)。但是更纯粹倾向于遮罩功能。

但是代码却精简了很多,并且做了优化,减少dom操作。

PS: 以前也习惯用iframe做IE6遮盖select元素,以为这时候select是会被透明遮盖的,现在才发现iframe遮盖select也是看不见的,相当于设置了visibility: hidden; 所以本插件没有费工夫去写iframe遮盖,iframe远没有css隐藏来的方便。

应用举例:1、先引入jquery及本插件;2、全屏遮罩:$.jCover(); 元素遮罩:$(“#jCover”).jCover();

点击查看Demo并下载

ToFishes系列jQuery插件之Element Flash – 元素闪烁

先给代码:

/**
 * @author ToFishes
 * 根据指定css属性闪烁的插件
 */
;(function($){
	$.fn.jFlash = function(c){
		c = $.extend({
			css: {}, //闪烁变化的css属性
			time: 100, //interval time 闪烁间隔时间
			count: 20, //闪烁的次数
			status: "jFlashing", //表示闪烁中
			onStop: function(t){} //闪烁完的回调函数,传入闪烁对象的引用
		}, c);

		return this.each(function(){
			var _t = $(this), init = {};
			/* 如果正在闪烁中,则回避再次调用闪烁 */
			if(_t.hasClass(c.status))
				return;

			for(var n in c.css) {
				init[n] = _t.css(n);
			};

			var params = {
				"0": init,
				"1": c.css
			},  flashId, count = c.count % 2 == 0 ? c.count : c.count + 1; //count保证为偶,这样最后的css才是最初的状态。

			function flash(){
				_t.css(params[count % 2]).addClass(c.status);
				count--;
				if(count < 0) {
					c.onStop(_t.removeClass(c.status));
					flashId && clearTimeout(flashId);
					return;
				};
				flashId = setTimeout(flash, c.time);
			};
			flash();
		});
	};
})(jQuery);

距离上午发布的代码没多久,现在是晚间10点,偶对代码又做了下修改,但是同时偶觉得上面的代码可以算是另外一种解决方案,因为闪烁不会被中途打断。现在修改后,也只是改了下闪烁中途可以打断并执行另外一段闪烁而已。

同时,做了个Demo页面,查看Demo点击这里 .

Ok,修改后的代码如下:

/**
 * @author ToFishes
 * @version 1.0
 * 根据指定css属性闪烁的插件
 */
;(function($){
    $.fn.jFlash = function(c){
        c = $.extend({
            css: {}, //闪烁变化的css属性
            time: 100, //interval time 闪烁间隔时间
            count: 20, //闪烁的次数
            status: "jFlashing", //表示闪烁中
            onStop: function(t){} //闪烁完的回调函数,传入闪烁对象的引用
        }, c);
 
        return this.each(function(){
            var _t = $(this), init = _t.data("initCss") || {};
            /* 如果正在闪烁中,则清除当前的,继续调用下一个闪烁 */
            if(_t.hasClass(c.status)) {
				_t.css(init);
                clearTimeout(_t.data("jFlashId") || 0);
			};

	        for(var n in c.css) {
                init[n] = _t.css(n);
            };
			_t.data("initCss", init);
 
            var params = {
                "0": init,
                "1": c.css
            },  flashId, count = c.count % 2 == 0 ? c.count : c.count + 1; //count保证为偶,这样最后的css才是最初的状态。
 
            function flash(){
                _t.css(params[count % 2]).addClass(c.status);
                count--;
                if(count < 0) {
                    c.onStop(_t.removeClass(c.status));
                    return;
                };
                flashId = setTimeout(flash, c.time);
				_t.data("jFlashId", flashId);
            };
            flash();
        });
    };
})(jQuery);

ToFishes系列jQuery插件 – jCuteForm美化的表单插件

jCuteForm插件,针对单选、多选、下拉框的一个替代美化插件。jCuteForm实际上是3个插件的组合,可以分别拿出来使用,它们是: jRadio, jCheckbox, jSelect。

而且不同于其他一些美化插件的工作原理,是对现有的<radio />,<select />等标签进行拆解,内容再封装,生成div模拟的方式,外观定制有些繁琐,而且比较难调控。本插件跳过这几步,依旧遵循ToFishes系列插件结构,表现,行为相分离的原则,结构自定(提供的Demo使用em,a等标签,只是需要一些class等给插件提供参考点,即使是这些class也可以自定),外观由前端人员根据结构自定预先写好,之后调用jCuteForm实现功能。

jCuteForm表单美化插件预览图

Continue reading ToFishes系列jQuery插件 – jCuteForm美化的表单插件

ToFishes系列jQuery插件 – jFocus淡入淡出自动图片切换的幻灯片

这个插件相对来说灵活性一般,而且js对html有些地方侵入操作,工作中针对UI效果图开发的。

看下截图:

jFocus插件截图

因为灵活性不高,除非对css比较熟悉,所以这里放出完整的html结构,css样式定义。

Continue reading ToFishes系列jQuery插件 – jFocus淡入淡出自动图片切换的幻灯片

ToFishes系列jQuery插件 – jTabView选项卡式浏览

网上有不少jQuery的选项卡插件,官方的tab貌似也不错,但用来用去哪有自己写的顺手。

该插件实际使用于公司旗下网站 – 易扑网(eapoo.com), 在网站开发过程中编写,同时扩展了不少功能。

本插件遵循 结构、表现、行为 相分离的原则,所以,html结构与css样式(决定UI)请自己决定。

jTabView选项卡式浏览插件截图

Continue reading ToFishes系列jQuery插件 – jTabView选项卡式浏览