Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Плагин не работает с Jquery 1.11.3 (https://javascript.ru/forum/dom-window/61470-plagin-ne-rabotaet-s-jquery-1-11-3-a.html)

Лена Лапина 19.02.2016 19:24

Плагин не работает с Jquery 1.11.3
 
Всем привет!
Помогите разобраться.
Есть плагин:

https://fiddle.jshell.net/yesmvqga/


Вот он работает с версией Jquery 1.5.2, но надо заставить работать с 1.11.3
Самое интересное что никаких ошибок не выдает, просто не работает.
Буду рада любой помощи!

Лена Лапина 20.02.2016 12:56

Неужели никто не знает? Подскажите хоть в какую сторону копать...

рони 20.02.2016 18:47

стилизация 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>

Лена Лапина 20.02.2016 21:24

рони,
Спасибо!


Часовой пояс GMT +3, время: 06:59.