2013-12-09 4 views
0

У меня есть код, который я пишу для клиента, и они в настоящее время используют Drupal 6 и jQuery 1.3.2. Я не могу контролировать, какой jQuery они используют, и поэтому я Я пытаюсь написать код, основанный на этом предположении, что он не изменится в ближайшее время. Я переписываю код и теперь работаю еще в 1.4, но я столкнулся с кирпичной стеной, пытаясь заставить его работать на 1.3.Рефакторинг для работы с jQuery 1.3.2

Я использую радиокнопки FlatUI - оригинал здесь (https://raw.github.com/designmodo/Flat-UI/master/js/flatui-radio.js) - Я уже переработал его, но не могу найти, что останавливает его от запуска.

Я установил JSFiddle, чтобы продемонстрировать свою проблему. Все работает хорошо, кроме части отбора возраста, где должны быть флажки слева от каждого возраста (13+, 14+ и т. Д.). Как я уже сказал, он работает еще в 1.4 и даже просматривает документы jQuery, я не могу найти ничего, что не должно работать на 1.3.

http://jsfiddle.net/dvw9F/

Вот код, который не работает:

/* ============================================================= 
* flatui-radio.js v0.0.3 
* ============================================================ */ 

(function ($) { 

'use strict'; 

/* RADIO PUBLIC CLASS DEFINITION 
* ============================== */ 

var Radio = function (element, options) { 
    this.init(element, options); 
}; 

Radio.prototype = { 

    constructor: Radio, 

    init: function (element, options) { 

     var $el = this.$element = $(element); 

     this.options = $.extend({}, $.fn.radio.defaults, options); 
     $el.before(this.options.template); 
     this.setState(); 

    }, 

    setState: function() { 

     var $el = this.$element, 
      $parent = $el.closest('.radio'); 

     if ($el.attr('disabled') === true) { 
      $parent.addClass('disabled'); 
     } 

     if ($el.attr('checked') === true) { 
      $parent.addClass('checked'); 
     } 

    }, 

    toggle: function() { 

     var d = 'disabled', 
      ch = 'checked', 
      $el = this.$element, 
      checked = false, 
      $parent = $el.closest('.radio'), 
      $parentWrap = $el.closest('form').length ? $el.closest('form') : $el.closest('body'), 
      $elemGroup = $parentWrap.find(':radio[name="' + $el.attr('name') + '"]'), 
      e = $.Event('toggle'); 

     if ($el.attr(ch) === true) { 
      checked = true; 
     } 

     $elemGroup.not($el).each(function() { 

      var $el = $(this), 
       $parent = $(this).closest('.radio'); 

      if ($el.attr(d) !== true) { 
       $parent.removeClass(ch) && $el.removeAttr(ch).trigger('change'); 
      } 

     }); 

     if ($el.attr(d) !== true) { 

      if (checked === false) { 
       $parent.addClass(ch) && $el.attr(ch, true); 
      } 

      $el.trigger(e); 

      if (true !== $el.attr(ch)) { 
       $el.trigger('change'); 
      } 

     } 

    }, 

    setCheck: function (option) { 

     var ch = 'checked', 
      $el = this.$element, 
      $parent = $el.closest('.radio'), 
      checkAction = option === 'check' ? true : false, 
      checked = false, 
      $parentWrap = $el.closest('form').length ? $el.closest('form') : $el.closest('body'), 
      $elemGroup = $parentWrap.find(':radio[name="' + $el.attr('name') + '"]'), 
      e = $.Event(option); 

     if ($el.attr(ch) === true) { 
      checked = true; 
     } 

     $elemGroup.not($el).each(function() { 

      var $el = $(this), 
       $parent = $(this).closest('.radio'); 

      $parent.removeClass(ch) && $el.removeAttr(ch); 

     }); 

     $parent[checkAction ? 'addClass' : 'removeClass'](ch) && checkAction ? $el.attr(ch, ch) : $el.removeAttr(ch); 
     $el.trigger(e); 

     if (checked !== $el.attr(ch)) { 
      $el.trigger('change'); 
     } 

    } 

}; 

/* RADIO PLUGIN DEFINITION 
* ======================== */ 

var old = $.fn.radio; 

$.fn.radio = function (option) { 

    return this.each(function() { 

     var $this = $(this), 
      data = $this.data('radio'), 
      options = $.extend({}, $.fn.radio.defaults, $this.data(), typeof option === 'object' && option); 

     if (!data) { 
      $this.data('radio', (data = new Radio(this, options))); 
     } 

     if (option === 'toggle') { 
      data.toggle(); 
     } 

     if (option === 'check' || option === 'uncheck') { 
      data.setCheck(option); 
     } else if (option) { 
      data.setState(); 
     } 

    }); 

}; 

$.fn.radio.defaults = { 
    template: '<span class="icons"><span class="first-icon fui-radio-unchecked"></span><span class="second-icon fui-radio-checked"></span></span>' 
}; 

/* RADIO NO CONFLICT 
* ================== */ 

$.fn.radio.noConflict = function() { 

    $.fn.radio = old; 
    return this; 

}; 

/* RADIO DATA-API 
* =============== */ 

$('.radio').live('click', '[data-toggle^=radio], .radio', function (e) { 

    var $radio = $(e.target); 

    if (e.target.tagName !== "A") { 

     e && e.preventDefault() && e.stopPropagation(); 
     if (!$radio.hasClass('radio')) { 
      $radio = $radio.closest('.radio'); 
     } 

     $radio.find(':radio').radio('toggle'); 

    } 

}); 

$(function() { 

    $('[data-toggle="radio"]').each(function() { 
     var $radio = $(this); 
     $radio.radio(); 
    }); 

}); 

}(jQuery)); 

ответ

3

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

Вы можете использовать другую версию на той же странице, так нет необходимости обновлять существующий код:

<!-- load jQuery version 1.9.0 --> 
<script src="jquery-1.9.0.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var $jQuery1_9 = $.noConflict(true);// Here you must need to pass true 
            //else it will only free $ variable 
            //and using jQuery with blow libraries 
            //cause conflict 
</script> 

//you must load second library later after initializing 
//first instance of version and freeup jQuery keyword 
//else jQuery keyword will 
//cause conflict it you uplaoded both files. 

<!-- load jQuery version 1.10.0 --> 
<script src="jquery-1.10.0.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var $jQuery1_10 = $.noConflict(true); 
</script> 

//so now here $ and jQuery both cannot be used 

//using $jQuery1_10 will call version 1.10.0 library code 
$jQuery1_10("div p").show(); 

//using $jQuery1_9 will call version 1.9.0 library code 
$jQuery1_9("div p").show(); 
+0

я понятия не имел об этом. Ухоженная. – skmasq

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