Question

我去年把一个网站放在一起，并使用了别人写的MooTools对象来提供标签功能。我从来没有花时间学习MooTools。

从那时起，我已经学习了JQuery并且意识到还有更多的插件可供使用，而且我已经决定将它专门用于前进。但是，我还没有学到它，我还可以编写自己的插件。

长话短说，我想将标签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/

有没有一种简单的方法将MooTools代码转换为JQuery代码？

1 个答案: