有没有简单的方法将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/