Часто
в шаблонах dle не работают скрипты, слайдер или другие функции, если присутствует библиотека Mootools, происходит
проблема конфликт jQuery библиотеки c Mootools. При подключении первой начинает выбивать ошибки (спасибо IE8, опера на конфликт просто не обратила внимания), и, думаю, работать будет через раз, как повезет.
Лучше использовать какую-нибудь одну библиотеку. Да и вообще - Mootools многие вещи позволяет так же реализовать плюс размер меньше... Но если уж так неохота сидеть, перегонять jQuery'вский скрипт на Mootools, заодно и повыкидывать лишние килобайты, и если jQuery кода относительно мало , то решение этой проблемы можно найти в этой статье.
Решения проблемы jQuery конфликта c Mootools на Dle1. Для это обязательно библиотеки должны быть выше всех скриптов!
Библиотека Mootools должна быть выше библиотеки jQuery и мы получаем что то вроде этого:
Общий вид:
<script type="text/javascript" src="/js/mootools.js"></script><script type="text/javascript" src="/js/jquery.js"></script>
Для тех у кого DLE:
<script type="text/javascript" src="/templates/Default/js/mootools.js"></script>{headers}
Маленький пример изменения:
<script type="text/javascript">jQuery.noConflict();</script>
Для это берем все знаки доллара $ и заменяем на jQuery. То есть если у нас была такая функция:
$(document).ready(function(){$("#idv p.testclass").click(function(){ /* .... */ }}
после замены будет выглядеть:
jQuery.noConflict();jQuery(document).ready(function(){ jQuery("#idv p.testclass").click(function() { /* .... */ }}
Расширенный пример изменения скрипта.
До:
(function($){ $.fn.ata = function(options){ options = $.extend({ imer:100 }, options);return this.each(function(i){ var $t = $(this), t = this; t.style.resize = 'none'; t.style.overflow = 'hidden'; var tVal = t.value; t.style.height = '34px'; t.value = "WnWnW"; var H3 = t.scrollHeight; t.value = "WnWnWnW"; var H4 = t.scrollHeight; var H = H4 - H3; t.value = tVal; tVal = null; $t.before("<div id="ataa_"+i+""></div>"); var $c = $('#ataa_'+i), c = $c.get(0); c.style.padding = '0px'; c.style.margin = '0px'; $t.appendTo($c); $t.bind('focus', function(){ t.startUpdating() }).bind('blur', function(){ t.stopUpdating() }); this.heightUpdate = function(){ if (tVal != t.value){ tVal = t.value; t.style.height = '0px'; var tH = t.scrollHeight + H; t.style.height = tH + 'px'; c.style.height = 'auto'; c.style.height = c.offsetHeight + 'px'; } } this.startUpdating = function(){ t.interval = window.setInterval(function(){ t.heightUpdate() }, options.timer); } this.stopUpdating = function(){ clearInterval(t.interval); }$(function(){ t.heightUpdate() }); }); };})($);
После:
(function(jQuery){ jQuery.fn.ata = function(options){ options = jQuery.extend({ timer:100 }, options);return this.each(function(i){var $t = jQuery(this), t = this; t.style.resize = 'none'; t.style.overflow = 'hidden';var tVal = t.value; t.style.height = '34px'; t.value = "WnWnW";var H3 = t.scrollHeight; t.value = "WnWnWnW"; var H4 = t.scrollHeight;var H = H4 - H3; t.value = tVal; tVal = null;$t.before("<div id="ataa_"+i+""></div>"); var $c = jQuery('#ataa_'+i), c = $c.get(0); c.style.padding = '0px'; c.style.margin = '0px'; $t.appendTo($c); $t.bind('focus', function(){ t.startUpdating() }).bind('blur', function(){ t.stopUpdating() }); this.heightUpdate = function(){ if (tVal != t.value){ tVal = t.value; t.style.height = '0px'; var tH = t.scrollHeight + H; t.style.height = tH + 'px'; c.style.height = 'auto'; c.style.height = c.offsetHeight + 'px';} } this.startUpdating = function(){ t.interval = window.setInterval(function(){ t.heightUpdate() }, options.timer); }this.stopUpdating = function(){ clearInterval(t.interval);} jQuery(function(){ t.heightUpdate() }); }); };})(jQuery);
В целом у нас получился такой код в шаблоне:
<html><head><script type="text/javascript" src="/js/mootools.js"></script><script type="text/javascript" src="/js/jquery.js"></script><script type="text/javascript">jQuery.noConflict();</script><script type="text/javascript">(function(jQuery){ jQuery.fn.ata = function(options){options = jQuery.extend({timer:100}, options);return this.each(function(i){var $t = jQuery(this), t = this; t.style.resize = 'none'; t.style.overflow = 'hidden'; var tVal = t.value; t.style.height = '34px'; t.value = "WnWnW"; var H3 = t.scrollHeight; t.value = "WnWnWnW"; var H4 = t.scrollHeight;var H = H4 - H3; t.value = tVal; tVal = null; $t.before("<div id="ataa_"+i+""></div>");var $c = jQuery('#ataa_'+i), c = $c.get(0); c.style.padding = '0px'; c.style.margin = '0px';$t.appendTo($c); $t.bind('focus', function(){ t.startUpdating() }).bind('blur', function(){ t.stopUpdating() }); this.heightUpdate = function(){ if (tVal != t.value){ tVal = t.value; t.style.height = '0px';var tH = t.scrollHeight + H; t.style.height = tH + 'px'; c.style.height = 'auto'; c.style.height = c.offsetHeight + 'px';} }this.startUpdating = function(){ t.interval = window.setInterval(function(){ t.heightUpdate()}, options.timer); }this.stopUpdating = function(){ clearInterval(t.interval); }jQuery(function(){ t.heightUpdate() }); }); };})(jQuery);</script></head><body></body></html>
Вот собственно и все.
Предлагаем
на сайте dle https://dle9.com/ решения проблемы jQuery конфликта c Mootools
druzhim-jquery-c-mootools.zip [5,42 Kb] (cкачиваний: 71)
Комментарии 5