02 25 2009

0

SimpleTabs的改进

分类: mootools 标签: mootools SimpleTabs 阅读: 140

我在使用mootools框架的同时，一直在找一个tabs的实例，最近找到一个SimpleTabs( digitarald.de/project/simple-tabs/1-0/showcase/tabbed/)，可是使用过程中发现对IE的支持并不是很完美。表现在，等浏览器载入tabs后会有一个闪动。我做了些改动，消除了这个影响。并增加了一个皮肤。大家试试看了。

 

站内有一个实例：Categories 和 tags 的分页


 

JavaScript代码
  1. var SimpleTabs = new Class({  
  2.   
  3.     Implements: [Events, Options],  
  4.   
  5.     /** 
  6.      * Options 
  7.      */  
  8.     options: {  
  9.         show: 0,  
  10.         selector: '.tab-tab',  
  11.         classWrapper: 'tab-wrapper',  
  12.         classMenu: 'tab-menu',  
  13.         classContainer: 'tab-container',  
  14.         onSelect: function(toggle, container, index) {  
  15.             toggle.addClass('tab-selected');  
  16.             container.setStyle('display', '');  
  17.         },  
  18.         onDeselect: function(toggle, container, index) {  
  19.             toggle.removeClass('tab-selected');  
  20.             container.setStyle('display', 'none');  
  21.         },  
  22.         onRequest: function(toggle, container, index) {  
  23.             container.addClass('tab-ajax-loading');  
  24.         },  
  25.         onComplete: function(toggle, container, index) {  
  26.             container.removeClass('tab-ajax-loading');  
  27.         },  
  28.         onFailure: function(toggle, container, index) {  
  29.             container.removeClass('tab-ajax-loading');  
  30.         },  
  31.         onAdded: Class.empty,  
  32.         getContent: null,  
  33.         ajaxOptions: {},  
  34.         cache: true  
  35.     },  
  36.   
  37.     /** 
  38.      * Constructor 
  39.      * 
  40.      * @param {Element} The parent Element that holds the tab elements 
  41.      * @param {Object} Options 
  42.      */  
  43.     initialize: function(element, options) {  
  44.         this.element = $(element);  
  45.         this.setOptions(options);  
  46.         this.selected = null;  
  47.         this.build();  
  48.     },  
  49.   
  50.     build: function() {  
  51.         this.tabs = [];  
  52.         this.menu = new Element('ul', {'class': this.options.classMenu});  
  53.         this.wrapper = new Element('div', {'class': this.options.classWrapper});  
  54.   
  55.         this.element.getElements(this.options.selector).each(function(el) {  
  56.             var content = el.get('href') || (this.options.getContent ? this.options.getContent.call(this, el) : el.getNext());  
  57.             this.addTab(el.innerHTML, el.title || el.innerHTML, content);  
  58.         }, this);  
  59.         this.element.empty().adopt(this.menu, this.wrapper);  
  60.   
  61.         if (this.tabs.length) this.select(this.options.show);  
  62.     },  
  63.   
  64.     /** 
  65.      * Add a new tab at the end of the tab menu 
  66.      * 
  67.      * @param {String} inner Text 
  68.      * @param {String} Title 
  69.      * @param {Element|String} Content Element or URL for Ajax 
  70.      */  
  71.     addTab: function(text, title, content) {  
  72.         var grab = $(content);  
  73.         var container = (grab || new Element('div'))  
  74.             .setStyle('display', 'none')  
  75.             .addClass(this.options.classContainer)  
  76.             .inject(this.wrapper);  
  77.         var pos = this.tabs.length;  
  78.         var evt = (this.options.hover) ? 'mouseenter' : 'click';  
  79.         var tab = {  
  80.             container: container,  
  81.             toggle: new Element('li', {'class': 'tab-tab'}).grab(new Element('a', {  
  82.                 href: '#',  
  83.                 title: title  
  84.             }).grab(  
  85.                 new Element('span', {html: text})  
  86.             )).addEvent(evt, this.onClick.bindWithEvent(this, [pos])).inject(this.menu)  
  87.         };  
  88.         if (!grab && $type(content) == 'string') tab.url = content;  
  89.         this.tabs.push(tab);  
  90.         return this.fireEvent('onAdded', [tab.toggle, tab.container, pos]);  
  91.     },  
  92.   
  93.     onClick: function(evt, index) {  
  94.         evt = new Event(evt).stop();  
  95.         this.select(index);  
  96.         return false;  
  97.     },  
  98.   
  99.     /** 
  100.      * Select the tab via tab-index 
  101.      * 
  102.      * @param {Number} Tab-index 
  103.      */  
  104.     select: function(index) {  
  105.         if (this.selected === index || !this.tabs[index]) return this;  
  106.         if (this.ajax) this.ajax.cancel().removeEvents();  
  107.         var tab = this.tabs[index];  
  108.         var params = [tab.toggle, tab.container, index];  
  109.         if (this.selected !== null) {  
  110.             var current = this.tabs[this.selected];  
  111.             if (this.ajax && this.ajax.running) this.ajax.cancel();  
  112.             params.extend([current.toggle, current.container, this.selected]);  
  113.             this.fireEvent('onDeselect', [current.toggle, current.container, this.selected]);  
  114.         }  
  115.         this.fireEvent('onSelect', params);  
  116.         if (tab.url && (!tab.loaded || !this.options.cache)) {  
  117.             this.ajax = this.ajax || new Request.HTML();  
  118.             this.ajax.setOptions({  
  119.                 url: tab.url,  
  120.                 method: 'get',  
  121.                 update: tab.container,  
  122.                 onFailure: this.fireEvent.pass(['onFailure', params], this),  
  123.                 onComplete: function(resp) {  
  124.                     tab.loaded = true;  
  125.                     this.fireEvent('onComplete', params);  
  126.                 }.bind(this)  
  127.             }).setOptions(this.options.ajaxOptions);  
  128.             this.ajax.send();  
  129.             this.fireEvent('onRequest', params);  
  130.         }  
  131.         this.selected = index;  
  132.         return this;  
  133.     }  
  134.   
  135. });  

 

 

{$page}
1 条记录 1/1 页
登陆
最近更新
评论
标签
mootools 
SEO 
电影 
php 
mysql 
南方黑道 
心情 
RS232 
IE 
debugger 
SimpleTabs 
ThinkPHP 
分页 
西单女孩 
流量 
兽首 
UI 
javascript 
更新 
秦皇岛 
日出 
IE8 
小沈阳之夜 
inline 
编辑 
分类
友情链接(申请链接)