multiSteps 基于Jquery的多步骤滑动切换插件

插图:在支持Html5浏览器下观看会有更加体验
其中IE9以下版本使用滤镜模拟了一个阴影,删掉此处内容,IE下运行会更加平滑(至少我的老爷机运行更平滑了。)
第一步插图:
启动函数需要返回值,在这个启动函数里面你可以为所欲为,但是在你坏事做完之后必须返回一个值,
被发现,那你就得停下来等待处理结果,那么就返回false,无法继续执行,
没有被发现那就赶紧的离开这里,返回true,继续执行到下一步!

第二步插图:跳出的提示是第一步执行完毕之后的回调函数

回调函数没有返回值,事实上,执行回调函数的时候已经脱离插件,你在这里可以做任何你想做的事!

第三步执行完成:

Demo中另一页面演示更多层调用。
插件说明:
调用方式 $('obj').multiSteps({options});
支持回调函数,支持启动函数(开始滑动之前)
可以设置的参数列表:


代码如下:

    { // Global defaults
showOn: 'click', // 'click' or 'mouseOn'
showAnim: 'leftRight', // 暂时定义等待扩展,未使用
slidefor: 'next',
showSpeed: 1000, //滑动速度,越小越快
beforeSlide: null, //进行滑动之前执行的函数
callback: null //callback
};

调用方式你可以单独对每个按钮调用:


代码如下:

$("#step_one").multiSteps({beforeSlide:_beforeSlide,callback:_callback});
$(".prevStep").multiSteps({slidefor:'prev'});
$("#step_two").multiSteps({callback:function(){alert("第二步执行完成")}});

也可以用这种方式调用:$(".classs:not(.lastStep)").multiSteps();
已知的插件bug:
因时间仓促,插件的上一步操作,只进行了简单的可逆操作,
在宽度自适应的时候会存在问题:(上一步操作存在此问题)
当前步骤的前(后)两步在页面放大之后会出现在视野中,需要注意。
解决方法:
_getSteps中增加返回值oldstep(当前步骤的前(后)两步)
然后在_styleSteps中的left或right定位设置为一个不可见位置即可。
可等待我发布下一版本修订或者自己修改,修改后请告知,谢谢
完整演示Demo下载
完整插件代码以及部分注释:


代码如下:

/** * @Version:1.0.0
* @date : 2011-07-20
* @Email : Ethan.zhu83@gmail.com
* @QQ : 12377166
* @Name :multiSteps(多步骤滑动切换)
*
插件原型:http://www.groupon.com/ 首页的注册功能,她的功能(最多支持3步,不具有通用性)
插件参考了ui中日历的编写思路
因时间仓促,插件的上一步操作,只进行了简单的可逆操作,
在宽度自适应的时候会存在问题:(上一步操作存在此问题)
当前步骤的前(后)两步在页面放大之后会出现在视野中,需要注意。
解决:
getSteps中增加返回值oldstep(当前步骤的前(后)两步)
然后在styleSteps中的left或right定位设置为一个不可见位置即可。
可等待下一版本修订或者自己修改,修改后请告知,谢谢!
**/
(function($,undefined){
var PROP_NAME = 'multiSteps';
function MultiSteps(){
this.debug = false; // Change this to true to start debugging
this._position = '.main-wrap';//滑动的定位对象
this._formSteps = '.form_step';//滑动的对象组
this._currentStep = 1; //在改变窗口大小的时候用来获取当前显示位置
this._offset = 20; //左右划出内容显示的大小
this.regional = []; // 这里可以增加另外的可配置信息
this._defaults = { // Global defaults
showOn: 'click', // 'focus' or 'mouseOn'
showAnim: 'leftRight', // 暂时定义等待扩展,未使用
slidefor: 'next',
showSpeed: 1000, //滑动速度,越小越快
beforeSlide: null, //进行滑动之前执行的函数
callback: null //callback
};
$.extend(this._defaults, this.regional['']);
};
$.extend(MultiSteps.prototype, {
markerClassName: 'hasMultiSteps',
/* Debug logging (if enabled). */
log: function () {
if (this.debug)
console.log.apply('', arguments);
},
/* Override the default settings for all instances of the MultiSteps.
@param settings object - the new settings to use as defaults (anonymous object)
@return the manager object */
setDefaults: function(settings) {
extendRemove(this._defaults, settings || {});
return this;
},
/* Attach the date picker to a jQuery selection.
@param target element - the target input field or division or span
@param settings object - the new settings to use for this date picker instance (anonymous) */
_attachMultiSteps: function(target, settings) {
//alert("_attachMultiSteps");
var inlineSettings = null;
for (var attrName in this._defaults) {
var attrValue = target.getAttribute('date:' + attrName);
if (attrValue) {
inlineSettings = inlineSettings || {};
try {
inlineSettings[attrName] = eval(attrValue);
} catch (err) {
inlineSettings[attrName] = attrValue;
}
}
}
//var nodeName = target.nodeName.toLowerCase();
//var inline = (nodeName == 'div' || nodeName == 'span');
if (!target.id) {
this.uuid += 1;
target.id = 'ms' + this.uuid;
}
var inst = this._newInst($(target));
inst.settings = $.extend({}, settings || {}, inlineSettings || {});
this._connectMultiSteps(target,inst);
},
/* Attach the date picker to an input field. */
_connectMultiSteps: function(target, inst) {
var target = $(target);
inst.append = $([]);
inst.trigger = $([]);
if (target.hasClass(this.markerClassName))
return;
this._attachments(target, inst);
target.addClass(this.markerClassName);
$.data(target, PROP_NAME, inst);
},
/* Make attachments based on settings. */
_attachments: function(target, inst) {
//alert("_attachments");
if (inst.trigger)
inst.trigger.remove();
var showOn = this._get(inst, 'showOn');
var currentStep=$(target).parents(this._formSteps).index()+1;
if(currentStep==1)
this._styleSteps(target,false,currentStep);
//this._forward(target,showSpeed,step);
if (showOn == 'mouseOn'){
target.mouseover(function(){
$.multiSteps._showMultiSteps(target);
});
}
if (showOn == 'click') {
inst.trigger=target.click(function() {
$.multiSteps._showMultiSteps(target);
return false;
});
}
},
_showMultiSteps: function(target) {
var inst = $.multiSteps._getInst(target);
var showSpeed = this._get(inst, 'showSpeed');
var beforeSlide = this._get(inst, 'beforeSlide');
var slidefor = this._get(inst, 'slidefor');
var step = $(target).parents(this._formSteps).index()
var stepSize =$(this._formSteps).size();
//extendRemove(inst.settings, (beforeSlide ? beforeSlide.apply() : {}));
if((beforeSlide ? beforeSlide.apply() : {})){
if(slidefor=='next'){
var step = step+1+1;
$.multiSteps._currentStep++;
if(step-1!=stepSize)
this._forward(target,showSpeed,step);
}
if(slidefor=='prev'){
//alert(step)
$.multiSteps._currentStep--;
this._forward(target,showSpeed,step);
}
}
},
_forward: function(target,animSpeed,step) {
this._styleSteps( target,animSpeed,step);
},
_styleSteps: function(target,animSpeed,step) {
var inst = $.multiSteps._getInst(target);
//alert(inst);
this._currentStep = step
pos = this._getPositions();
var steps = this._getSteps(target,step);
var slidefor
if(inst!=null)
slidefor = $.multiSteps._get(inst,'slidefor');
if ( !animSpeed ) {
$( '.' + steps.prev ).css( { left: pos.left + 'px', opacity: 0.3 });
$( '.' + steps.curr ).css( { left: pos.center + 'px', opacity: 1 });
$( '.' + steps.next ).css( { left: pos.right + 'px', opacity: 0.3 });
} else {
$( '.' + steps.prev ).animate( { left: pos.left + 'px', opacity: 0.3 }, animSpeed );
$( '.' + steps.curr ).animate( { left: pos.center + 'px', opacity: 1 },
//{ duration: animSpeed, complete:$.multiSteps._callback(steps.curr,target,step)}//,
{ duration: animSpeed,
//specialEasing: '',
complete:function(){
$(this).stop();
if(!$.multiSteps.resizing){
if(step>1){
var callback = $.multiSteps._get(inst, 'callback');
extendRemove(inst.settings, (callback ? callback.apply() : {}));
}
}
$.multiSteps.resizing=false;
}
}
);
//
//alert(slidefor);
//if(slidefor=='next')
$( '.' + steps.next ).css( { left: pos.right + 'px', opacity: 0.3 });
/* else if(slidefor=='prev'){
alert(pos.right);
alert(steps.next);
alert(steps.curr);
$( '.' + steps.next ).animate( { left: pos.right + 'px', opacity: 0.3 },animSpeed);
}*/
}
},
_getSteps: function(target,step) {
var currentStep=step;
var stepSize =$(this._formSteps).size();
var curr_step = 'step_'+ currentStep;
var prev_step = ( currentStep == 1&& currentStep<(stepSize+1)) ? null : 'step_'+ (currentStep-1);
var next_step = ( currentStep == stepSize ) ? null : 'step_'+ (currentStep+1);
return {curr: curr_step, prev: prev_step, next: next_step };
},
_getPositions: function() {
var offset = this._offset;
var step_width = $(this._formSteps).width() / 2;
//var window_width = $( window ).width();
var window_width = $(this._position).width();
//alert(window_width)
var offLeft = -3 * step_width;
var leftPos = offset - step_width;
var centerPos = window_width / 2;
var rightPos = window_width - offset + step_width;
var offRight = rightPos + ( 3 * step_width );
return { offLeft: offLeft, left: leftPos, center: centerPos, right: rightPos, offRight: offRight };
},
_pageRedraw: function() {
//$.multiSteps.resizing = false;
//alert($.multiSteps._currentStep);
//alert(currentStep);
$.multiSteps._styleSteps(this,300,$.multiSteps._currentStep);
},
/* Create a new instance object. */
_newInst: function(target) {
var id = target[0].id.replace(/([^A-Za-z0-9_-])/g, '\\\\$1'); // escape jQuery meta chars
return {
id: id,
obj: target
};
},
/* Get a setting value, defaulting if necessary. */
_get: function(inst, name) {
return inst.settings[name] !== undefined ?
inst.settings[name] : this._defaults[name];
},
/* Retrieve the instance data for the target control.
@return object - the associated instance data
@throws error if a jQuery problem getting data */
_getInst: function(target) {
try {
return $.data(target, PROP_NAME);
}
catch (err) {
throw 'Missing instance data';
}
}
});
$( window ).resize( function() {
$.multiSteps.resizing = true;
//alert($.multiSteps.resizing);
if ( $.multiSteps.resizeTimer != null || $.multiSteps.resizeTimer =="undefined" ) {
window.clearTimeout( $.multiSteps.resizeTimer );
}
$.multiSteps.resizeTimer = window.setTimeout( $.multiSteps._pageRedraw, 300 );
});
/* jQuery extend now ignores nulls! */
function extendRemove(target, props) {
$.extend(target, props);
for (var name in props){
//alert(name);
if (props[name] == null || props[name] == undefined)
target[name] = props[name];
}
return target;
};
/* Determine whether an object is an array. */
function isArray(a) {
return (a && (($.browser.safari && typeof a == 'object' && a.length) ||
(a.constructor && a.constructor.toString().match(/\Array\(\)/))));
};
$.fn.multiSteps = function(options){
/* Verify an empty collection wasn't passed - Fixes #6976 */
if ( !this.length ) {
return this;
}
/* var otherArgs = Array.prototype.slice.call(arguments, 1);
//arguments函数对象是该对象代表正在执行的函数和调用它的函数的参数
//如果传入的是参数设置,则将这些内容拷贝到otherArgs数*/
return this.each(function() {
$.multiSteps._attachMultiSteps(this, options);
});
};
$.multiSteps = new MultiSteps(); // singleton instance
$.multiSteps.resizing = false;
$.multiSteps.resizeTimer = null;
$.multiSteps.uuid = new Date().getTime();
})(jQuery)

(0)

相关推荐

  • jQuery实现图片与文字描述左右滑动自动切换的方法

    本文实例讲述了jQuery实现图片与文字描述左右滑动自动切换的方法.分享给大家供大家参考.具体如下: 这里使用jQuery制作CSS左右图片无缝滚动自动切换的焦点图JS特效.一边飞出一边变淡的效果非常漂亮,带小按钮. 效果图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

  • 内容滑动切换效果jquery.hwSlide.js插件封装

    经过前两部分的讲解,我们大概知道内容滑动切换的基本开发思路和技巧,现在我们在第三部分将前面两部分的代码进行优化,封装成一个jQuery插件:jquery.hwSlide.js.开发者可以轻松创建各种图片轮播效果.焦点图效果.图文混排滑动效果. 下载源码 hwSlider具有以下特性: 多个参数定制,满足不同项目需求. 支持移动端触控滑动. 支持图文混排,支持各种html元素. 响应式自适应屏幕尺寸. 同一页面支持多个滑动切换. 轻量级的,压缩版不到4KB. 支持所有现代浏览器,支持

  • jQuery实现带幻灯的tab滑动切换风格菜单代码

    本文实例讲述了jQuery实现带幻灯的tab滑动切换风格菜单代码.分享给大家供大家参考.具体如下: 这是一款很不错的TAB滑动切换效果,jQuery带幻灯的tab滑动切换风格菜单导航条,点击上方的文字,下边就向左或向右滑动切换,动画效果的TAB选项卡. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-flash-style-tab-cha-menu-codes/ 具体代码如下: <!DOCTYPE html> <head&g

  • jQuery实现自动切换播放的经典滑动门效果

    本文实例讲述了jQuery实现自动切换播放的经典滑动门效果.分享给大家供大家参考.具体如下: 这是一个滑动门代码,从外观上看,简洁经典,似乎与平时见到的滑动门没什么区别,不过它有一个重要的功能与众不同,那就是会自动切换[播放]滑动门的内容,像腾讯QQ登录后弹出的每日要闻一样,如果你再加以美化,那么就更完美无暇了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-auto-cha-tab-style-codes/ 具体代码如下: <!

  • jQuery插件Slider Revolution实现响应动画滑动图片切换效果

    这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页:它内置幻灯.视频播放计时器,它拥有各种模式:自定义,自动响应,全屏:它有多种动画效果.3d效果...总之你想到的效果它都做到了,它的名字叫Slider Revolution. HTML Slider Revolution是一款基于jQuery的插件,使用它时需要先载入jQuery库文件,以及Slider Revolution依赖的css和js文件. <script src="js/jque

  • jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

    本文实例讲述了jQuery实现的Tab滑动选项卡及图片切换效果.分享给大家供大家参考.具体如下: 这里汇总了几个Tab,滑动门,选项卡,图片切换,在一个网页中实现了超多的常用效果,大家喜欢的滑动门,焦点图切换,标签选项卡以及文字轮番等都集中在了一起,无聊的功劳,忙的时候还顾不上写,另外还加入了圆角,都是参考以前学习的知识写的.期间使用了jquery-1.6.2.min.js框架库. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-n

  • jQuery实现TAB风格的全国省份城市滑动切换效果代码

    本文实例讲述了jQuery实现TAB风格的全国省份城市滑动切换效果代码.分享给大家供大家参考.具体如下: 这里演示jQuery实现的全国省市菜单,加入了选项卡风格,把全国城市按字母范围归类,鼠标移到某一分类的时候,滑动门展开显示所属的全国省分和城市.特别适合于分类信息网站使用.当然,在需要选择省市的时候,也是可以用的.仔细看了下,菜单里面的城市还比较全,你不用再手动添加城市了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tab

  • JQuery实现简单的图片滑动切换特效

    JQuery实现简单的图片滑动切换特效 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>t图片的滑动</title> <meta charset="utf-8" /> <style type="text/css" > *{ margin:0

  • jQuery控制元素显示、隐藏、切换、滑动的方法总结

    jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 复制代码 代码如下: $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); hide() 和 show() 都可以设置两个可选参数:speed 和 callba

  • jQuery实现类似滑动门切换效果的层切换

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

随机推荐