有沒有簡單的方法將MooTools代碼轉換爲JQuery代碼？

Question

我去年把網站放在一起，並使用別人寫的提供Tab鍵功能的MooTools對象。我從來沒有花時間學習MooTools。

從那時起，我學習了JQuery，並意識到還有更多的插件可用，並且我決定獨家使用它。但是，我還沒有學到它，直到我可以編寫自己的插件。

長話短說，我想將tabo MooTools代碼轉換爲JQuery。我真的不在乎學習MooTools，因爲我自己決定不使用它。我經常使用this tool將C＃代碼轉換爲VB。 MooTools與JQuery有相同之處嗎？

如果不是，我張貼我試圖從MooTools轉換爲JQuery的代碼。以下是它正在使用的示例頁面：http://www.foldingchairdepot.com/p/National-Public-Seating-600-Series-Blow-Molded-Resin-Plastic-Folding-Chair---Set-of-4---Gray__NPS-602.aspx。

/** 
* SimpleTabs - Unobtrusive Tabs with Ajax 
* 
* @example 
* 
* var tabs = new SimpleTabs($('tab-element'), { 
* selector: 'h2.tab-tab' 
* }); 
* 
* @version 1.0 
* 
* @license MIT License 
* @author Harald Kirschner <mail [at] digitarald.de> 
* @copyright 2007 Author 
*/ 
var SimpleTabs = new Class({ 

Implements: [Events, Options], 

/** 
    * Options 
    */ 
options: { 
    show: 0, 
    selector: '.tab-tab', 
    classWrapper: 'tab-wrapper', 
    classMenu: 'tab-menu', 
    classContainer: 'tab-container', 
    onSelect: function(toggle, container, index) { 
    toggle.addClass('tab-selected'); 
    container.setStyle('display', ''); 
    }, 
    onDeselect: function(toggle, container, index) { 
    toggle.removeClass('tab-selected'); 
    container.setStyle('display', 'none'); 
    }, 
    onRequest: function(toggle, container, index) { 
    container.addClass('tab-ajax-loading'); 
    }, 
    onComplete: function(toggle, container, index) { 
    container.removeClass('tab-ajax-loading'); 
    }, 
    onFailure: function(toggle, container, index) { 
    container.removeClass('tab-ajax-loading'); 
    }, 
    onAdded: Class.empty, 
    getContent: null, 
    ajaxOptions: {}, 
    cache: true 
}, 

/** 
    * Constructor 
    * 
    * @param {Element} The parent Element that holds the tab elements 
    * @param {Object} Options 
    */ 
initialize: function(element, options) { 
    this.element = $(element); 
    this.setOptions(options); 
    this.selected = null; 
    this.build(); 
}, 

build: function() { 
    this.tabs = []; 
    this.menu = new Element('ul', {'class': this.options.classMenu}); 
    this.wrapper = new Element('div', {'class': this.options.classWrapper}); 

    this.element.getElements(this.options.selector).each(function(el) { 
    var content = el.get('href') || (this.options.getContent ? this.options.getContent.call(this, el) : el.getNext()); 
    this.addTab(el.innerHTML, el.title || el.innerHTML, content); 
    }, this); 
    this.element.empty().adopt(this.menu, this.wrapper); 

    if (this.tabs.length) this.select(this.options.show); 
}, 

/** 
    * Add a new tab at the end of the tab menu 
    * 
    * @param {String} inner Text 
    * @param {String} Title 
    * @param {Element|String} Content Element or URL for Ajax 
    */ 
addTab: function(text, title, content) { 
    var grab = $(content); 
    var container = (grab || new Element('div')) 
    .setStyle('display', 'none') 
    .addClass(this.options.classContainer) 
    .inject(this.wrapper); 
    var pos = this.tabs.length; 
    var evt = (this.options.hover) ? 'mouseenter' : 'click'; 
    var tab = { 
    container: container, 
    toggle: new Element('li').grab(new Element('a', { 
    href: '#', 
    title: title 
    }).grab(
    new Element('span', {html: text}) 
    )).addEvent(evt, this.onClick.bindWithEvent(this, [pos])).inject(this.menu) 
    }; 
    if (!grab && $type(content) == 'string') tab.url = content; 
    this.tabs.push(tab); 
    return this.fireEvent('onAdded', [tab.toggle, tab.container, pos]); 
}, 

onClick: function(evt, index) { 
    this.select(index); 
    return false; 
}, 

/** 
    * Select the tab via tab-index 
    * 
    * @param {Number} Tab-index 
    */ 
select: function(index) { 
    if (this.selected === index || !this.tabs[index]) return this; 
    if (this.ajax) this.ajax.cancel().removeEvents(); 
    var tab = this.tabs[index]; 
    var params = [tab.toggle, tab.container, index]; 
    if (this.selected !== null) { 
    var current = this.tabs[this.selected]; 
    if (this.ajax && this.ajax.running) this.ajax.cancel(); 
    params.extend([current.toggle, current.container, this.selected]); 
    this.fireEvent('onDeselect', [current.toggle, current.container, this.selected]); 
    } 
    this.fireEvent('onSelect', params); 
    if (tab.url && (!tab.loaded || !this.options.cache)) { 
    this.ajax = this.ajax || new Request.HTML(); 
    this.ajax.setOptions({ 
    url: tab.url, 
    method: 'get', 
    update: tab.container, 
    onFailure: this.fireEvent.pass(['onFailure', params], this), 
    onComplete: function(resp) { 
    tab.loaded = true; 
    this.fireEvent('onComplete', params); 
    }.bind(this) 
    }).setOptions(this.options.ajaxOptions); 
    this.ajax.send(); 
    this.fireEvent('onRequest', params); 
    } 
    this.selected = index; 
    return this; 
} 

}); 

Answer 1

簡短的答案是否定的，沒有「轉換器」，將採取motools代碼，並使其jQuery準備好。

但是，我會高度推薦使用像這裏找到的jQuery UI選項卡功能的解決方案：http://jqueryui.com/demos/tabs/。它簡單易用，並且有很多選項提供了很好的支持。

如果您仍然決定推出自己的產品，那麼在jQuery中會有一個非常簡單的教程（截屏），這些教程將向您介紹基礎知識。這是我學到的東西（在重新發明輪子時沒有用）：http://jqueryfordesigners.com/jquery-tabs/