2010-12-11 10 views
0

Я собрал сайт в прошлом году и использовал объект MooTools, который кто-то написал, чтобы обеспечить функциональность табуляции. Я никогда не учился MooTools.Есть ли простой способ конвертировать код MooTools в код JQuery?

С тех пор я узнал JQuery и понял, что доступно еще много плагинов, и я решил использовать его исключительно для продвижения вперед. Тем не менее, я не узнал об этом до такой степени, что еще могу написать свой собственный плагин.

Короче говоря, я хотел бы преобразовать код MooTools с табуляцией в JQuery. Я действительно не хочу изучать MooTools до такой степени, что могу сделать это сам, потому что решил не использовать его вообще. Я часто использую this tool, чтобы преобразовать код C# в VB. Есть ли эквивалент MooTools для JQuery?

Если нет, я отправляю код, который я пытаюсь преобразовать в JQuery из MooTools. Вот пример страницы, где он используется: 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; 
} 

}); 
+0

Это не вопрос mootools, так получилось, что один из примеров функций выполняется в mootools. –

+0

также, посмотрите http://stackoverflow.com/questions/4335191/please-convert-this-to-jquery-closed –

ответ

3

Короткий ответ: нет «конвертера», который примет код motools и сделает его jQuery готовым.

Тем не менее, я бы очень высоко (высоко) рекомендовал использовать такое решение, как функция вкладок jQuery UI, найденная здесь: http://jqueryui.com/demos/tabs/. Это невероятно сложно реализовать и имеет большую поддержку со многими опциями.

Если вы все еще решили опрокинуть свой собственный, в jQuery для дизайнеров есть очень прямое руководство (screencast), которое научит вас основам. Вот как я узнал (не использовать при переосмыслении колеса): http://jqueryfordesigners.com/jquery-tabs/

+0

Ну, не изобретать колесо - вот что это такое. Фактически, это был интерфейс JQuery UI, который начал все это - осознание того, что использование 2-х объектных фреймворков на одной странице слишком велико. Я посмотрел на функциональность табуляции, и использование этого потребовало бы некоторых изменений структуры HTML на моей странице, не говоря уже о том, что она привязана к теме, которая не совсем дает мне вид, который я хочу. Из-за отсутствия альтернативы я, вероятно, в конечном итоге буду использовать JQuery UI, но сейчас я не хочу делать серьезные изменения на странице. Проблема не в обучении JQuery - это изучение MooTools, на что мне все равно. – NightOwl888

+0

Структура мудрая, она не выглядит слишком далеко. например - Внешний div, неупорядоченный список, где каждый якорь указывает на div w/ID. Для них было бы несколько простых настроек, все css. – jyoseph

+0

@ NightOwl888 Есть много МНОЖЕ других плагинов вкладок для jQuery, которые вы можете использовать, многие из них довольно просты и без многих требований. Скорее всего, будет намного проще попытаться адаптировать существующий код, чтобы использовать его, чем пытаться преобразовать код Mootools, потому что, как вы говорите, вы не хотите изучать Mootools. –

Смежные вопросы