MooTools开发指南：从基础到进阶

### MooTools 开发指南：从基础到进阶 #### 1. MooTools 中 Tabs 与 AjaxTabs 类的实现 在 MooTools 开发里，我们能够创建 `Tabs` 类来管理标签页，还能通过扩展 `Tabs` 类得到 `AjaxTabs` 类，为其增添 Ajax 功能。以下是具体实现步骤： - **Tabs 类的实现** ```javascript var Tabs = new Class({ Implements: [Options, Events], options: { selectedTabCssClass: 'selected', selectedSectionCssClass: 'selected', firstShow: 0 }, tabs: [], initialize: function(containers, tabs, options){ this.setOptions(options); $$(tabs).each(function(tab, index){ this.addSection(tab, $$(containers)[index]); }, this); this.show(this.options.firstShow); }, addSection: function(tab, container) { this.tabs.include(tab); tab.store('container', container); this.attach(tab); }, attach: function(tab){ tab.addEvent('click', function(event){ event.preventDefault(); this.show(this.tabs.indexOf(tab)); }.bind(this)); }, show: function(index){ if (this.current === index) return; this.tabs.each(function(tab, i){ var container = tab.retrieve('container'); if (index === i) { tab.addClass(this.options.selectedTabCssClass); container.addClass( this.options.selectedSectionCssClass); container.setStyle('display', 'block'); this.fireEvent('onShow', [i, tab, container]); } else { tab.removeClass( this.options.selectedTabCssClass); container.removeClass( this.options.selectedSectionCssClass); container.setStyle('display', 'none'); if (this.current === i || !$chk(this.current)) this.fireEvent('onHide', [i, tab, container]); } }, this); this.current = index; } }); ``` - **AjaxTabs 类的实现** ```javascript var AjaxTabs = new Class({ Extends: Tabs, options: { cache: true, urls: [], requestOptions: {} }, show: function(index, force){ var tab = this.tabs[index]; var url = this.options.urls[index] || tab.get('href'); if (!url || force || (this.options.cache && tab.retrieve('loaded'))) { this.parent(index); } else { this.fetchTabContent(index, url); } }, fetchTabContent: function(index, url) { var tab = this.tabs[index]; var container = tab.retrieve('container'); var request = tab.retrieve('tabAjax'); if (!request) { request = new Request.HTML( $merge(this.options.requestOptions, { update: container, url: url }) ).addEvent('onSuccess', function(){ tab.store('loaded', true); this.show(index, true) }.bind(this)); tab.store('tabAjax', request); } request.send(); } }); ``` - **实例化扩展类** ```javascript var myAjaxTabs = new AjaxTabs($$('div.container'), $$('div.tab'), { urls: ['/page1.html', '/page2.html', '/page3.html', '/page4.html'] }); ``` 或者当标签是链接时： ```javascript var myAjaxTabs = new AjaxTabs($$('div.container'), $$('a.tab')); ``` - **添加更多选项和事件** ```javascript var myAjaxTabs = new AjaxTabs($$('div.container'), $$('div.tab'), { urls: ['/page1.html', '/page2.html', '/page3.html', '/page4.html'], requestOptions: { link: 'cancel', evalScripts: true, onSuccess: function(response){ alert('Hey, ajax worked! Here\'s the response: ' + response); } } }); ``` #### 2. 学习资源推荐 当你掌握了使用 MooTools 编写 JavaScript 的技巧