JQuery EasyUI приложения - Создание RSS Feed Reader
В этом уроке, мы создадим RSS читателя рамках JQuery EasyUI.
Мы будем использовать следующие плагины:
- Макет: Создание пользовательского интерфейса приложения.
- DataGrid: Показать RSS поток Список.
- Дерево: Дисплей подачи канала.
Шаг 1: Создание макета (Layout)
& Lt; Тело класса = "easyui-макет" & GT; <Div область = "север" граница = "ложно" класс = "rtitle"> Jquery EasyUI RSS Reader Demo </ Div> <Div область = "запад" название = "Каналы Дерево" раскол = "истина" граница = "ложь" стиль = "ширина: 200px; фон: #EAFDFF;"> <Ul ID = "T-каналы" URL = "Данные / channels.json"> </ UL> </ Div> <Div область = "центр" граница = "ложь"> <Div класс = "easyui-макет" подходит = "истинный"> <Div область = "север" раскол = "истина" граница = "ложь" стиль = "высота: 200px"> <Таблица ID = "Д.Г." URL = "get_feed.php" Граница = "ложных" rownumbers = "истина" приспособленный = "истинные" fitColumns = "истина" singleSelect = "истинный"> <THEAD> <Tr> <Th поле = "название" ширина = "100"> Название </ й> <Th поле = "описание" ширина = "200"> Описание </ й> <Th поле = "PubDate" ширина = "80"> Дата публикации </ й> </ TR> </ THEAD> </ Table> </ Div> <Div область = "центр" граница = "ложь" стиль = "переполнение: скрытый"> <Iframe ID = "сс" скроллинг = "Авто" frameborder = "0" стиль = "ширина: 100%; высота: 100%"> </ IFRAME> </ Div> </ Div> </ Div> & Lt; / корпус & GT;
Шаг 2: Data Grid (DataGrid) для обработки событий
Здесь мы имеем дело с некоторыми событиями, запускаемыми пользователем.
$ ( '# Dg'). Datagrid ({
onSelect: функция (индекс, строки) {
. $ ( '# Cc') Attr ( 'SRC', row.link);
},
onLoadSuccess: функция () {
вар строки = $ (это) .datagrid ( 'GetRows');
если (rows.length) {
$ (Это) .datagrid ( 'selectRow', 0);
}
}
});
В этом примере используется событие 'onSelect', чтобы отобразить содержимое корма, чтобы выбрать первое использование линии событие 'onLoadSuccess'.
Шаг 3: Дерево меню (дерево) обработки событий
Когда данные дерева меню (Tree) была загружена, нам нужно выбрать первый узел листа, вызовите метод 'выберите', чтобы выбрать узел. Событие Используйте 'onSelect', чтобы получить выбранный узел, так что мы можем получить 'URL', соответствующее значению. И, наконец, мы называем сетки данных (DataGrid) метод "нагрузки", чтобы обновить список данных кормов.
$ ( '# Т-каналы »). Дерево ({
onSelect: функция (узел) {
вар URL = node.attributes.url;
$ ( '# Dg'). Datagrid ( 'нагрузки', {
URL: URL
});
},
onLoadSuccess: функция (узел, данные) {
если (data.length) {
вар ID = данные [0] .children [0] .children [0] .id;
вар п = $ (это) .tree ( "найти", идентификатор);
$ (Это) .tree ( 'выберите', n.target);
}
}
});