Как запустить разные версии jQuery на одной странице?

Моя компания приобрела продукт, который отображает элемент управления ASP.NET на странице. Этот элемент управления использует jQuery 1.2.3 и добавляет тег script на страницу для ссылки на него. Разработчики этого элемента управления не будут поддерживать использование элемента управления, если оно каким-либо образом изменено (включая модификацию ссылки на другую версию jQuery).

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

Как я могу разрешить купленному элементу управления использовать jQuery 1.2.3 и новую настраиваемую разработку для использования jQuery 1.3? Также из любопытства, что, если бы мы использовали дополнительный элемент управления, который должен был ссылаться на еще одну версию jQuery?

Ответ 1

Вы можете добиться этого, выполнив свою версию jQuery в режиме без конфликтов. Режим "Без конфликтов" является типичным решением для работы jQuery на странице с другими фреймами, такими как prototype, и также может быть использован здесь поскольку он по сути именяет каждую версию jQuery, которую вы загружаете.

<script src="jQuery1.3.js"></script>
<script>
    jq13 = jQuery.noConflict(true);
</script>

<!-- original author jquery version -->
<script src="jQuery1.2.3.js"></script>

Это изменение будет означать, что любой из материалов jQuery, который вы хотите использовать, нужно будет вызывать с помощью jq13, а не $, например.

jq13("#id").hide();

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

Также из любопытства, что, если мы будем использовать дополнительный контроль что нужно было указать еще одну версию jQuery?

Если вам нужно добавить еще одну версию jQuery, вы можете расширить ее:

<script src="jQuery1.3.js"></script>
<script>
    jq13 = jQuery.noConflict(true);
</script>
<script src="jQuery1.3.1.js"></script>
<script>
    jq131 = jQuery.noConflict(true);
</script>

<!-- original author jquery version -->
<script src="jQuery1.2.3.js"></script>

Переменные jq13 и jq131 будут использоваться для тех функций, которые вам нужны.

Важно, чтобы jQuery, используемый исходным разработчиком, загружался последним - исходный разработчик, вероятно, написал свой код в предположении, что $() будет использовать свою версию jQuery. Если вы загрузите другую версию после их использования, $ будет "схвачен" последней загружаемой версией, что будет означать исходный код разработчика, запущенный в последней версии библиотеки, что делает noConflicts несколько избыточным!

Ответ 2

Как сказал ConroyP, вы можете сделать это с помощью jQuery.noConflict, но не забывайте var при объявлении переменной. Вот так.

<script src="jQuery1.3.js"></script>
<script>
    var jq13 = jQuery.noConflict(true);
</script>

<!-- original author jquery version -->
<script src="jQuery1.2.3.js"></script>

Вы можете подключить все $к jq13, добавив (jq13) после функции }). как это

(function($) {
 ... 
})(jq13);

Ответ 3

Кажется, что порядок не имеет значения... например: http://gist.github.com/136686. Выход консоли находится наверху, и все версии, похоже, находятся в правильных местах.

Ответ 4

сделать его ложным для работы

var jq16 = $.noConflict(false);

Ответ 5

Во второй версии объявите переменную как $.noConflict(true). И используйте объявленную переменную вместо $, используемой в коде jquery. Пожалуйста, проверьте приведенный ниже код: Этот код используется после объявления вторых версий jquery:

<script type="text/javascript">
var jQuery_1_9_1 = $.noConflict(true); function pageLoad(sender, args) {

        var $ddl = jQuery_1_9_1("select[name$=drpClassCode]");
        var $ddl1 = jQuery_1_9_1("select[name$=drpSubContractors]");
        $ddl.select2();
        $ddl1.select2();

        $ddl.bind("change keyup", function () {
            $ddl.fadeIn("slow");


        });

        $ddl.bind("change keyup", function () {
            $ddl1.fadeIn("slow");


        });
    }