У меня накопилось много наработок на jQuery. На своих сайтах я много использую сторонних плагинов для того же jQuery. Теперь я перехожу на использование замечательного фреймворк - Dojo.
Возник вопрос - возможно ли подключать плагины для jQuery в Dojo?
Вот что у меня получилось что бы "завести", c использованием Dojo AMD, плагин Фотораму (JQuery Fotorama) - фотоальбом, галерея, слайдер изображений:
В первых строчках подключаем Dojo и стили для Fotorama.
Далее настраиваем Dojo:
В этом файле мы подключаем jQuery, ждем пока всё прогрузится и загружаем plugin Fotorama.
Дополнительно: в этом же файле можно красиво подгрузить css стили для библиотеки.
Демо
Подсвечивание и оформление кода было сделано по статье Подсветка кода в блоге
Возник вопрос - возможно ли подключать плагины для jQuery в Dojo?
Вот что у меня получилось что бы "завести", c использованием Dojo AMD, плагин Фотораму (JQuery Fotorama) - фотоальбом, галерея, слайдер изображений:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://fotoramajs.com/fotorama/jsfiddle/fotorama.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js"
data-dojo-config="has:{'dojo-firebug': true}, baseUrl: '/dojo_jquery/',parseOnLoad: true, async: false, tlmSiblingOfDojo: false,packages: [
{ name: 'jquery', location: 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.0' },
{ name: 'my', location: './.' },
{ name: 'fotorama', location: 'http://fotoramajs.com/fotorama/jsfiddle' }
]"
></script>
</head>
<body>
<div data-dojo-type="my/fotorama" class="fotorama">
<img src="http://fotoramajs.com/use/code/basic/i/09.jpg">
<img src="http://fotoramajs.com/use/code/basic/i/10.jpg">
</div>
</body>
</html>В первых строчках подключаем Dojo и стили для Fotorama.
Далее настраиваем Dojo:
- baseUrl - где мы находимся
- parseOnLoad - запустить поиск Dojo элементов на странице после её загрузки
- И самое главное блок packages:
- Если запрашивается использование библиотеки 'jquery' то загрузить её по адресу 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.0'
- Если запрашивается использование библиотеки 'my' то загрузить её по адресу './.'
- Если запрашивается использование библиотеки 'fotorama' то загрузить её по адресу 'http://fotoramajs.com/fotorama/jsfiddle'
На странице стандартно создаем структуру тегов для Фоторамы, но указываем что это объект Dojo задав атрибут data-dojo-type="my/fotorama"
Теперь нам надо описать этот самый объект fotorama. Для этого создаем файл fotorama.js в папке /dojo_jquery/ с содержанием:
define(["jquery/jquery!", "dojo/domReady!" , "fotorama/fotorama"], function(){
return {};
});В этом файле мы подключаем jQuery, ждем пока всё прогрузится и загружаем plugin Fotorama.
Дополнительно: в этом же файле можно красиво подгрузить css стили для библиотеки.
Демо
Подсвечивание и оформление кода было сделано по статье Подсветка кода в блоге
Комментариев нет:
Отправить комментарий