jQueryのEasyUIアプリケーション - RSSフィードリーダーを作成します。
このチュートリアルでは、jQueryのEasyUIフレームワークによって、RSSリーダーを作成します。
我々は、以下のプラグインを使用します。
- レイアウト：ユーザー・インターフェース・アプリケーションを作成します。
- データグリッド：表示RSSフィードの一覧。
- ツリー：ディスプレイ供給路。
ステップ1：レイアウト（レイアウト）を作成します
＆Ltを、身体クラス= "easyuiレイアウト」＆GT; <div領域= "北"国境= "false"をクラス= "rtitle"> jQueryのEasyUI RSSリーダーデモ </ DIV> <div領域= "西"タイトル= "チャンネルツリー"スプリット= "true"の国境= "false"のスタイル= "幅：200pxの;背景：#EAFDFF;"> <ULのid = "T-チャンネル" URL = "データ/ channels.json"> </ ulの> </ DIV> <div領域= "センター"国境= "false"に> <DIVクラス= "easyuiレイアウト「フィット="真 "> <div領域= "北"スプリット= "true"の国境= "false"のスタイル= "高さ：200pxの"> <表のID = "DG" URL = "get_feed.php"国境= "false"をrownumbers = "true"を フィット= "true"をfitColumns = "true"をsingleSelect = "真"> <THEAD> <TR> <Thのフィールド= "タイトル"幅= "100">タイトル</目> <Thのフィールド= "説明"幅= "200">説明</目> <Thのフィールド= "pubDateの"幅= "80"> <目/>日付を公開 </ TR> </ THEAD> </表> </ DIV> <div領域= "センター"国境= "false"のスタイル= "オーバーフロー：隠されました"> <インラインフレームのid = "CC"スクロール= "auto"のFRAMEBORDER = "0"スタイル= "幅：100％;高さ：100％"> </ iframe>の </ DIV> </ DIV> </ DIV> ＆Ltの; /ボディ＆GT;
ステップ2：データグリッド（DataGridの）イベントを処理します
ここでは、ユーザによって起動されるイベントの一部に対処する必要があります。
$（ '＃Dgを'）。データグリッド（{
onSelect：機能（インデックス、行）{
。$（ '＃のC-C'）のattr（ 'SRC'、row.link）;
}、
onLoadSuccess：関数（）{
VAR行= $（この）.datagrid（ 'GETROWS'）;
{（rows.length）の場合
$（この）.datagrid（ 'selectRow'、0）;
}
}
}）;
この例では、最初の行の使用」onLoadSuccess 'イベントを選択するには、フィードの内容を表示する」にonSelect'イベントを使用しています。
ステップ3：メニューツリー（木）のイベントを処理します
メニューツリー（木）のデータがロードされたとき、私たちは、最初のリーフノードを選択するノードを選択する」を選択 'メソッドを呼び出す必要があります。 我々は値に対応する「URL」を得ることができるように、選択したノードを取得するために使用する "にonSelect 'イベント。 最後に、我々はデータグリッド（DataGridの）フィードデータのリストを更新するための「負荷」メソッドを呼び出します。
$（ '＃のT-チャンネル'）。ツリー（{
onSelect：機能（ノード）{
するvar URL = node.attributes.url。
$（ '＃Dgを'）。データグリッド（ '負荷'、{
URL：URL
}）;
}、
onLoadSuccess：機能（ノード、データ）{
{（data.length）の場合
するvar idは=データ[0] .children [0] .children [0] .ID。
VARのn = $（この）.tree（ '見つける'、ID）;
$（この）.tree（、n.target」を選択します '）;
}
}
}）;