YTabs,Tab导航类!!这里的一些常用的效果,看看吧!!!
2009-07-15 14:42
281 查看
演示地址:http://www.yaohaixiao.com/effects/samples/ytabs/
var YAO = function(){ var D = document, OA = '[object Array]', FC = "[object Function]", OP = Object.prototype, nt = "nodeType", listeners = [], unloadListeners = [], webkitKeymap = { 63232: 38, // up 63233: 40, // down 63234: 37, // left 63235: 39, // right 63276: 33, // page up 63277: 34, // page down 25: 9 // SHIFT-TAB (Safari provides a different key code in }, patterns = { HYPHEN: /(-[a-z])/i, ROOT_TAG: /body|html/i }, lastError = null; return { isArray: function(obj){ return OP.toString.apply(obj) === OA; }, isString: function(s){ return typeof s === 'string'; }, isBoolean: function(b){ return typeof b === "boolean"; }, isFunction: function(func){ return OP.toString.apply(func) === FC; }, isNull: function(obj){ return obj === null; }, isNumber: function(num){ return typeof num === "number" && isFinite(num); }, isObject: function(str){ return (str && (typeof str === "object" || this.isFunction(str))) || false; }, isUndefined: function(obj){ return typeof obj === "undefined"; }, hasOwnProperty: function(obj, prper){ if (OP.hasOwnProperty) { return obj.hasOwnProperty(prper); } return !this.isUndefined(obj[prper]) && obj.constructor.prototype[prper] !== obj[prper]; }, keys: function(obj){ var b = []; for (var p in obj) { b.push(p); } return b; }, values: function(obj){ var a = []; for (var p in obj) { a.push(obj[p]); } return a; }, isXMLDoc: function(obj){ return obj.documentElement && !obj.body || obj.tagName && obj.ownerDocument && !obj.ownerDocument.body; }, formatNumber: function(b, e){ e = e || ""; b += ""; var d = b.split("."); var a = d[0]; var c = d.length > 1 ? "." + d[1] : ""; var f = /(/d+)(/d{3})/; while (f.test(a)) { a = a.replace(f, "$1,$2"); } return e + a + c; }, unformatNumber: function(a){ return a.replace(/([^0-9/./-])/g, "") * 1; }, stringBuffer: function(){ var a = []; for (var i = 0; i < arguments.length; ++i) { a.push(arguments[i]); } return a.join(""); }, trim: function(str){ try { return str.replace(/^/s+|/s+$/g, ""); } catch (a) { return str; } }, stripTags: function(str){ return str.replace(/<//?[^>]+>/gi, ""); }, stripScripts: function(str){ return str.replace(/<script[^>]*>([//S//s]*?)<//script>/g, ""); }, isJSON: function(obj){ obj = obj.replace(///./g, "@").replace(/"[^"///n/r]*"/g, ""); return (/^[,:{}/[/]0-9./-+Eaeflnr-u /n/r/t]*$/).test(obj); }, encodeHTML: function(str){ return str.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"); }, decodeHTML: function(str){ return str.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"); }, toCamel: function(property){ if (!patterns.HYPHEN.test(property)) { return property; } if (propertyCache[property]) { return propertyCache[property]; } var converted = property; while (patterns.HYPHEN.exec(converted)) { converted = converted.replace(RegExp.$1, RegExp.$1.substr(1).toUpperCase()); } propertyCache[property] = converted; return converted; }, Cookie: { set: function(g, c, f, b){ var e = new Date(); var a = new Date(); if (f == null || f == 0) { f = 1; } a.setTime(e.getTime() + 3600000 * 24 * f); D.cookie = g + "=" + encodeURI(c) + ";expires=" + a.toGMTString() + ";domain=" + b + "; path=/"; }, get: function(e){ var b = D.cookie; var d = e + "="; var c = b.indexOf("; " + d); if (c == -1) { c = b.indexOf(d); if (c != 0) { return null; } } else { c += 2; } var a = D.cookie.indexOf(";", c); if (a == -1) { a = b.length; } return decodeURI(b.substring(c + d.length, a)); }, clear: function(b, a){ if (this.get(b)) { D.cookie = b + "=" + ((domain) ? "; domain=" + a : "") + "; expires=Thu, 01-Jan-70 00:00:01 GMT"; } } }, ua: function(){ var C = { ie: 0, opera: 0, gecko: 0, webkit: 0, mobile: null, air: 0, caja: 0 }, B = navigator.userAgent, A; if ((/KHTML/).test(B)) { C.webkit = 1; } A = B.match(/AppleWebKit//([^/s]*)/); if (A && A[1]) { C.webkit = parseFloat(A[1]); if (/ Mobile///.test(B)) { C.mobile = "Apple"; } else { A = B.match(/NokiaN[^//]*/); if (A) { C.mobile = A[0]; } } A = B.match(/AdobeAIR//([^/s]*)/); if (A) { C.air = A[0]; } } if (!C.webkit) { A = B.match(/Opera[/s//]([^/s]*)/); if (A && A[1]) { C.opera = parseFloat(A[1]); A = B.match(/Opera Mini[^;]*/); if (A) { C.mobile = A[0]; } } else { A = B.match(/MSIE/s([^;]*)/); if (A && A[1]) { C.ie = parseFloat(A[1]); } else { A = B.match(/Gecko//([^/s]*)/); if (A) { C.gecko = 1; A = B.match(/rv:([^/s/)]*)/); if (A && A[1]) { C.gecko = parseFloat(A[1]); } } } } } A = B.match(/Caja//([^/s]*)/); if (A && A[1]) { C.caja = parseFloat(A[1]); } return C; }(), extend: function(subClass, superClass, override){ if (!superClass || !subClass) { throw new Error("extend failed, please check that all dependencies are included."); } var F = function(){}; F.prototype = superClass.prototype; subClass.prototype = new F(); subClass.prototype.constructor = subClass; subClass.superclass = superClass.prototype; if (superClass.prototype.constructor == Object.prototype.constructor) { superClass.prototype.constructor = superClass; } if (override) { for (var p in override) { subClass.prototype[p] = override[p]; } } }, augmentProto: function(sub, sup){ if (!sub || !sup) { throw new Error("augment failed, please check that all dependencies are included."); } var d = sub.prototype, g = sup.prototype, b = arguments, c, h; if (b[2]) { for (c = 2; c < b.length; c += 1) { d[b[c]] = g[b[c]]; } } else { for (h in g) { 4000 if (!d[h]) { d[h] = g[h]; } } } }, augmentObject: function(e, d){ if (!d || !e) { throw new Error("extend method failed, please check that all dependencies are included."); } var b = arguments, c, f; if (b[2]) { if (YAO.isString(b[2])) { e[b[2]] = d[b[2]]; } else { for (c = 0; c < b[2].length; c += 1) { e[b[2][c]] = d[b[2][c]]; } } } else { for (f in d) { e[f] = d[f]; } } return e; }, clone: function(d, f){ var e = function(){ }, b, c = arguments; e.prototype = d; b = new e; if (f) { for (p in f) { b[p] = f[p]; } } return b; }, addListener: function(el, event, fn, obj, overrideContext){ var context = el, wrappedFn = null; if (overrideContext) { if (overrideContext === true) { context = obj; } else { context = overrideContext; } } wrappedFn = function(e){ return fn.call(context,YAO.getEvent(e,el), obj); }; try { try { el.addEventListener(event, wrappedFn, false); } catch (e) { try { el.attachEvent('on' + event, wrappedFn); } catch (e) { el['on' + event] = wrappedFn; } } } catch (e) { lastError = e; this.removeListener(el, evt, fn, wrappedFn); return false; } if ("unload" == event && obj !== this) { unloadListeners[unloadListeners.length] = [el, event, fn]; return true; } else { listeners[listeners.length] = [el, event, fn, wrappedFn, context, overrideContext]; } return true; }, removeListener: function(el, event, fn){ var i,uli,j,li, cacheItem = null; if(!fn || !fn.call){ return false; } if ("unload" == event) { for (i = unloadListeners.length - 1; i > -1; i--) { uli = unloadListeners[i]; if (uli && uli[0] === el && uli[1] == event && uli[2] == fn) { unloadListeners.splice(i, 1); return true; } } return false; } else { if(!el){ return false; } cacheItem = arguments[3]; try { for (j = listeners.length - 1; j > -1; j--) { li = listeners[i]; if (li && li[0] === el && li[1] == event && li[2] === fn && li[3] === cacheItem) { delete listeners[j][3]; delete listeners[j][2]; listeners.splice(j, 1); return true; } } } catch(e){ lastError = e; return false; } return true; } }, on: function(el, event, fn, obj, overrideContext){ return YAO.addListener(el, event, fn, obj, overrideContext); }, stopEvent: function(evt){ this.stopPropagation(evt); this.preventDefault(evt); }, stopPropagation: function(evt){ if (evt.stopPropagation) { evt.stopPropagation(); } else { evt.cancelBubble = true; } }, preventDefault: function(evt){ if (evt.preventDefault) { evt.preventDefault(); } else { evt.returnValue = false; } }, getEvent: function(e, boundEl){ var ev = e || window.event; if (!ev) { var c = this.getEvent.caller; while (c) { ev = c.arguments[0]; if (ev && Event == ev.constructor) { break; } c = c.caller; } } return ev; }, getCharCode: function(ev){ var code = ev.keyCode || ev.charCode || 0; // webkit key normalization if (YAO.ua.webkit && (code in webkitKeymap)) { code = webkitKeymap[code]; } return code; }, _unload: function(e){ var i, l, len, index, ul = unloadListeners.slice(), context; // execute and clear stored unload listeners for (i = 0, len = unloadListeners.length; i < len; ++i) { l = ul[i]; if (l) { context = window; l[2].call(context, YAO.getEvent(e, l[0])); ul[i] = null; } } l = null; context = null; unloadListeners = null; if (listeners) { for (j = listeners.length - 1; j > -1; j--) { l = listeners[j]; if (l) { YAO.removeListener(l[0], l[1], l[2], l[3]); } } l = null; } YAO.removeListener(window, "unload", YAO._unload); }, getEl: function(elem){ var elemID, E, m, i, k, length, len; if (elem) { if (elem[nt] || elem.item) { return elem; } if (YAO.isString(elem)) { elemID = elem; elem = D.getElementById(elem); if (elem && elem.id === elemID) { return elem; } else { if (elem && elem.all) { elem = null; E = D.all[elemID]; for (i = 0, len = E.length; i < len; i += 1) { if (E[i].id === elemID) { return E[i]; } } } } return elem; } else { if (elem.DOM_EVENTS) { elem = elem.get("element"); } else { if (YAO.isArray(elem)) { m = []; for (k = 0, length = elem.length; k < length; k += 1) { m[m.length] = YAO.getEl(elem[k]); } return m; } } } } return null; }, hasClass: function(elem, className){ var has = new RegExp("(?:^|//s+)" + className + "(?://s+|$)"); return has.test(elem.className); }, addClass: function(elem, className){ if (YAO.hasClass(elem, className)) { return; } elem.className = [elem.className, className].join(" "); }, removeClass: function(elem, className){ var replace = new RegExp("(?:^|//s+)" + className + "(?://s+|$)", "g"); if (!YAO.hasClass(elem, className)) { return; } var o = elem.className; elem.className = o.replace(replace, " "); if (YAO.hasClass(elem, className)) { YAO.removeClass(elem, className); } }, replaceClass: function(elem, newClass, oldClass){ if (newClass === oldClass) { return false; } var has = new RegExp("(?:^|//s+)" + newClass + "(?://s+|$)", "g"); if (!YAO.hasClass(elem, newClass)) { YAO.addClass(elem, oldClass); return; } elem.className = elem.className.replace(has, " " + oldClass + " "); if (YAO.hasClass(elem, newClass)) { YAO.replaceClass(elem, newClass, oldClass); } }, getElByClassName: function(className, tag, rootTag){ var elems = [], i, tempCnt = YAO.getEl(rootTag).getElementsByTagName(tag), len = tempCnt.length; for (i = 0; i < len; i++) { if (YAO.hasClass(tempCnt[i], className)) { elems.push(tempCnt[i]); } } if (elems.length < 1) { return false; } else { return elems; } }, getStyle: function(el, property){ if (document.defaultView && document.defaultView.getComputedStyle) { var value = null; if (property == 'float') { property = 'cssFloat'; } var computed = document.defaultView.getComputedStyle(el, ''); if (computed) { value = computed[YAO.toCamel(property)]; } return el.style[property] || value; } else { if (document.documentElement.currentStyle && YAO.ua.ie) { switch (YAO.toCamel(property)) { case 'opacity': var val = 100; try { val = el.filters['DXImageTransform.Microsoft.Alpha'].opacity; } catch (e) { try { val = el.filters('alpha').opacity; } catch (e) { } } return val / 100; break; case 'float': property = 'styleFloat'; default: var value = el.currentStyle ? el.currentStyle[property] : null; return (el.style[property] || value); } } else { return el.style[property]; } } }, setStyle: function(el, property, val){ if (YAO.ua.ie) { switch (property) { case 'opacity': if (YAO.isString(el.style.filter)) { el.style.filter = 'alpha(opacity=' + val * 100 + ')'; if (!el.currentStyle || !el.currentStyle.hasLayout) { el.style.zoom = 1; } } break; case 'float': property = 'styleFloat'; default: el.style[property] = val; } } else { if (property == 'float') { property = 'cssFloat'; } el.style[property] = val; } }, setStyles: function(el, propertys){ for(var p in propertys){ YAO.setStyle(el,p,propertys[p]); } return el; }, getElementsBy: function(method, tag, root){ tag = tag || "*"; var m = []; if (root) { root = YAO.getEl(root); if (!root) { return m; } } else { root = document; } var oElem = root.getElementsByTagName(tag); if (!oElem.length && (tag === "*" && root.all)) { oElem = root.all; } for (var n = 0, j = oElem.length; n < j; ++n) { if (method(oElem )) { m[m.length] = oElem ; } } return m; }, getDocumentWidth: function(){ var k = YAO.getScrollWidth(); var j = Math.max(k, YAO.getViewportWidth()); return j; }, getDocumentHeight: function(){ var k = YAO.getScrollHeight(); var j = Math.max(k, YAO.getViewportHeight()); return j; }, getScrollWidth: function(){ var j = (D.compatMode == "CSS1Compat") ? D.body.scrollWidth : D.Element.scrollWidth; return j; }, getScrollHeight: function(){ var j = (D.compatMode == "CSS1Compat") ? D.body.scrollHeight : D.documentElement.scrollHeight; return j; }, getXScroll: function(){ var j = self.pageXOffset || D.documentElement.scrollLeft || D.body.scrollLeft; return j; }, getYScroll: function(){ var j = self.pageYOffset || D.documentElement.scrollTop || D.body.scrollTop; return j; }, getViewportWidth: function(){ var j = self.innerWidth; var k = D.compatMode; if (k || c) { j = (k == "CSS1Compat") ? D.documentElement.clientWidth : D.body.clientWidth; } return j; }, getViewportHeight: function(){ var j = self.innerHeight; var k = D.compatMode; if ((k || c) && !a) { j = (k == "CSS1Compat") ? D.documentElement.clientHeight : D.body.clientHeight; } return j; }, removeChildren: function(j){ if (!(prent = YAO.getEl(j))) { return false; } while (j.firstChild) { j.firstChild.parentNode.removeChild(j.firstChild); } return j; }, prependChild: function(k, j){ if (!(k = YAO.getEl(k)) || !(j = YAO.getEl(j))) { return false; } if (k.firstChild) { k.insertBefore(j, k.firstChild); } else { k.appendChild(j); } return k; }, insertAfter: function(l, j){ var k = j.parentNode; if (k.lastChild == j) { k.appendChild(l); } else { k.insertBefore(l, j.nextSibling); } }, setOpacity: function(el, val){ YAO.setStyle(el, 'opacity', val); }, Builder: { nidx: 0, NODEMAP: { AREA: 'map', CAPTION: 'table', COL: 'table', COLGROUP: 'table', LEGEND: 'fieldset', OPTGROUP: 'select', OPTION: 'select', PARAM: 'object', TBODY: 'table', TD: 'table', TFOOT: 'table', TH: 'table', THEAD: 'table', TR: 'table' }, ATTR_MAP: { 'className': 'class', 'htmlFor': 'for', 'readOnly': 'readonly', 'maxLength': 'maxlength', 'cellSpacing': 'cellspacing' }, // 追加Link节点(添加CSS样式表) linkNode: function(url, cssId, charset){ var c = charset || 'utf-8', link = null; var head = D.getElementsByTagName('head')[0]; link = this.Node('link', { 'id': cssId || ('link-' + (YAO.Builder.nidx++)), 'type': 'text/css', 'charset': c, 'rel': 'stylesheet', 'href': url }); head.appendChild(link); return link; }, // 追加Script节点 scriptNode: function(url, scriptId, win, charset){ var d = win || document.body; var c = charset || 'utf-8'; return d.appendChild(this.Node('script', { 'id': scriptId || ('script-' + (YAO.Builder.nidx++)), 'type': 'text/javascript', 'charset': c, 'src': url })); }, // 创建元素节点 Node: function(tag, attr, children){ tag = tag.toUpperCase(); // try innerHTML approach var parentTag = YAO.Builder.NODEMAP[tag] || 'div'; var parentElement = D.createElement(parentTag); var elem = null; try { // prevent IE "feature": http://dev.rubyonrails.org/ticket/2707 parentElement.innerHTML = "<" + tag + "></" + tag + ">"; } catch (e) { } elem = parentElement.firstChild; // see if browser added wrapping tags if (elem && (elem.tagName.toUpperCase() != tag)) { elem = elem.getElementsByTagName(tag)[0]; } // fallback to createElement approach if (!elem) { if (YAO.isString(tag)) { elem = D.createElement(tag); } } // abort if nothing could be created if (!elem) { return; } else { if (attr) { this.Attributes(elem, attr); } if (children) { this.Child(elem, children); } return elem; } }, // 给节点添加属性 Attributes: function(elem, attr){ var attrName = '', i; for (i in attr) { if (attr[i] && YAO.hasOwnProperty(attr, i)) { attrName = i in YAO.Builder.ATTR_MAP ? YAO.Builder.ATTR_MAP[i] : i; if (attrName === 'class') { elem.className = attr[i]; } else { elem.setAttribute(attrName, attr[i]); } } } return elem; }, // 追加子节点 Child: function(parent, child){ if (child.tagName) { parent.appendChild(child); return false; } if (YAO.isArray(child)) { var i, length = child.length; for (i = 0; i < length; i += 1) { if (child[i].tagName) { parent.appendChild(child[i]); } else { if (YAO.isString(child[i])) { parent.appendChild(D.createTextNode(child[i])); } } } } else { if (YAO.isString(child)) { parent.appendChild(D.createTextNode(child)); } } } }, batch: function(el, method, o, override){ var id = el; el = YAO.getEl(el); var scope = (override) ? o : window; if (!el || el.tagName || !el.length) { if (!el) { return false; } return method.call(scope, el, o); } var collection = []; for (var i = 0, len = el.length; i < len; ++i) { if (!el[i]) { id = el[i]; } collection[collection.length] = method.call(scope, el[i], o); } return collection; }, fadeUp: function(elem){ if (elem) { var level = 0, fade = function(){ var timer = null; level += 0.05; if (timer) { clearTimeout(timer); timer = null; } if (level > 1) { YAO.setOpacity(elem, 1); return false; } else { YAO.setOpacity(elem, level); } timer = setTimeout(fade, 50); }; fade(); } }, zebra: function(){ var j, length = arguments.length; for (j = 0; j < length; ++j) { (function(config){ var root = YAO.getEl(config.rootTag) || (config.root || null), rows = root.getElementsByTagName(config.rowTag) || (config.rows || null), i, len = rows.length, lastClass = ''; if (root && rows && d0b2 len > 1) { for (var i = 0; i < len; ++i) { rows[i].className = i % 2 == 0 ? 'even' : 'odd'; rows[i].onmouseover = function(){ lastClass = this.className; YAO.replaceClass(this, lastClass, 'hover'); }; rows[i].onmouseout = function(){ YAO.replaceClass(this, 'hover', lastClass); }; } } else { return false; } })(arguments[j]); } }, moveElement: function(element, finalX, finalY, speed){ var elem = YAO.isString(element) ? YAO.getEl(element) : element, style = null; if (elem) { if (elem.movement) { clearTimeout(elem.movement); } if (!elem.style.left) { elem.style.left = "0"; } if (!elem.style.top) { elem.style.top = "0"; } var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); if (xpos == finalX && ypos == finalY) { return true; } if (xpos < finalX) { var dist = Math.ceil((finalX - xpos) / 10); xpos = xpos + dist; } if (xpos > finalX) { var dist = Math.ceil((xpos - finalX) / 10); xpos = xpos - dist; } if (ypos < finalY) { var dist = Math.ceil((finalY - ypos) / 10); ypos = ypos + dist; } if (ypos > finalY) { var dist = Math.ceil((ypos - finalY) / 10); ypos = ypos - dist; } elem.style.left = xpos + "px"; elem.style.top = ypos + "px"; elem.movement = setTimeout(function(){ YAO.moveElement(element, finalX, finalY, speed); }, speed); } }, ajaxRequest: function(url, id, sload, oFunc){ var oXhr, elem = YAO.isString(id) ? YAO.getEl(id) : id, sLoading = sload || '正在获取数据,请稍后...'; if (!url || !id) { return; } if (window.XMLHttpRequest) { oXhr = new XMLHttpRequest(); } else { if (window.ActiveXObject) { oXhr = new ActiveXObject("Microsoft.XMLHTTP"); } } try { oXhr.open('GET', url, true); oXhr.onreadystatechange = function(){ if (oXhr.readyState !== 4) { return false } if (oXhr.readyState == 4) { if (oXhr.status == 200 || location.href.indexOf('http') === -1) { if (oFunc) { oFunc.success(oXhr); } else { elem.innerHTML = oXhr.responseText; } } else { if (oFunc) { oFunc.failure(oXhr.status); } else { elem.innerHTML = sLoading; } } } }; oXhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); oXhr.send(null); } catch (e) { throw new Error("Your browser does not support XMLHTTP."); return false; } }, JSON: function(){ function f(n){ return n < 10 ? '0' + n : n; } Date.prototype.toJSON = function(){ return this.getUTCFullYear() + '-' + f(this.getUTCMonth() + 1) + '-' + f(this.getUTCDate()) + 'T' + f(this.getUTCHours()) + ':' + f(this.getUTCMinutes()) + ':' + f(this.getUTCSeconds()) + 'Z'; }; var m = { '/b': '//b', '/t': '//t', '/n': '//n', '/f': '//f', '/r': '//r', '"': '//"', '//': '////' }; function stringify(value, whitelist){ var a, i, k, l, r = /["///x00-/x1f/x7f-/x9f]/g, v; switch (typeof value) { case 'string': return r.test(value) ? '"' + value.replace(r, function(a){ var c = m[a]; if (c) { return c; } c = a.charCodeAt(); return '//u00' + Math.floor(c / 16).toString(16) + (c % 16).toString(16); }) + '"' : '"' + value + '"'; case 'number': return isFinite(value) ? String(value) : 'null'; case 'boolean': case 'null': return String(value); case 'object': if (!value) { return 'null'; } if (typeof value.toJSON === 'function') { return stringify(value.toJSON()); } a = []; if (typeof value.length === 'number' && !(value.propertyIsEnumerable('length'))) { l = value.length; for (i = 0; i < l; i += 1) { a.push(stringify(value[i], whitelist) || 'null'); } return '[' + a.join(',') + ']'; } if (whitelist) { l = whitelist.length; for (i = 0; i < l; i += 1) { k = whitelist[i]; if (typeof k === 'string') { v = stringify(value[k], whitelist); if (v) { a.push(stringify(k) + ':' + v); } } } } else { for (k in value) { if (typeof k === 'string') { v = stringify(value[k], whitelist); if (v) { a.push(stringify(k) + ':' + v); } } } } return '{' + a.join(',') + '}'; } } return { stringify: stringify, parse: function(text, filter){ var j; function walk(k, v){ var i, n; if (v && typeof v === 'object') { for (i in v) { if (OP.hasOwnProperty.apply(v, [i])) { n = walk(i, v[i]); if (n !== undefined) { v[i] = n; } else { delete v[i]; } } } } return filter(k, v); } if (/^[/],:{}/s]*$/.test(text.replace(///./g, '@').replace(/"[^"///n/r]*"|true|false|null|-?/d+(?:/./d*)?(?:[eE][+/-]?/d+)?/g, ']').replace(/(?:^|:|,)(?:/s*/[)+/g, ''))) { j = eval('(' + text + ')'); return typeof filter === 'function' ? walk('', j) : j; } throw new SyntaxError('parseJSON'); } }; }(), YTabs: function(){ var j, len = arguments.length, sigleTab = []; for (j = 0; j < len; ++j) { sigleTab[j] = new YAO.simpleTab(arguments[j]); } }, scrollNews: function(S, SI, RT, CT){ var SN = new YAO.scrollVertical(S, SI, RT, CT); SN.speed = 4000; SN.isPause = true; var TM = setTimeout(function(){ if (TM) { clearTimeout(TM); } SN.isPause = false; }, 2000); YAO.on(SN.scrollArea, 'mouseover', function(){ SN.isPause = true; }); YAO.on(SN.scrollArea, 'mouseout', function(){ SN.isPause = false; }); } }; YAO.on(window, "unload", YAO._unload); }(); YAO.simpleTab = function(oConfigs){ this.tabCnt = (oConfigs.tabId) ? YAO.getEl(oConfigs.tabId) : (oConfigs.tabRoot || null); this.tabs = (oConfigs.tTag) ? this.tabCnt.getElementsByTagName(oConfigs.tTag) : (oConfigs.tabs || null); this.contents = (oConfigs.cTag) ? this.tabCnt.getElementsByTagName(oConfigs.cTag) : (oConfigs.contents || null); this.length = this.tabs.length || 0; this.defaultIndex = oConfigs.defaultIndex || 0; this.lastIndex = this.defaultIndex; this.lastTab = this.tabs[this.lastIndex] || null; this.lastContent = this.contents[this.lastIndex] || null; this.evtName = oConfigs.evt || 'mouseover'; this.defaultClass = oConfigs.defaultClass || 'current'; this.previousClass = oConfigs.previousClass || ''; this.hideAll = oConfigs.hideAll || false; this.auto = oConfigs.auto || false; this.autoSpeed = oConfigs.autoSpeed || 6000; this.fadeUp = oConfigs.fadeUp || false; this.scroll = oConfigs.scroll || false; this.scrollId = oConfigs.scrollId || null; this.scrollSpeed = oConfigs.scrollSpeed || 5; this.direction = oConfigs.direction || 'V'; this.activeTag = oConfigs.activeTag || 'IMG'; this.ajax = oConfigs.ajax || false; this.aPath = oConfigs.aPath || ''; var i, that = this; if (this.tabs && this.contents) { if (this.auto) { this.timer = setTimeout(function(){ that.autoChange(); }, that.autoSpeed); } if (!this.hideAll) { YAO.addClass(this.lastTab, this.defaultClass); if (!this.ajax) { this.lastContent.style.display = 'block'; } else{ this.ajaxTab(this.lastTab); } } else { YAO.removeClass(this.lastTab, this.defaultClass); if (!this.scroll) { this.lastContent.style.display = 'none'; } } for (i = 0; i < this.length; ++i) { if (i !== this.defaultIndex && !this.scroll) { YAO.removeClass(this.tabs[i], 'current'); if (!this.ajax) { this.contents[i].style.display = 'none'; } } YAO.on(this.tabs[i],this.evtName, function(index){ return function(event){ var evt = null, currentContent = that.ajax ? that.contents : (that.contents[index] || null); that.setCurrent.call(that, currentContent, index); that.lastIndex = index; if (that.auto) { that.isPause = true; } evt = event || window.event; YAO.stopEvent(evt); } }(i)); YAO.on(this.tabs[i],'mouseout', function(index){ return function(){ if (that.hideAll && that.evtName === 'mouseover') { if (that.lastTab === this) { YAO.removeClass(this, (YAO.hasClass(this, that.defaultClass) ? that.defaultClass : 'current')); } if (that.previousClassTab) { YAO.removeClass(that.previousClassTab, that.previousClass); } if (!that.scroll && !that.ajax) { that.contents[index].style.display = 'none'; } } else { if (that.auto) { that.isPause = false; } } } }(i)); } } }; YAO.simpleTab.prototype.timer = null; YAO.simpleTab.prototype.isPause = false; YAO.simpleTab.prototype = { autoChange: function(){ var that = this; if (!this.isPause) { var currentContent = null, currentTab = null; if (this.timer) { clearTimeout(this.timer); this.timer = null; } this.lastIndex = this.lastIndex + 1; if (this.lastIndex === this.length) { this.lastIndex = 0; } currentContent = this.ajax ? this.contents : (this.contents[this.lastIndex] || null); this.setCurrent(currentContent, this.lastIndex); this.timer = setTimeout(function(){ that.autoChange(); }, this.autoSpeed); } else { this.timer = setTimeout(function(){ that.autoChange() }, this.autoSpeed); return false; } }, setCurrent: function(curCnt, index){ var activeObj = null, itemHeight = 0, itemWidth = 0, scrollWidth = 0, scrollHeight = 0; curTab = this.tabs[index]; YAO.removeClass(this.lastTab, (YAO.hasClass(this.lastTab, this.defaultClass) ? this.defaultClass : 'current')); if (curTab === this.tabs[this.defaultIndex]) { YAO.addClass(curTab, this.defaultClass); } else { YAO.addClass(curTab, 'current'); } if (this.previousClass) { if (this.previousClassTab) { YAO.removeClass(this.previousClassTab, this.previousClass); } if (index !== 0) { YAO.addClass(this.tabs[index - 1], this.previousClass); if ((index - 1) === this.defaultIndex) { YAO.removeClass(this.tabs[index - 1], this.defaultClass); } this.previousClassTab = (this.tabs[index - 1]); } } if (!this.scroll && !this.ajax) { if (this.lastContent) { this.lastContent.style.display = "none"; } if (curCnt) { curCnt.style.display = "block"; } } if (this.fadeUp) { activeObj = (curCnt.tagName.toUpperCase() === 'IMG') ? curCnt : curCnt.getElementsByTagName('img')[0]; if (this.lastContent !== curCnt) { YAO.fadeUp(activeObj); } } else { if (this.scroll) { activeObj = (curCnt.tagName.toUpperCase() === this.activeTag) ? curCnt : curCnt.getElementsByTagName(this.activeTag)[0]; if(this.direction === 'V'){ itemHeight = activeObj.offsetHeight; scrollHeight = -(index * itemHeight); } else{ itemWidth = activeObj.offsetWidth; scrollWidth = -(index * itemWidth); } YAO.moveElement(this.scrollId, scrollWidth, scrollHeight, this.scrollSpeed); } } if (!this.ajax) { this.lastContent = curCnt; } else { this.ajaxTab(curTab); } this.lastTab = curTab; }, ajaxTab: function(curTab){ var url = '', ajaxLink = null, cnt = this.contents, uriData = this.aPath.split('/'); ajaxLink = (curTab.tagName.toUpperCase() === 'A') ? curTab : curTab.getElementsByTagName('a')[0]; url = uriData[0] + '/' + ajaxLink.rel + uriData[1] + uriData[2] + ajaxLink.rel; YAO.ajaxRequest(url, cnt, cnt.innerHTML); } }; YAO.scrollVertical = function(disp, msg, tg, stg){ var D = document; if (YAO.isString(disp)) { this.scrollArea = D.getElementById(disp); } else { this.scrollArea == disp; } if (YAO.isString(msg)) { this.scrollMsg = D.getElementById(msg); } else { this.scrollMsg = msg; } var s_msg = this.scrollMsg; var s_area = this.scrollArea; if (!tg) { var tg = 'li'; } this.unitHeight = s_msg.getElementsByTagName(tg)[0].offsetHeight; this.msgHeight = this.unitHeight * s_msg.getElementsByTagName(tg).length; s_msg.style.position = "absolute"; s_msg.style.top = "0"; s_msg.style.left = "0"; var copydiv = D.createElement(stg || 'div'); copydiv.id = s_area.id + "_copymsgid"; copydiv.innerHTML = s_msg.innerHTML; copydiv.style.height = this.msgHeight + "px"; s_area.appendChild(copydiv); copydiv.style.position = "absolute"; copydiv.style.left = "0"; copydiv.style.top = this.msgHeight + "px"; this.copyMsg = copydiv; this.play(this); }; YAO.scrollVertical.prototype.scrollArea = null; YAO.scrollVertical.prototype.scrollMsg = null; YAO.scrollVertical.prototype.unitHeight = 0; YAO.scrollVertical.prototype.msgHeight = 0; YAO.scrollVertical.prototype.copyMsg = null; YAO.scrollVertical.prototype.scrollValue = 0; YAO.scrollVertical.prototype.scrollHeight = 0; YAO.scrollVertical.prototype.isStop = true; YAO.scrollVertical.prototype.isPause = false; YAO.scrollVertical.prototype.scrollTimer = null; YAO.scrollVertical.prototype.speed = 2000; YAO.scrollVertical.prototype.play = function(o){ var s_msg = o.scrollMsg, c_msg = o.copyMsg, s_area = o.scrollArea, msg_h = o.msgHeight, isMoz = function(){ if (navigator.userAgent.toLowerCase().match(/mozilla/)) { return 1; } }, anim = function(){ if (o.scrollTimer) { clearTimeout(o.scrollTimer); } if (o.isPause) { o.scrollTimer = setTimeout(anim, 50); return; } if (msg_h - o.scrollValue <= 0) { o.scrollValue = 0; } else { o.scrollValue += 1; o.scrollHeight += 1; } if (isMoz) { s_area.scrollTop = o.scrollValue; } else { s_msg.style.top = -1 * o.scrollValue + "px"; c_msg.style.top = (msg_h - o.scrollValue) + "px"; } if (o.scrollHeight % s_area.offsetHeight == 0) { o.scrollTimer = setTimeout(anim, o.speed); } else { o.scrollTimer = setTimeout(anim, 50); } }; anim(); };
相关文章推荐
- 整理一些网页常用的tab选项卡效果
- 整理一些网页常用的tab选项卡效果
- 整理一些网页常用的tab选项卡效果
- 针对 H.264, 这里有一些常用的码率方案
- 一些实用的TAB效果第1/2页
- Web中一些常用效果
- 一些常用的sql语句,收藏着不记得就翻开看看
- easyui选项卡(tab)常用的一些方法
- 一些实用的TAB效果第1/2页
- 互联网的一些常用实现原理分析及代码实现(一):图片放大镜效果
- 一些 效果 DEMO 留着看看
- 一些常用语句,放在这里以后用
- 这里有一些常用的学习视频的下载,有学习网络的朋友可以参考
- css3中一些常用的动画效果
- JTable是Swing编程中很常用的控件,这里总结了一些常用方法以备查阅.
- iOS常用的一些动画效果,UIView封装的动画,CALayer的动画等
- animate.css 一些常用的CSS3动画效果
- 一些实用的TAB效果
- CABasicAnimation学习Demo 包括了一些常用的动画效果
- [置顶] Android开发之TabLayout的使用(实现三种常用的选项卡效果)