2012-06-06 1 views
3

Наш сайт drupal работает с версией jQuery версии 1.2.1, которую мы не обновили.Включите две версии jQuery на странице, не затрагивая старые плагины.

Проблема заключается в следующем:

Нам нужно добавить новый плагин под названием JQuery Tokeninput, но он работает только в последних версиях JQuery. Мы попробовали добавить последнюю версию jQuery со старой версией, но она производит странные результаты.

Мой вопрос в том, как включить последний файл jQuery, не затрагивая старые плагины jQuery?

ответ

6

Способ № 1: (рекомендуется)

Вы могли бы сделать что-то вроде этого:

<script type='text/javascript' src='js/jquery_1.7.1.js'></script> 
<script type='text/javascript'> 
// In case you wonder why we pass the "true" parameter, 
// here is the explanation: 
// - When you use jQuery.noConflict(), it deletes 
//  the "$" global variable. 
// - When you use jQuery.noConflict(true), it also 
//  deletes the "jQuery" global variable. 
var $jq = jQuery.noConflict(true); 
</script> 
<script type='text/javascript' src='js/jquery_1.2.1.js'></script> 

И таким образом, когда вы хотите что-то сделал с новой версией JQuery вместо $ использования $jq.

$jq('.selector').on('click', function(){ 
    //do something 
}); 

Способ № 2: (может сломаться вещи на вашем сайте - не рекомендуется)

В вашем template.php файле:

<?php 
function {theme_name}_preprocess(&$vars, $hook) { 
if (arg(0) != 'admin' && $hook == "page") { 
// Get an array of all JavaScripts that have been added 
$javascript = drupal_add_js(NULL, NULL, 'header'); 

// Remove the original jQuery library 
unset($javascript['core']['misc/jquery.js']); 

// Add in our new jQuery library 
// We do it this way to keep the includes in the same order 
$core = array(
//Alternative jQuery 
drupal_get_path('theme', '{theme_name}').'/js/libs/jquery-1.7.1.min.js' => array(
'cache' => TRUE, 
'defer' => FALSE, 
) 
); 

// Merge back into the array of core JavaScripts 
$javascript['core'] = array_merge($javascript['core'], $core); 

// Rerender the block of JavaScripts 
$vars['scripts'] = drupal_get_js(NULL, $javascript); 
} 
} 

Обязательно делать это только на внешнем интерфейсе вашего сайта. Это может испортить панели инструментов администратора, если они зависят от версии jQuery от Drupal.

+0

Второй способ хорош. Однако первый способ может сломать ваш сайт. Существует причина, по которой модуль «jQuery Update» получает версию 1.3. * На d6. –

+0

Спасибо за ваше предложение. Я обновил свой ответ, чтобы рекомендовать лучшее решение. –

+0

Также используйте 'jQuery.noConflict (true)', в противном случае две версии jQuery будут сталкиваться :-). 'jQuery.noConflict()' просто удаляет переменную '$', передавая параметр 'true', также удаляет переменную' jQuery'. –

0

Просто, чтобы вы знали, есть jQuery update module, который будет обновлять версии jQuery для вас, без необходимости его кодировать. Посмотрите на него, если это интересно, но я не думаю, что модуль хранит старую версию jQuery, а заменяет ее новой.

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

+0

Вы правы, он заменяет его, что в основном не то, о чем попросил ОП. Обновление jQuery велико, но только если у вас нет сайта MASSIVE с загрузкой старых плагинов и нет места для тестирования регрессии (sob). –

1

Следующий сценарий ...

  • полностью обратную совместимость с уже существующими скриптами

  • не должны иметь каких-либо побочных эффектов (очевидный побочный эффект добавления дополнительного JS скачать кроме)

  • позволяет любые версии jQuery в любом порядке - у вас может быть «по умолчанию» старая версия jQuery и th e «дополнительная» - более новая версия, или наоборот.

Как использовать 2 версии JQuery на той же странице

<!-- IMPORTANT: ORDER is vital. Do not change the order of the following. --> 

<script src="//code.jquery.com/jquery-1.4.2.min.js"></script> 
<script> 
    // Save original jQuery version to another variable 
    var $Original = jQuery.noConflict(true); 
</script> 

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<script> 
    // Save new jQuery version to another variable 
    var $v1_11_0 = jQuery.noConflict(true); 

    // Replace the original jquery version on $ and jQuery so pre-existing scripts don't break 
    // No need to declare "var" here since the $ and jQuery still exist as "undefined" 
    $ = $Original; 
    jQuery = $Original; 

    // Optional: Here I'm saving new jQuery version as a method of "$" -- it keeps it more organized (in my opinion) 
    $.v1_11_0 = $v1_11_0; 
</script> 

в действии здесь:

http://jsfiddle.net/dd94h/

Вот весь HTML, который вы можете оставить в html-файл для тестирования

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQuery within jQuery</title> 
    <style media="all" type="text/css"> 
     h1 span { font-weight: normal; } 
    </style> 

    <!-- IMPORTANT: ORDER is vital. Do not change the order of the following. --> 

    <script src="//code.jquery.com/jquery-1.4.2.min.js"></script> 
    <script> 
     // Save original jQuery version to another variable 
     var $Original = jQuery.noConflict(true); 
    </script> 

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script> 
     // Save new jQuery version to another variable 
     var $v1_11_0 = jQuery.noConflict(true); 

     // Replace the original jquery version on $ and jQuery so pre-existing scripts don't break 
     // No need to declare "var" here since the $ and jQuery still exist as "undefined" 
     $ = $Original; 
     jQuery = $Original; 

     // Optional: Here I'm saving new jQuery version as a method of "$" -- it keeps it more organized (in my opinion) 
     $.v1_11_0 = $v1_11_0; 
    </script> 
</head> 
<body> 
<h1>Default jQuery: <span id="default-jquery">Loading...</span></h1> 
<h1>Additional jQuery: <span id="additional-jquery">Loading...</span></h1> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id felis quam. Morbi ultrices nisi vel odio vestibulum nec faucibus diam congue. Etiam cursus, turpis id rutrum adipiscing, ligula justo rhoncus ipsum, sed posuere diam orci vel mi. Etiam condimentum tincidunt metus, non dictum ligula hendrerit et. Nulla facilisi. Aenean eleifend volutpat nibh, eu tempor nulla auctor ac. Proin ultrices cursus scelerisque. Curabitur sem sapien, tempus et dictum nec, viverra vel odio. Nulla ullamcorper nisl a dolor laoreet eu eleifend tellus semper. Curabitur vitae sodales nisl. Donec tortor urna, viverra sed luctus in, elementum sit amet turpis.</p> 

<script> 
    // Continue to use "$" for the original jQuery version 
    $(document).ready(function(){ 
     $('#default-jquery').text($().jquery); 
    }); 

    // Use $.v1_11_0(...) for the newly-added version 
    $.v1_11_0(document).ready(function(){ 
     $.v1_11_0('#additional-jquery').text($.v1_11_0().jquery); 
    }); 
</script> 
</body> 
</html> 

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

  • Нет связанных вопросов^_^