fe / YOHOBUYPC · Commits

Go to a project

Authored by weiqingting
Commit eadec3b920bee5510b822a5c7406272401838a64 1 parent 1375e97a

重构slide切换

Inline Side-by-side
Showing 3 changed files with 205 additions and 155 deletions
var Slide = require('./yohoui/YH.slide');
var $ = require('yoho.jquery');
var $contain = $('.slide-list','.slide-accordion');
var $contain = $('.slide-list', '.slide-accordion');
var $item = $contain.find('li');
var $width = 650;
var slide;
function switchfun(to){
$item.each(function(index){
if(index<=to){
function switchfun(to) {
$item.each(function(index) {
if (index <= to) {
$(this).stop().animate({
"left":index*(120+5)
left: index * (120 + 5)
});
}else{
} else {
$(this).stop().animate({
"left":(to)*(120+5)+$width+(120+5)*(index-to-1)
left: (to) * (120 + 5) + $width + (120 + 5) * (index - to - 1)
});
}
});
... ... @@ -24,13 +23,19 @@ function switchfun(to){
switchfun(0);
slide=new Slide({ length: 5, loop: false, auto: false, timeout: 2,index: 3});
slide = new Slide({
length: 5,
loop: false,
auto: false,
timeout: 2,
index: 3
});
slide.on('change', function (data) {
slide.on('change', function(data) {
switchfun(data.to);
});
$item.mouseover(function () {
$item.mouseover(function() {
slide.go($(this).index());
});
... ...
var assembly;
var classtype = {
"[object Array]": "array",
"[object Boolean]": "boolean",
"[object Date]": "date",
"[object Function]": "function",
"[object Number]": "number",
"[object Object]": "object",
"[object RegExp]": "regexp",
"[object String]": "string"
'[object Array]': 'array',
'[object Boolean]': 'boolean',
'[object Date]': 'date',
'[object Function]': 'function',
'[object Number]': 'number',
'[object Object]': 'object',
'[object RegExp]': 'regexp',
'[object String]': 'string'
};
var me = {
__Index: 0,
list: new Array(),
list: [],
get: function(id) {
return id === undefined ? this.list : this.list[id];
},
fn: new Function(),
fn: function() { },
inherit: function(childClass, parentClass) {
var Constructor = new Function();
var Constructor = me.fn;
Constructor.prototype = parentClass.prototype;
childClass.prototype = new Constructor();
childClass.prototype.constructor = childClass;
childClass.superclass = parentClass.prototype;
if (childClass.prototype.constructor == Object.prototype.constructor) {
if (childClass.prototype.constructor === Object.prototype.constructor) {
childClass.prototype.constructor = parentClass;
}
},
extend: function(obj, newProperties) {
var key;
for (key in newProperties) {
for (key in newProperties) {
if (newProperties.hasOwnProperty(key)) {
obj[key] = newProperties[key];
}
}
return obj;
},
copy: function(targetClass, obj, newProperties) {
copy: function(TargetClass, obj, newProperties) {
var value,o,key;
if (typeof obj !== 'object') {
return obj;
}
var value = obj.valueOf();
if (obj != value) {
value = obj.valueOf();
if (obj !== value) {
return new obj.constructor(value);
}
var o;
if (obj instanceof obj.constructor && obj.constructor !== Object) {
if (targetClass) {
o = new targetClass();
if (TargetClass) {
o = new TargetClass();
} else {
o = me.clone(obj.constructor.prototype);
}
for (var key in obj) {
if (targetClass || obj.hasOwnProperty(key)) {
for (key in obj) {
if (TargetClass || obj.hasOwnProperty(key)) {
o[key] = obj[key];
}
}
} else {
o = {};
for (var key in obj) {
o[key] = obj[key];
for (key in obj) {
if (o.hasOwnProperty(key)) {
o[key] = obj[key];
}
}
}
if (newProperties) {
for (var key in newProperties) {
o[key] = newProperties[key];
for (key in newProperties) {
if (o.hasOwnProperty(key)) {
o[key] = newProperties[key];
}
}
}
... ... @@ -86,62 +86,64 @@ var me = {
__cloneFunc: function() {
},
delegate: function(func, scope) {
var args;
scope = scope || window;
if (arguments.length > 2) {
var args = Array.prototype.slice.call(arguments, 2);
args = Array.prototype.slice.call(arguments, 2);
return function() {
return func.apply(scope, args);
}
};
} else {
return function() {
return func.call(scope);
}
};
}
},
dom: function($select, classCss) {
var wrap = $select;
var name, DOM = {
wrap: $(wrap)
wrap: wrap
},
els = wrap[0].getElementsByTagName("*"),
els = wrap[0].getElementsByTagName('*'),
elsLen = els.length;
for (var i = 0; i < elsLen; i++) {
var i;
for (i = 0; i < elsLen; i++) {
name = els[i].className;
if (name.indexOf(classCss) > -1) {
name = name.split(classCss)[1];
}
if (name) {
DOM[name] = $(els[i], wrap)
DOM[name] = $(els[i], wrap);
}
}
return DOM
return DOM;
},
//模板引擎
template: function() {
var args = arguments, result;
var result, key, reg,i;
var args = arguments;
if (args.length > 0) {
if (me.isString(args[0])) {
result = args[0];
if (args.length == 2 && me.isObject(args[1])) {
for (var key in args[1]) {
if (args[1][key] != undefined) {
var reg = new RegExp("({" + key + "})", "g");
if (args.length === 2 && me.isObject(args[1])) {
for (key in args[1]) {
if (args[1][key] !== undefined) {
reg = new RegExp('({' + key + '})', 'g');
result = result.replace(reg, args[1][key]);
}
}
} else {
for (var i = 1; i < args.length; i++) {
if (args[i] != undefined) {
var reg = new RegExp("({[" + (i - 1) + "]})", "g");
for (i = 1; i < args.length; i++) {
if (args[i] !== undefined) {
reg = new RegExp('({[' + (i - 1) + ']})', 'g');
result = result.replace(reg, args[i]);
}
}
... ... @@ -151,38 +153,35 @@ var me = {
return result;
},
__type: function(obj) {
return obj == null ? String(obj) : classtype[Object.prototype.toString.call(obj)] || "object";
return obj == null ? String(obj) : classtype[Object.prototype.toString.call(obj)] || 'object';
},
isObject: function(obj) {
return this.isFunction(obj) || !!(obj && 'object' === typeof obj);
},
isFunction: function(obj) {
return this.__type(obj) === "function";
return this.__type(obj) === 'function';
},
isArray: Array.isArray || function(obj) {
return this.__type(obj) === "array";
return this.__type(obj) === 'array';
},
isNum: function(obj) {
return !isNaN(parseFloat(obj)) && isFinite(obj);
},
isString: function(obj) {
return this.__type(obj) === "string";
return this.__type(obj) === 'string';
},
each: function(data, callback, args) {
var i, len;
if (me.isArray(data)) {
for (i = 0, len = data.length; i < len; i++) {
if (callback.call(data[i], i, data[i], args) === false) {
break;
}
}
} else {
for (i in data) {
if (callback.call(data[i], i, data[i], args) === false) {
break;
}
... ... @@ -192,7 +191,7 @@ var me = {
funManager: {
__loadList: {},
__loadFun: function(item, callback, win) {
if (item.methord && me.isFunction(item.methord())) {
win = win || window;
item.methord()(item, function() {
... ... @@ -202,7 +201,7 @@ var me = {
},
load: function(fns, statechange, win, __index) {
__index = __index || 0;
if (fns[__index]) {
me.funManager.__loadFun(fns[__index], function() {
me.funManager.load(fns, statechange, win, __index + 1);
... ... @@ -215,7 +214,10 @@ var me = {
}
},
log: function(msg) {
var console = window.console || { log: function() { } };
var console = window.console || {
log: function() { }
};
console.log(msg);
},
Event: {
... ... @@ -223,16 +225,17 @@ var me = {
var _eoe = e.originalEvent;
var _de = _eoe.detail ? _eoe.detail * -1 : _eoe.wheelDelta / 40;
var _direction = _de < 0 ? -1 : 1;
return {
direction: _direction,
unit: _de
}
};
},
__: function(_e, el, event, handle) {
for (var key in _e) {
if (win[_e[key].validator]) {
var key;
for (key in _e) {
if (window[_e[key].validator]) {
el[_e[key].validator](_e[key].prefix + event, handle, false);
break;
}
... ... @@ -240,40 +243,58 @@ var me = {
},
add: function(el, event, handle) {
var _e = [
{ validator: 'addEventListener', prefix: '' },
{ validator: 'attachEvent', prefix: 'on' }
];
{
validator: 'addEventListener',
prefix: ''
},
{
validator: 'attachEvent',
prefix: 'on'
}
];
this.__(_e, el, event, handle);
},
remove: function(el, event, handle) {
var _e = [
{ validator: 'removeEventListener', prefix: '' },
{ validator: 'detachEvent', prefix: 'on' }
];
{
validator: 'removeEventListener',
prefix: ''
},
{
validator: 'detachEvent',
prefix: 'on'
}
];
this.__(_e, el, event, handle);
}
},
getUid: function(_name) {
return me.template("me-{0}{1}-{2}", _name, new Date().getTime(), me.__Index++)
return me.template('me-{0}{1}-{2}', _name, new Date().getTime(), me.__Index++);
},
Browser: {
isTouch: function() {
var msGesture = window.navigator && window.navigator.msPointerEnabled && window.MSGesture;
return (("ontouchstart" in window) || msGesture || window.DocumentTouch && document instanceof DocumentTouch) ? true : false;
return (('ontouchstart' in window) || msGesture || window.DocumentTouch) ? true : false;
},
Prefix: function() {
var i;
var props = ['perspectiveProperty', 'WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective'];
var obj = document.createElement('div');
for (var i in props) {
for (i in props) {
if (obj.style[props[i]] !== undefined) {
return me.template("-{0}-", props[i].replace('Perspective', '').toLowerCase());
return me.template('-{0}-', props[i].replace('Perspective', '').toLowerCase());
}
}
},
parseURL: function(url) {
var a = document.createElement('a');
var ret,seg,len,i,s;
a.href = url;
return {
source: url,
... ... @@ -282,43 +303,50 @@ var me = {
port: a.port,
query: a.search,
params: (function() {
var ret = {},
seg = a.search.replace(/^\?/, '').split('&'),
len = seg.length, i = 0, s;
ret = {},
seg = a.search.replace(/^\?/, '').split('&'),
len = seg.length, i = 0, s;
for (; i < len; i++) {
if (!seg[i]) { continue; }
if (!seg[i]) {
continue;
}
s = seg[i].split('=');
ret[s[0]] = s[1];
}
return ret;
})(),
file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1],
file: (a.pathname.match(/\/([^\/?#]+)$/i) || [null, ''])[1],
hash: a.hash.replace('#', ''),
path: a.pathname.replace(/^([^\/])/, '/$1'),
relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1],
relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [null, ''])[1],
segments: a.pathname.replace(/^\//, '').split('/')
};
}
},
Array: {
indexOf: function(array, val) {
for (var i = 0; i < array.length; i++) {
if (this[i] == val) return i;
var i;
for (i = 0; i < array.length; i++) {
if (this[i] === val) {
return i;
}
}
return -1;
},
remove: function(array, val) {
var index = this.indexOf(array, val);
if (index > -1) {
array.splice(index, 1);
}
return array;
}
}
}
var assembly = function(options) {
};
assembly = function(options) {
this.initialized = false;
this.registerEvent = {
before: [],
... ... @@ -328,11 +356,13 @@ var assembly = function(options) {
this.options = options;
this.init(options);
}
};
assembly.output = function() {
me.log(me.list);
}
};
assembly.prototype.oninit = me.fn;
assembly.prototype.init = function(cfg) {
this.initialized = true;
... ... @@ -357,16 +387,13 @@ assembly.prototype.destory = function() {
};
assembly.prototype.getUid = function() {
return this.__Uid;
}
};
assembly.prototype.getOptions = function() {
return this.options;
}
};
assembly.prototype.config = function() {
if (arguments.length > 0) {
if (typeof (arguments[0]) === "string") {
if (typeof (arguments[0]) === 'string') {
if (arguments.length > 1) {
this.options[arguments[0]] = arguments[1];
} else {
... ... @@ -380,7 +407,7 @@ assembly.prototype.config = function() {
assembly.prototype.on = function(name, callback) {
var __self = this;
var _e = __self.registerEvent[name];
if (_e) {
_e.push(callback);
}
... ... @@ -390,16 +417,18 @@ assembly.prototype.off = function(name, callback) {
var __self = this;
var _e = __self.registerEvent[name];
var e = [];
me.each(_e, function(name, _callback) {
if (_callback === callback) {
e.push(name);
}
});
me.each(e.reverse(), function(name, _callback) {
_e.splice(_callback, 1);
});
};
me.assembly = assembly;
module.exports =me;
\ No newline at end of file
module.exports = me;
\ No newline at end of file
... ...
var me = require('./YH.base');
var slide = function (options) {
var slide = function(options) {
this.__lastTime = null;
this.__isStop = false;
options = me.extend(this.defaults, options);
slide.superclass.constructor.call(this, options);
}
};
me.inherit(slide, me.assembly);
slide.prototype.oninit = function () {
var __self = this, _o = __self.options;
slide.prototype.oninit = function() {
var __self = this,
_o = __self.options;
if (_o.auto) {
__self.play();
}
__self.go(_o.index);
return this;
}
};
slide.prototype.go = function(_to, _from) {
var __self = this,
_o = __self.options;
var _direction,_loop,_current,_index,_originalto,o,key,_e;
slide.prototype.go = function (_to, _from) {
var __self = this, _o = __self.options;
if (__self.__lastTime) {
clearTimeout(__self.__lastTime);
__self.__lastTime = null;
}
_from = "undefined" == typeof _from ? _o.index : _from;
var _direction = _to === _from ? 0 : _to > _from ? 1 : -1;
var _loop = _o.loop, _index = _o.length - 1, _originalto = _to;
_from = 'undefined' === typeof _from ? _o.index : _from;
_direction = _to === _from ? 0 : _to > _from ? 1 : -1;
_loop = _o.loop, _index = _o.length - 1, _originalto = _to;
if (_loop) {
if (_to > _index) {
_to = _to - _index - 1;
... ... @@ -48,18 +53,21 @@ slide.prototype.go = function (_to, _from) {
}
}
}
var _current = _o.index = _to;
_current = _o.index = _to;
var o = {
o = {
from: _from,
to: _to,
originalto: _originalto,
direction: _direction
}
for (var key in __self.registerEvent) {
};
for (key in __self.registerEvent) {
if (__self.registerEvent[key].length > 0) {
for (_e in __self.registerEvent[key]) {
__self.registerEvent[key][_e](o);
if (__self.registerEvent[key].hasOwnProperty(_e)) {
__self.registerEvent[key][_e](o);
}
}
}
}
... ... @@ -73,43 +81,51 @@ slide.prototype.go = function (_to, _from) {
clearTimeout(__self.__lastTime);
}
}
}
};
slide.prototype.play = function() {
var __self = this,
_o = __self.options;
slide.prototype.play = function () {
var __self = this, _o = __self.options;
__self.__lastTime = setTimeout(function () {
__self.__lastTime = setTimeout(function() {
__self.next();
}, 1000 * _o.timeout);
return this;
}
};
slide.prototype.next = function () {
var __self = this, _o = __self.options;
slide.prototype.next = function() {
var __self = this,
_o = __self.options;
var _from = _o.index;
var _to = _from + _o.step;
__self.go(_to, _from);
}
};
slide.prototype.prev = function () {
var __self = this, _o = __self.options;
slide.prototype.prev = function() {
var __self = this,
_o = __self.options;
var _from = _o.index;
var _to = _from - _o.step;
__self.go(_to, _from);
}
};
slide.prototype.pause = function() {
var __self = this;
slide.prototype.pause = function () {
var __self = this, _o = __self.options;
if (__self.__lastTime) {
clearTimeout(__self.__lastTime);
}
__self.__isStop = true;
}
};
slide.prototype.resume = function() {
var __self = this;
slide.prototype.resume = function () {
var __self = this, _o = __self.options;
__self.__isStop = false;
__self.play();
}
};
slide.prototype.defaults = {
index: 0,
... ... @@ -118,6 +134,6 @@ slide.prototype.defaults = {
per: 1,
auto: false,
loop: false
}
};
module.exports =slide;
\ No newline at end of file
module.exports = slide;
\ No newline at end of file
... ...