Как в jquery подгрузить данные из облако
Перейти к содержимому

Как в jquery подгрузить данные из облако

  • автор:

Подгрузка данных jQuery

Сделай вместо load другой метод подгрузки данных, например так:

$.get("ajax/test.html", function (data) < $("#load_msg_cont").append(data); >); 

Тогда данные спокойно можно добавить через append к уже имеющимся.

Отслеживать
ответ дан 13 июл 2022 в 10:30
Алексей Шиманский Алексей Шиманский
72.3k 12 12 золотых знаков 92 92 серебряных знака 180 180 бронзовых знаков
о, благодарю, то что нужно
13 июл 2022 в 10:33

  • javascript
  • html
  • jquery
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.14.4854

Динамические данные в jQuery Mobile с помощью jQuery Templates

Вышла уже четвертая альфа jQuery Mobile, сделавшая фреймворк более-менее стабильным и удобным в использовании. Единственное, чего пока сильно не хватает — хорошей документации. Например, сейчас там описан только стандартный workflow показывающий переходы по JQM страницам. Но что делать, если вы хотите загружать данные динамически?
Статья подразумевает, что у вас есть хотя бы небольшие представления о том, что такое javascript, как работает jQuery и JQM.

Инструменты

Итак, задача простая: забрать данные с помощью XHR и показать их пользователю. Для начала попробуем посмотреть, что есть в нашем распоряжении. Это jQuery и jQuery Mobile, который по сути является расширением jQuery, адаптирующим контент для мобильных устройств. Самый простой вариант будет выглядеть как-то так:

$. get ( ‘/data/url’ , function ( data ) <
for ( var item in data ) <
$ ( «#content» ) . append ( «

» + item + «

» ) ;
>
> ) ;

И хотя в данном примере все просто, на деле этот подход потребует кучу усилий, строк кода, и поэтому не является лучшим вариантом. Было бы гораздо проще, если бы мы могли просто отдать подлученные данные какой-то функции, показать темплейт и получить красивый HTML. И тут нам на помощь приходят jQuery Templates, ведь именно это они и делают.

Пробуем

Итак, попробуем написать страницу, которая будет динамически получать какие-нибудь данные и показывать их нам с помощью JQM. Чтобы не писать свой сервер-функции-API, возьмем пример из документации по функции $.getJSON(), который забирает данные из Flickr’а и выглядит следующим образом:

$. getJSON ( «api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?» ,
<
tags : «cat» ,
tagmode : «any» ,
format : «json»
> ,
function ( data ) <
$. each ( data. items , function ( i , item ) <
$ ( «» ) . attr ( «src» , item . media . m ) . appendTo ( «#images» ) ;
if ( i == 3 ) return false ;
> ) ;
> ) ;

Конечно, все что находится внутри function(data)<> нам не нужно, мы будем менять это на темплейты.

Готовим площадку

Для начала посмотрим, что приходит от сервиса с помощью console.log(data). Ниже приведен сокращенный листинг интересущей нас части.

Данный темплейт будет выводить превью картинки из Flickr’а, описание как главные текст и теги как подтекст. Стоит отметить, что jQuery Templates является очень мощной библиотекой, позволяющей примернять саму jQuery внутри своих темплейтов, например очищять описание от тегов, как это сделано в предыдщуем листинге.

Добавляем основну

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

И чтобы все это работало, добавляем немного javascript. Объяснения, как оно работает, чуть ниже.

  1. // do all stuff on document ready
  2. $ ( document ) . ready ( function ( )
  3. $ ( «#load-data» ) . click ( function ( )
  4. // show loading indicator
  5. $. mobile . pageLoading ( ) ;
  6. $. getJSON ( «api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?» ,
  7. tags : «cat» ,
  8. tagmode : «any» ,
  9. format : «json»
  10. > ,
  11. function ( data )
  12. // render data into templates and append to list
  13. $ ( «#dataTemplate» ) . tmpl ( data. items ) . appendTo ( «#data-listholder» ) ;
  14. // refresh list view
  15. $ ( «#data-listholder» ) . listview ( «refresh» ) ;
  16. // hide loading indicator
  17. $. mobile . pageLoading ( true ) ;
  18. > ) ;
  19. > ) ;
  20. > ) ;

Строки 1-3 вам должны быть уже знакомы — после загрузки страницы мы вешаем event listener на нашу кнопку на нажатие. По нажатию происходит следующее: сначала функция pageLoading() показывает красивый индикатор загрузки. Потом происходит запрос к Flickr’у, который получает наши данные. После получения данных, с помощью jQuery выбирается элемент DOM, содержащий наш темплейт и используется функция tmpl(), которая с помощью этого темплейта создает HTML на база массива items из полученных данных. Созданный HTML с помощью append() добавляется к нашему пустому списку. Если просто добавить данные к списку, то мы получим довольно некрасивый HTML (можете попробовать закомментировать строку 17 в js коде и запросить данные), потому что jQuery Mobile отрисовывает все после загрузки страницы, либо по запросу скрипта. Поэтому мы должны сказать, что хотим обновить наш список с помощью listview(‘refresh’). После этого, с помощью функции pageLoading(true) прячется индикатор загрузки. И мы видим (в данном случае не совсем) аккуратный список.
Вот и все, мы динамически загрузили и показали данные с помощью jQuery Mobile

Заключение

Полный исходный код может быть найден на GitHub’е. Подробное описание jQuery Templates можно найти на сайте jQuery в соответствующем разделе. Вопросы можно и нужно задавать, постараюсь ответить на все.

  • jquery mobile
  • jquery templates
  • ajax

Необычное облако тегов с jQuery плагином xdCloudTags

Необычное облако тегов с jquery плагином xdCloudTags

Доброго времени суток! Представляю Вашему внимаю свою разработку jquery плагин xdCloudTags. Который делает из обычного облака тегов, что-то похожее на то, что вы видите слева.

Плагин подцепляется к обычному облаку тегов и производит с ним различные манипуляции, случайное вращение, компактную расстановку. Все, что нужно для подключения плагина это скачать архив с плагином xdCloudTags, распаковать его в нужную категорию и подключить к странице два файла

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

Желающие могут посмотреть online demo либо на самом блоге, слева. Также Вы можете скачать исходные файлы.

Оставлять комментарии могут только зарегистрированные пользователи

Комментарии

# admi 17.08.2012 04:23

Спасибо. Есть несколько багов. Слева вертикальный тег из двух слов («полезный скрипт») залез на комментарии, да и на демо странице некоторые теги накладываются друг на друга.

Облако тегов на jQuery

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

Ниже представлен более наглядный и подробный пример создания облака тегов с помощью jQCloud:

   jQCloud Example     

jQCloud Example

Вот собственно и все что нужно для создания облака тегов на вашем сайте с пользованием jQuery плагина jQCloud, но как и все в нашей жизни этот плагин не идеален, для того что бы облако тегов отобразилось на сайте без проблем блок — контейнер облака тегов должен обязательно быть видимым и иметь не нулевой размер.

Параметры тегов:

Для каждого тега в массиве тегов вам нужно обязательно указать следующие обязательные параметры тега:

  • text (string): отображаемый текст тега
  • weight (number): число (целое или с плавающей запятой) которое определяет относительную важность тега (например, количество материалов отмеченных данным тегом и т.д.). Диапазон значений может быть произвольным в последствии все значения будут линейно отображены на дискретной шкале от 1 до 10.

Необязательные параметры тегов:

  • html (object): объект указывающий html атрибуты элемента тега (например ). С помощъю данного свойства для тега может быть установлен любой html атрибут кроме атрибута ID
  • link (string или object): если параметр установлен, то текст тега будет заключен в html ссылку (тег ). Если параметр link является строкой, то он будет ссылкой (значением атрибута href тега ), кроме того параметр link может быть объектом указывающим атрибуты для тега (например: )
  • afterWordRender (function): функция обратного вызова, которая будет вызвана после отображения тега. Ссылка this в функции указывает на jQuery объект тега в который заключен текст тега.
  • handlers (object): объект обработчиков событий которые будут добавлены к элементу тега (например: >)

Параметры облака тегов:

Метод jQCloud принимает объект, содержащий настройки для облака тегов в качестве второго аргумента:

$("#example").jQCloud(word_list, < width: 300, height: 200 >);

Все параметры облака тегов являются не обязательными, ниже представлен список возможных параметров облака тегов:

  • width (number): Ширина блока — контейнера облака тегов. По умолчанию это значение равно исходной ширине блока — контейнера облака тегов
  • width (number): Высота блока — контейнера облака тегов. По умолчанию это значение равно исходной высоте блока — контейнера облака тегов.
  • center (object): x и у координаты центра облака тегов, по отношению к размерам блока — контейнера облака тегов (например: ). По умолчанию центр блока — контейнера облака тегов.
  • afterCloudRender (function): функция обратного вызова которая будет вызвана после того как все облако тегов будет показано.
  • delayedMode (boolean): Если true, тего показываются один за другим с небольшой задержкой между показом. Это предотвращает подвисание браузера при отображении большого количества облака тегов. По умолчанию delayedMode true, если количество тегов более 50.
  • shape (string): Форма облака тегов. По умолчанию — elliptic, но параметр может быть установлен как rectangular для отображения облака тегов прямоугольной формы.

Пользовательская таблица стилей:

Облако тегов jQCloud генерируется на основе чистого HTML кода, так что вы можете создать свой стиль оформления облака тегов с помощью CSS. При вызове $ («#example»). JQCloud (…) к блоку — контейнеру облака тегов добавляется класс «jqcloud», что позволяет легко настроить облако тегов с помощью CSS. Таблица стилей в файле jqcloud.css выступает в качестве примера и основы на которой вы можете создать свой собственный стиль оформления облака тегов, определяющий размеры и внешний вид тегов в облаке.

При создании пользовательских стилей, выполните следующие рекомендации:

  • Всегда указывайте размеры блока — контейнера облака тегов (div.jqcloud в jqcloud.css).
  • Атрибут «position» в CSS блока — контейнера должен быть задан и отличается от «static» (если этот атрибут имеет значение «static», то jQCloud заменит его на значение «relative»).
  • Определение стиля тегов (цвет, шрифт, размер и т.д.) это очень просто: текст тегов находится в html теге с десятью уровнями важности, которые соответствуют следующим классам (в порядке убывания значимости): W10, W9, W8, W7, W6, w5, w4, w3, w2, w1.

Это все что я могу рассказать вам о данном плагине, поэтому как говорится «В добрый путь!» устанавливайте его на совой сайт и пользуйтесь на здоровье.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *