Плагин не работает с Jquery 1.11.3
Всем привет!
Помогите разобраться. Есть плагин: https://fiddle.jshell.net/yesmvqga/ Вот он работает с версией Jquery 1.5.2, но надо заставить работать с 1.11.3 Самое интересное что никаких ошибок не выдает, просто не работает. Буду рада любой помощи! |
Неужели никто не знает? Подскажите хоть в какую сторону копать...
|
стилизация checkbox tzCheckbox
Лена Лапина,
bind заменить на on, className заменить на "class", ниже готовый вариант с небольшим изменением css <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .tzCheckBox{ background:url('http://s018.radikal.ru/i514/1602/c8/d08e0325cc93.png') no-repeat right bottom; display:inline-block; min-width:60px; height:33px; white-space:nowrap; position:relative; cursor:pointer; margin-left:14px; border-radius: 18px; padding: 0 18px; margin: 4px; } .tzCheckBox.checked{ background-position:top left; } .tzCheckBox .tzCBContent{ color: white; line-height: 31px; padding-right: 38px; text-align: right; } .tzCheckBox.checked .tzCBContent{ text-align:left; padding:0 0 0 38px; } .tzCBPart{ background:url('background.png') no-repeat left bottom; width:14px; position:absolute; top:0; left:-14px; height:33px; overflow: hidden; } .tzCheckBox.checked .tzCBPart{ background-position:top right; left:auto; right:-14px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script> (function($){ $.fn.tzCheckbox = function(options){ // Default On / Off labels: options = $.extend({ labels : ['ON','OFF'] },options); return this.each(function(){ var originalCheckBox = $(this), labels = []; // Checking for the data-on / data-off HTML5 data attributes: if(originalCheckBox.data('on')){ labels[0] = originalCheckBox.data('on'); labels[1] = originalCheckBox.data('off'); } else labels = options.labels; // Creating the new checkbox markup: var checkBox = $('<span>',{ "class" : 'tzCheckBox '+(this.checked?'checked':''), html: '<span class="tzCBContent">'+labels[this.checked?0:1]+ '</span><span class="tzCBPart"></span>' }); // Inserting the new checkbox, and hiding the original: checkBox.insertAfter(originalCheckBox.hide()); checkBox.click(function(){ checkBox.toggleClass('checked'); var isChecked = checkBox.hasClass('checked'); // Synchronizing the original checkbox: originalCheckBox.attr('checked',isChecked); checkBox.find('.tzCBContent').html(labels[isChecked?0:1]); }); // Listening for changes on the original and affecting the new one: originalCheckBox.on('change',function(){ checkBox.click(); }); }); }; })(jQuery); $(function(){ $('input[type=checkbox]').tzCheckbox({labels:['Enable','Disable']}); }) </script> </head> <body> <div id="page"> <form method="get" action="./"> <ul> <li><label for="ch_effects">Отображение эффектов: </label><input type="checkbox" id="ch_effects" name="ch_effects" data-on="Показать" data-off="Скрыть" /></li> <li><label for="ch_location">Включить captcha: </label><input type="checkbox" id="ch_location" name="ch_location" checked /></li> <li><label for="ch_showsearch">Включить контактную форму: </label><input type="checkbox" id="ch_showsearch" name="ch_showsearch" /></li> <li><label for="ch_emails">Email уведомления: </label><input type="checkbox" id="ch_emails" name="ch_emails" data-on="ДА" data-off="НЕТ" /></li> </ul> </form> </div> </body> </html> |
рони,
Спасибо! |
Часовой пояс GMT +3, время: 06:59. |