1. Home
  2. Aplikacja jQuery EasyUI - Tworzenie RSS Feed Reader

Najlepszy samouczek Aplikacja jQuery EasyUI - Tworzenie RSS Feed Reader W 2024 r. W tym samouczku możesz dowiedzieć się Pobierz przykłady jQuery EasyUI,

Aplikacja jQuery EasyUI - Tworzenie RSS Feed Reader

W tym tutorialu, będziemy tworzyć czytnik RSS przez jQuery EasyUI ramy.

Będziemy używać następujących wtyczek:

  • Układ: Tworzenie aplikacji interfejsu użytkownika.
  • DataGrid: lista Kanał RSS wyświetlacza.
  • Drzewo: Wyświetlacz kanału RSS.

Krok 1: Tworzenie Layout (Układ) 

& Lt; body class = "easyui-layout" & gt;
	<Kraina Div = "północ" border = "false" class = "rtitle">
		jQuery EasyUI RSS Reader Demo
	</ Div>
	<Kraina Div = "West" title = "Kanały Drzewo" split = "true" border = "false" style = "width: 200px; background: #EAFDFF;">
		<Ul id = "t-channels" url = "data / channels.json"> </ ul>
	</ Div>
	<Kraina Div = "center" border = "false">
		<Div class = "easyui-layout" fit = "true">
			<Kraina Div = "północ" split = "true" border = "false" style = "height: 200px">
				<Table id = "DG" 
						url = "get_feed.php" border = "false" rownumbers = "true"
						fit = "true" fitColumns = "true" singleSelect = "true">
					<THEAD>
						<Tr>
							<Th pole = "title" width = "100"> Tytuł </ th>
							<Pole Th = "description" width = "200"> Opis </ th>
							<Th pole = "pubDate" width = "80"> Publish Date </ th>
						</ Tr>
					</ THEAD>
				</ Table>
			</ Div>
			<Kraina Div = "center" border = "false" style = "overflow: hidden">
				<Iframe id = "cc" scrolling = "auto" frameborder = "0" style = "width: 100%; height: 100%"> </ iframe>
			</ Div>
		</ Div>
	</ Div>
& Lt; / body & gt;

Krok 2: Dane Siatka (DataGrid) do obsługi zdarzeń

Tutaj mamy do czynienia z jednymi z wydarzeń wywołanych przez użytkownika. 

$ ( '# Dg "). DataGrid ({
	onSelect: function (indeksowe, wiersz) {
		. $ ( '# DW ") attr (' src ', row.link);
	}
	onLoadSuccess: function () {
		var rows = $ (this) .datagrid ( ''); GetRows
		if (rows.length) {
			$ (This) .datagrid ( "selectRow", 0);
		}
	}
});

W tym przykładzie użyto zdarzenia '' onSelect wyświetlać zawartość paszy, aby wybrać pierwsze użycie wiersza zdarzenia 'onLoadSuccess'.

Krok 3: Drzewo menu (drzewo) przetwarzania zdarzeń

Gdy menu drzewa (drzewo) dane zostały załadowane, musimy wybrać pierwszy węzeł liścia, należy wywołać metodę "Wybierz", aby wybrać węzeł. Zdarzenie Korzystając '' onSelect dostać wybranego węzła, dzięki czemu możemy uzyskać 'url' odpowiadającej wartości. Wreszcie, nazywamy siatki danych (DataGrid) ten "ciężar" metodę, aby odświeżyć listę danych paszowych. 

$ ( '# T-channels "). Drzewo ({
	onSelect: function (node) {
		var url = node.attributes.url;
		$ ( '# Dg "). DataGrid (" obciążenie ", {
			URL: URL
		});
	}
	onLoadSuccess: function (węzeł dane) {
		if (data.length) {
			var id = data [0] .children [0] .children [0] .ID;
			var n = $ (this) .tree ( "znaleźć", id);
			$ (This) .tree ( 'select', n.target);
		}
	}
});

Pobierz przykłady jQuery EasyUI

jeasyui-app-rssreader.zip

Hot Tutorials

Contact US

Aplikacja jQuery EasyUI - Tworzenie RSS Feed Reader
10/30