1. Heim
  2. jQuery EasyUI Anwendung - Erstellen Sie RSS-Feed Reader

Das beste jQuery EasyUI Anwendung - Erstellen Sie RSS-Feed Reader-Tutorial im Jahr 2024. In diesem Tutorial können Sie Download von jQuery EasyUI Beispiele, lernen

jQuery EasyUI Anwendung - Erstellen Sie RSS-Feed Reader

In diesem Tutorial werden wir einen RSS-Reader von jQuery EasyUI Rahmen erstellen.

Wir werden die folgenden Plug-ins verwenden:

  • Layout: eine Benutzeroberfläche Anwendungen erstellen.
  • Datagrid: Anzeige RSS-Feed-Liste.
  • Baum: Anzeige Zufuhrkanal.

Schritt 1: Erstellen Layout (Layout) 

& Lt; body class = "easyui-Layout" & gt;
	<Div region = "nördlich" border = "false" class = "rtitle">
		jQuery EasyUI RSS Reader Demo
	</ Div>
	<Div region = "westlich" title = "Kanäle Baum" split = "true" border = "false" style = "width: 200px; Hintergrund: #EAFDFF;">
		<Ul id = "t-Kanäle" url = "data / channels.json"> </ ul>
	</ Div>
	<Div region = "center" border = "false">
		<Div class = "easyui-Layout" fit = "true">
			<Div region = "nördlich" 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 field = "title" width = "100"> Titel </ th>
							<Th Feld = "description" width = "200"> Beschreibung </ th>
							<Th Feld = "pubdate" width = "80"> Veröffentlichungsdatum </ th>
						</ Tr>
					</ Thead>
				</ Table>
			</ Div>
			<Div region = "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;

Schritt 2: Data Grid (Datagrid) Ereignisse zu behandeln

Hier müssen wir mit einigen der Ereignisse durch den Benutzer ausgelöst beschäftigen. 

$ ( '# Dg'). Datagrid ({
	onSelect: function (Index, Zeile) {
		. $ ( '# Cc') attr ( 'src', row.link);
	},
	onLoadSuccess: function () {
		var rows = $ (this) .datagrid ( 'getRows');
		if (rows.length) {
			$ (This) .datagrid ( 'selectRow', 0);
		}
	}
});

In diesem Beispiel wird "onSelect 'Ereignis, um die Inhalte des Feeds angezeigt werden, die erste Zeile use' onLoadSuccess 'Ereignis auszuwählen.

Schritt 3: Der Menübaum (Baum) Prozessierungsereignisse

Wenn der Menübaum (Baum) Daten geladen ist, müssen wir den ersten Blattknoten auszuwählen, rufen Sie die Methode 'wählen', um den Knoten zu wählen. Verwenden Sie 'onSelect' Ereignis den ausgewählten Knoten zu bekommen, so dass wir 'url' entsprechend dem Wert zu erhalten. Schließlich fordern wir das Datenraster (Datagrid), um die "Last" Methode, um die Liste der Feed-Daten zu aktualisieren. 

$ ( '# T-Kanäle). Baum ({
	onSelect: function (Knoten) {
		var url = node.attributes.url;
		$ ( '# Dg'). Datagrid ( 'load', {
			url: url
		});
	},
	onLoadSuccess: Funktion (Knoten, Daten) {
		if (data.length) {
			var id = data [0] .children [0] .children [0] .id;
			var n = $ (this) .tree ( 'finden', id);
			$ (Diese) .tree ( 'select', n.target);
		}
	}
});

Download von jQuery EasyUI Beispiele

jeasyui-app-rssreader.zip

Hot Tutorials

Kontaktiere uns

jQuery EasyUI Anwendung - Erstellen Sie RSS-Feed Reader
10/30