Простой пример использования шаблона jQuery
Простой пример использования шаблонов jQuery. Они помогают форматировать вывод полученных данных (например, через AJAX). Или можно использовать специально подготовленные данные. Урок содержит две части. В первой форматируется набор фотографий. Во второй - набор статей. Шаблоны будут изменяться "на лету".
Разметка HTML
В разметке присутствует два элемента div
. Один будет трансформирован в галерею, а второй - в список статей.
<!DOCTYPE html> <html lang="ru" > <head> <meta charset="utf-8" /> <title>Шаблоны jQuery | Материалы сайта RUSELLER.COM</title> <link href="/css/main.css" rel="stylesheet" type="text/css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> <script type="text/javascript" src="/js/script.js"></script> </head> <body> <div class="container" id="container"> <h2>Пример фотогалереи</h2> <div class="gallery" id="gallery"></div> <hr /> <h2>Статьи</h2> <div class="articles" id="articles"></div> </div> </body> </html>
CSS
Код CSS формирует внешний вид используемых элементов.
/* Стили страницы */ *{ margin:0; padding:0; } body { background-color:#bababa; color:#fff; font:14px/1.3 Arial,sans-serif; } footer { background-color:#212121; bottom:0; box-shadow: 0 -1px 2px #111111; -moz-box-shadow: 0 -1px 2px #111111; -webkit-box-shadow: 0 -1px 2px #111111; display:block; height:70px; left:0; position:fixed; width:100%; z-index:100; } footer h2{ font-size:22px; font-weight:normal; left:50%; margin-left:-400px; padding:22px 0; position:absolute; width:540px; } footer a.stuts,a.stuts:visited{ border:none; text-decoration:none; color:#fcfcfc; font-size:14px; left:50%; line-height:31px; margin:23px 0 0 110px; position:absolute; top:0; } footer .stuts span { font-size:22px; font-weight:bold; margin-left:5px; } .container { background:#ddd; color:#000; margin:20px auto 100px; padding:20px; position:relative; width:700px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow:1px 1px 5px #111; -moz-box-shadow:1px 1px 5px #111; -webkit-box-shadow:1px 1px 5px #111; } .container h2 { margin-bottom:20px; text-align:center; } /* Стили гао=лереии css3 */ .gallery { width:610px; margin:10px auto; position:relative; } .gallery a { display:block; height:100px; position:relative; width:133px; } .gallery a img { border:5px solid #fff; cursor:pointer; display:block; height:100%; left:0px; position:absolute; top:0px; width:100%; z-index:1; -moz-user-select: none; -khtml-user-select: none; user-select: none; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-transition-property:width, height, top, bottom, left, right, z-index, border; -webkit-transition-duration:0.5s; -moz-transition-property:width, height, top, bottom, left, right, z-index, border; -moz-transition-duration:0.5s; -o-transition-property:width, height, top, bottom, left, right, z-index, border; -o-transition-duration:0.5s; transition-property:width, height, top, bottom, left, right, z-index, border; transition-duration:0.5s; } .gallery a:focus img { border:15px solid #fff; cursor:default; height:250%; position:absolute; width:250%; z-index:25; top:0px; right:0px; box-shadow:1px 1px 5px #888; -moz-box-shadow:1px 1px 5px #888; -webkit-box-shadow:1px 1px 5px #888; -webkit-transition-property:width, height, top, bottom, left, right, z-index, border; -webkit-transition-duration:0.5s; -moz-transition-property:width, height, top, bottom, left, right, z-index, border; -moz-transition-duration:0.5s; -o-transition-property:width, height, top, bottom, left, right, z-index, border; -o-transition-duration:0.5s; transition-property:width, height, top, bottom, left, right, z-index, border; transition-duration:0.5s; } /* Правила фокусировки */ .gallery a:focus:nth-child(1) img { top:0px; } .gallery a:focus:nth-child(2) img { top:-100px; } .gallery a:focus:nth-child(3) img { top:-200px; } .gallery a:focus:nth-child(4) img { top:-300px; } /* Дополнительный перекрывающий слой */ .gallery .close { background:transparent; cursor:pointer; display:none; height:270px; left:0px; position:absolute; top:0px; width:300px; z-index:30; } .gallery a:focus ~ .close { display:block; } /* Статьи */ .articles { overflow:hidden; } .articles > div { border:1px solid #444; float:left; margin:0 1% 10px; width:48%; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow: 0 1px 2px #111111; -moz-box-shadow: 0 1px 2px #111111; -webkit-box-shadow: 0 1px 2px #111111; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .articles div img { cursor:pointer; float:left; margin-right:20px; width:128px; } .articles div div { float:left; margin-top:8px; width:128px; } .articles div div p:nth-child(1) { color:#444; font-size:12px; } .articles div div p:nth-child(2) { font-size:17px; font-weight:bold; } .articles div.sim div p:nth-child(2) { cursor:pointer; }
JavaScript
Сначала определяем массив с информацией об изображениях, который будет использоваться при формировании шаблонов:
var photos = [ { Image: '1.jpg', Date: '02 Апреля 2012', About: 'Описание для 1.jpg' }, { Image: '2.jpg', Date: '03 Апреля 2012', About: 'Описание для 2.jpg' }, { Image: '3.jpg', Date: '04 Апреля 2012', About: 'Описание для 3.jpg' }, { Image: '4.jpg', Date: '05 Апреля 2012', About: 'Описание для 4.jpg' } ];
Затем формируем три разных шаблона, в которых используются данные из массива:
$.template('simplePhotos', '<a tabindex="1"><img src="/images/${Image}"></a>'); $.template('simpleArticles', '<div class="sim"><img src="/images/${Image}"><div><p></p><p>дополнительно</p></div></div>'); $.template('extendedArticles', '<div class="ext"><img src="/images/${Image}"><div><p>${Date}</p><p>${About}</p></div></div>');
Сформированные шаблоны подключаем к элементами разметки с помощью метода tmpl
:
$.tmpl('simplePhotos', photos).appendTo('#gallery'); $.tmpl('simpleArticles', photos ).appendTo('#articles');
А в нужный момент изменяем шаблон на другой:
selectedItem.tmpl = $.template('extendedArticles'); selectedItem.update();
Ничего сложного. Весь код скрипта примера полностью:
var photos = [ { Image: '1.jpg', Date: '02 Апреля 2012', About: 'Описание для 1.jpg' }, { Image: '2.jpg', Date: '03 Апреля 2012', About: 'Описание для 2.jpg' }, { Image: '3.jpg', Date: '04 Апреля 2012', About: 'Описание для 3.jpg' }, { Image: '4.jpg', Date: '05 Апреля 2012', About: 'Описание для 4.jpg' } ]; $(function(){ // Подготовка пользовательского шаблона $.template('simplePhotos', '<a tabindex="1"><img src="/images/${Image}"></a>'); $.template('simpleArticles', '<div class="sim"><img src="/images/${Image}"><div><p></p><p>дополнительно</p></div></div>'); $.template('extendedArticles', '<div class="ext"><img src="/images/${Image}"><div><p>${Date}</p><p>${About}</p></div></div>'); var selectedItem = null; // Выводим фотографии и статьи с помощью подготовленного шаблона $.tmpl('simplePhotos', photos).appendTo('#gallery'); $('<span class="close"></span>').appendTo('#gallery'); $.tmpl('simpleArticles', photos ).appendTo('#articles'); // Обработка события click $('#articles').delegate('.sim', 'click', function () { if (selectedItem) { // Выводим через простой шаблон selectedItem.tmpl = $.template('simpleArticles'); selectedItem.update(); } selectedItem = $.tmplItem(this); // Выводим через расширенный шаблон selectedItem.tmpl = $.template('extendedArticles'); selectedItem.update(); }).delegate( '.ext', 'click', function () { // Выводим через простой шаблон selectedItem.tmpl = $.template('simpleArticles'); selectedItem.update(); selectedItem = null; }); });
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/24im35Xxdxs/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Полезнее знать несколько мудрых правил, которые всегда могли бы служить тебе, чем выучиться многим вещам, для тебя бесполезным Сенека Луций Анней - (1 до н. э. / 1 н. э.- 65 н. э.) - римский государственный деятель, писатель, философ |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.