MVC4 Classic

Transcription

1 更 新 グレープシティ 株 式 会 社

2 目 次 はじめに 14 MVC の 基 礎 14 MVC 4 での Wijmo の 操 作 MVC Classic プロジェクトの 作 成 NuGet を 介 した Wijmo 参 照 の 追 加 / 更 新 jquery と jquery UI の 概 要 18 jquery 構 文 18 jquery セレクタ 18 jquery 要 素 セレクタ 18 jquery 属 性 セレクタ jquery CSS セレクタ 19 ドキュメントレディ 関 数 19 jquery オプション jquery および jquery UI のリソース 20 MVC 4 スキャフォールディングの 使 用 21 手 順 1:MVC Classic Web アプリケーションの 作 成 手 順 2:モデルの 追 加 手 順 3:Entity Framework への 参 照 の 追 加 27 手 順 4:コントローラーの 追 加 手 順 5:プロジェクトの 実 行 MVC Classic ウィジェット 30 Wijaccordion Wijaccordion チュートリアル 31 手 順 1:ビューの 設 定 手 順 2:ウィジェットの 初 期 化 32 手 順 3:プロジェクトの 実 行 アコーディオンへのアニメーションの 適 用 コンテンツペインの 拡 張 方 向 の 変 更 Hover 状 態 でのアコーディオンペインの 拡 張 複 数 のペインを 同 時 に 開 く Chart ウィジェット 39 1 Copyright GrapeCity inc. All rights reserved.

3 Wijbarchart Wijbarchart チュートリアル 40 手 順 1:ビューの 設 定 40 手 順 2:ウィジェットの 初 期 化 手 順 3:プロジェクトの 実 行 Wijbarchart タスク 別 ヘルプ 43 アニメーションのタスク 軸 のタスク X 軸 と Y 軸 の 定 義 46 軸 ラベルのスタイル 設 定 回 転 後 の 軸 タイトルの 下 方 移 動 47 軸 ラベルの 回 転 凡 例 の 定 義 とオプションの 設 定 ヘッダーの 定 義 とオプションの 設 定 フッターの 定 義 とオプションの 設 定 50 ツールチップの 定 義 SeriesList の 定 義 51 系 列 のホバースタイルの 定 義 Wijbubblechart Wijbubblechart チュートリアル 53 手 順 1:ビューの 設 定 手 順 2:ウィジェットの 初 期 化 54 手 順 3:プロジェクトの 実 行 Wijbubblechart タスク 別 ヘルプ 56 X 軸 と Y 軸 の 定 義 56 軸 ラベルのスタイル 設 定 回 転 後 の 軸 タイトルの 下 方 移 動 軸 ラベルの 回 転 凡 例 の 定 義 とオプションの 設 定 ヘッダーの 定 義 とオプションの 設 定 フッターの 定 義 とオプションの 設 定 61 ツールチップの 定 義 SeriesList の 定 義 62 2 Copyright GrapeCity inc. All rights reserved.

4 系 列 のホバースタイルの 定 義 Wijcompositechart 63 Wijcompositechart チュートリアル 手 順 1:ビューの 設 定 64 手 順 2:ウィジェットの 初 期 化 手 順 3:プロジェクトの 実 行 Wijcompositechart タスク 別 ヘルプ 69 X 軸 と Y 軸 の 定 義 69 軸 ラベルのスタイル 設 定 回 転 後 の 軸 タイトルの 下 方 移 動 70 軸 ラベルの 回 転 凡 例 の 定 義 とオプションの 設 定 ヘッダーの 定 義 とオプションの 設 定 72 フッターの 定 義 とオプションの 設 定 ツールチップの 定 義 シリーズ 一 覧 の 定 義 Wijlinechart Wijlinechart チュートリアル 76 手 順 1:ビューの 設 定 76 手 順 2:ウィジェットの 初 期 化 手 順 3:プロジェクトの 実 行 Wijlinechart タスク 別 ヘルプ 80 X 軸 と Y 軸 の 定 義 軸 ラベルのスタイル 設 定 回 転 後 の 軸 タイトルの 下 方 移 動 82 軸 ラベルの 回 転 凡 例 の 定 義 とオプションの 設 定 83 ヘッダーの 定 義 とオプションの 設 定 フッターの 定 義 とオプションの 設 定 ツールチップの 定 義 シリーズ 一 覧 の 定 義 系 列 のスタイルの 定 義 87 Wijpiechart Copyright GrapeCity inc. All rights reserved.

5 Wijpiechart チュートリアル 88 手 順 1:ビューの 設 定 88 手 順 2:ウィジェットの 初 期 化 手 順 3:プロジェクトの 実 行 Wijpiechart タスク 別 ヘルプ 91 ドーナツグラフの 作 成 凡 例 の 定 義 とオプションの 設 定 92 ヘッダーの 定 義 とオプションの 設 定 フッターの 定 義 とオプションの 設 定 ツールチップの 定 義 シリーズ 一 覧 の 定 義 Wijscatterchart 96 Wijscatterchart チュートリアル 96 手 順 1:ビューの 設 定 手 順 2:ウィジェットの 初 期 化 手 順 3:プロジェクトの 実 行 Wijscatterchart タスク 別 ヘルプ 101 X 軸 と Y 軸 の 定 義 101 軸 ラベルのスタイル 設 定 凡 例 の 定 義 とオプションの 設 定 102 ヘッダーの 定 義 とオプションの 設 定 フッターの 定 義 とオプションの 設 定 ツールチップの 定 義 シリーズ 一 覧 の 定 義 系 列 のホバースタイルの 定 義 106 Gauge ウィジェット 106 Wijlineargauge Wijlineargauge チュートリアル 107 手 順 1:ビューの 設 定 手 順 2:ウィジェットの 初 期 化 手 順 3:プロジェクトの 実 行 Linear Gauge へのインタラクティブ 機 能 の 追 加 Copyright GrapeCity inc. All rights reserved.

6 線 形 ゲージの 向 きの 設 定 対 数 ゲージの 作 成 線 形 ゲージの 外 観 のカスタマイズ Wijradialgauge Wijradialgauge チュートリアル 119 手 順 1:ビューの 設 定 手 順 2:ウィジェットの 初 期 化 手 順 3:プロジェクトの 実 行 対 数 ゲージの 作 成 実 行 時 の 放 射 状 ゲージのマージンの 設 定 実 行 時 の 放 射 状 ゲージの 位 置 の 設 定 放 射 状 ゲージの 外 観 のカスタマイズ Wijinput 133 Wijinputmask Wijinputmask チュートリアル 手 順 1: ビューの 設 定 136 手 順 2:ウィジェットの 初 期 化 136 手 順 3:プロジェクトの 実 行 137 ドロップダウンリストへのマスクの 追 加 文 字 を 要 求 するマスクの 作 成 138 パスワードと SSN の 入 力 の 非 表 示 化 Wijinputnumber Wijinput number チュートリアル 141 手 順 1:ビューの 設 定 141 手 順 2:ウィジェットの 初 期 化 手 順 3:プロジェクトの 実 行 142 入 力 の 通 貨 書 式 設 定 142 入 力 のパーセント 書 式 設 定 ドロップダウンリストへの 数 値 の 追 加 Wijinputdate Wijinputdate チュートリアル 145 手 順 1:ビューの 設 定 手 順 2:ウィジェットの 初 期 化 Copyright GrapeCity inc. All rights reserved.

7 手 順 3:プロジェクトの 実 行 147 日 付 ピッカーのドロップダウンカレンダーの 作 成 日 付 のドロップダウンリストの 作 成 Wijcalendar Wijcalendar チュートリアル 150 手 順 1:ビューの 設 定 150 手 順 2:ウィジェットの 初 期 化 とカスタマイズ 手 順 3:プロジェクトの 実 行 Wijcalendar タスク 別 ヘルプ 152 カスタム 日 付 の 作 成 ポップアップカレンダーの 作 成 カレンダーの 月 の 完 全 名 と 年 の 表 示 カレンダーの 月 の 省 略 名 と 年 の 表 示 カレンダーの 月 日 と 年 の 表 示 マルチカレンダーの 表 示 外 側 のカレンダーナビゲーションボタンを 使 用 したカレンダーの 移 動 次 のカレンダー 月 のプレビュー カレンダーの 週 番 号 の 選 択 160 カレンダー 月 の 選 択 161 カレンダーの 曜 日 の 選 択 最 小 および 最 大 日 付 範 囲 の 設 定 162 アニメーションオプションの 指 定 Wijcarousel Wijcarousel チュートリアル 165 手 順 1:ビューの 設 定 手 順 2:ウィジェットの 初 期 化 手 順 3:プロジェクトの 実 行 167 カルーセルへのアニメーションの 適 用 カルーセルの 向 きの 設 定 カルーセルのページャスタイルの 設 定 カルーセルへのビデオコンテンツの 取 り 込 み カルーセルコンテンツのプレビュー Wijcombobox Copyright GrapeCity inc. All rights reserved.

8 Wijcombobox チュートリアル 178 手 順 1:ビューの 設 定 手 順 2:ウィジェットの 初 期 化 手 順 3:プロジェクトの 実 行 Wijcombobox タスク 別 ヘルプ 182 ComboBox の 幅 の 変 更 ドロップダウンリストの 位 置 の 変 更 search メソッドを 使 用 してテキストボックスに 入 力 した 文 字 を 検 索 する select イベントを 使 用 してコンボボックスで 選 択 した 項 目 をトリガーする Wijdatepager Wijdatepager チュートリアル 188 手 順 1:ビューの 設 定 188 手 順 2:ウィジェットの 初 期 化 手 順 3:プロジェクトの 実 行 189 DatePager ビュータイプの 設 定 選 択 された 日 付 の 設 定 190 週 の 最 初 の 曜 日 の 設 定 Wijdatasource 191 Wijdatasource チュートリアル 191 手 順 1:ビューの 設 定 手 順 2:ウィジェットの 初 期 化 手 順 3:プロジェクトの 実 行 194 ローカルデータの 読 み 込 み 194 プロキシでリモートデータを 読 み 込 む Wijdialog Wijdialog チュートリアル 196 手 順 1:ビューの 設 定 手 順 2:ウィジェットの 初 期 化 197 手 順 3:プロジェクトの 実 行 外 部 コンテンツの 設 定 198 カスタム HTML コンテンツの 作 成 モーダルダイアログオプションの 使 用 Copyright GrapeCity inc. All rights reserved.

9 アラートダイアログの 作 成 確 認 ダイアログの 作 成 wijdialog のアニメーション 化 Wijeditor Wijeditor チュートリアル 205 手 順 1:ビューの 設 定 手 順 2:ウィジェットの 初 期 化 206 手 順 3:プロジェクトの 実 行 簡 単 なエディタツールバーの 使 用 WijEditor での BBCode の 使 用 Wijeventscalendar Wijeventscalendar チュートリアル 211 手 順 1:ビューの 設 定 211 手 順 2:ウィジェットの 初 期 化 とカスタマイズ 手 順 3:プロジェクトの 実 行 C1EventsCalendar での 開 始 日 の 変 更 C1EventsCalendar のカルチャの 変 更 214 ヘッダーバーの 非 表 示 化 ナビゲーションバーの 非 表 示 化 Wijexpander Wijexpander チュートリアル 217 手 順 1:ビューの 設 定 217 手 順 2:ウィジェットの 初 期 化 手 順 3:プロジェクトの 実 行 218 エクスパンダへのアニメーションの 適 用 拡 張 方 向 の 変 更 外 部 コンテンツの 表 示 Wijgallery Wijgallery チュートリアル 223 手 順 1:ビューの 設 定 手 順 2:ウィジェットの 初 期 化 手 順 3:プロジェクトの 実 行 225 ギャラリーへのアニメーションの 適 用 Copyright GrapeCity inc. All rights reserved.

10 ギャラリーの 向 きの 設 定 ギャラリーのページャの 設 定 ギャラリーへのビデオコンテンツの 取 り 込 み 外 部 ギャラリーコンテンツの 表 示 Wijgrid Wijgrid チュートリアル 手 順 1:モデルの 作 成 237 手 順 2:コントローラーの 作 成 手 順 3:ビューの 作 成 手 順 4:MVC プロジェクトへの Wijmo の 追 加 動 的 データロードの 有 効 化 サーバーでの Wijgrid の 作 成 列 の 日 付 型 の 設 定 グリッドへのデータのロード カスタムデータパーサー 列 バンドの 追 加 ページ 付 けされたグリッドの 作 成 グリッド 選 択 モードの 設 定 グルーピングと 集 計 のカスタマイズ Wijlightbox Wijlightbox チュートリアル 266 手 順 1:ビューの 設 定 手 順 2:ウィジェットの 初 期 化 手 順 3:プロジェクトの 実 行 268 Lightbox のオートプレイ サイズ 変 更 アニメーションの 設 定 ライトボックスでの 外 部 コンテンツとビデオの 表 示 ライトボックスでのキーボードによるナビゲーションの 追 加 ライトボックスへの Play および Pause ボタンの 追 加 ライトボックスでのテキスト 位 置 の 設 定 ライトボックス 遷 移 アニメーションの 設 定 Wijlist Wijlist チュートリアル Copyright GrapeCity inc. All rights reserved.

11 手 順 1: ビューの 設 定 278 手 順 2: ウィジェットの 初 期 化 手 順 3: プロジェクトの 実 行 279 複 数 選 択 Wijmenu Wijmenu チュートリアル 283 手 順 1:モデルの 作 成 手 順 2:コントローラーの 作 成 284 手 順 3:ビューの 作 成 と Wijmo ウィジェットの 追 加 Wijmenu でのカスタムアイコンの 使 用 Wijmenu の 向 きの 変 更 Wijmenu の 関 数 の 設 定 サブメニューの 位 置 の 変 更 Wijmenu のアニメーション 化 Wijpager 295 Wijpager チュートリアル 295 手 順 1: ビューの 設 定 手 順 2:ウィジェットの 初 期 化 296 手 順 3:プロジェクトの 実 行 296 ページングモードの 変 更 296 nextprevious ページング nextpreviousfirstlast ページング 297 numeric ページング numericfirstlast ページング 298 ページ 付 けされたテーブルの 作 成 Wijpopup 304 Wijpopup チュートリアル 304 手 順 1: ビューの 設 定 手 順 2: ウィジェットの 初 期 化 305 手 順 3: プロジェクトの 実 行 ポップアップ 位 置 の 設 定 ポップアップアニメーションの 設 定 Copyright GrapeCity inc. All rights reserved.

12 Wijprogressbar 310 Wijprogressbar チュートリアル 手 順 1:ビューの 設 定 311 手 順 2:ウィジェットの 初 期 化 311 手 順 3:プロジェクトの 実 行 プログレスバーの 進 行 方 向 の 変 更 Wijslider 313 Wijslider チュートリアル 手 順 1:ビューの 設 定 314 手 順 2:ウィジェットの 初 期 化 314 手 順 3: プロジェクトの 実 行 314 Wijslider の 向 きの 変 更 Wijslider の 範 囲 の 設 定 315 Wijslider のドラッグフィルの 動 作 Wijslider へのアニメーションの 適 用 316 Wijsplitter Wijsplitter チュートリアル 317 手 順 1:ビューの 設 定 手 順 2:ウィジェットの 初 期 化 手 順 3:プロジェクトの 実 行 319 フルサイズスプリッタの 作 成 水 平 または 垂 直 スプリッタの 作 成 スプリッタの 位 置 の 設 定 Wijsuperpanel Wijsuperpanel チュートリアル 手 順 1:ビューの 設 定 手 順 2:ウィジェットの 初 期 化 335 手 順 3:プロジェクトの 実 行 Wijsuperpanel タスク 別 ヘルプ 336 クライアント 側 スクロール SuperPanel のアニメーションオプションの 設 定 ドロップダウンリストの 位 置 の 変 更 TextBox に 入 力 された 文 字 を 探 す search メソッドの 使 用 Copyright GrapeCity inc. All rights reserved.

13 ComboBox 内 の 選 択 した 項 目 をトリガーする select イベントの 使 用 Wijtabs Wijtabs チュートリアル 手 順 1:ビューの 設 定 355 手 順 2:ウィジェットの 初 期 化 355 手 順 3:プロジェクトの 実 行 マウスでポイントしたときにタブを 開 く タブ 位 置 の 設 定 タブアニメーションの 設 定 Wijtooltip Wijtooltip チュートリアル 361 手 順 1:ビューの 設 定 手 順 2:ウィジェットの 初 期 化 362 手 順 3:プロジェクトの 実 行 362 Wijtooltip タスク 別 ヘルプ ツールチップの 書 式 設 定 363 モーダルツールチップの 作 成 ツールチップの 位 置 の 変 更 Wijtree Wijtree チュートリアル 366 手 順 1:ビューの 設 定 366 手 順 2:ウィジェットの 初 期 化 手 順 3:プロジェクトの 実 行 367 自 動 縮 小 オプションの 使 用 Expand on Hover オプションの 使 用 allowdrag および allowdrop プロパティの 使 用 カスタムドラッグ&ドロップオプションの 使 用 チェックボックスの 使 用 オブジェクトモデル カスタムノードアイコンの 使 用 Wijupload Wijupload チュートリアル 381 手 順 1:ビューの 設 定 Copyright GrapeCity inc. All rights reserved.

14 手 順 2:ウィジェットの 初 期 化 手 順 3:プロジェクトの 実 行 Wijwizard Wijwizard チュートリアル 385 手 順 1:ビューの 設 定 手 順 2:ウィジェットの 初 期 化 386 手 順 3:プロジェクトの 実 行 Ajax を 介 した Wijwizard コンテンツのロード Wijwizard のオートプレイ Wijwizard を 備 えるページャの 使 用 Wijwizard の 単 純 なビューの 設 定 Wijwizard へのアニメーションの 適 用 Copyright GrapeCity inc. All rights reserved.

15 はじめに Wijmo は MVC 4 上 に 配 置 されています Wijmo は 30 種 類 を 超 える UI ウィジェットの 完 全 なキットであり インタラクティブな メニューから 豊 富 なグラフやグリッドまで 何 でも 備 えています 基 本 的 な jquery を 理 解 されている 場 合 Wijmo を 理 解 されて いる 場 合 あるいは 理 解 されていない 場 合 でも 簡 単 に 習 得 できます Wijmo は マニュアルと 専 門 的 なサポートを 完 備 した 初 めての jquery UI ウィジェットのセットです 手 作 りの 各 ウィジェット には ThemeRoller によるサポートが 付 随 しているので 直 感 的 なデザインインタフェースを 通 じてこの 世 のものと 思 えないくら い 本 当 にすばらしい Web アプリケーションを 作 り 上 げることができます MVC の 基 礎 MVC(Model-View-Controller)は 同 じデータに 対 して 複 数 のビューを 必 要 とするアプリケーションで 一 般 に 使 用 されるデ ザインパターンです MVC パターンでは 個 々のオブジェクトを 次 の3つのカテゴリに 分 離 する 必 要 があります コントローラー:アプリケーションが 受 信 する 要 求 を 処 理 し モデルデータを 取 得 し クライアントに 応 答 を 返 すビューテ ンプレートを 指 定 するクラス モデル:アプリケーションのデータを 表 示 し 検 証 論 理 を 使 用 してそのデータにビジネスルールを 適 用 するクラス ビュー:アプリケーションが HTML 応 答 を 動 的 に 生 成 するために 使 用 するテンプレートファイル MVC の 概 念 は 次 の 図 のように 表 されます 通 常 MVC アプリケーションの 制 御 フローは 次 のようになります 1. ユーザーがイベントをトリガーするように UI をインタラクティブ 操 作 します 2. コントローラーがユーザーのインタラクティブ 操 作 をモデルに 通 知 し アクションを 要 求 します 3. モデルが 要 求 されたアクションを 実 行 します 4. コントローラーがアクションの 結 果 を 表 示 するようビューに 要 求 します 5. ビュー( 複 数 可 )が 新 しいビューを 生 成 するようにモデルにクエリーし モデルからデータを 取 り 込 みます 6. ビューが 結 果 を 表 示 します 7. ただし 以 上 の 手 順 を 実 行 する 前 に ビューを 書 式 設 定 し ComponentOne ウィジェットにアクセスする 方 法 を 理 解 す ると 役 立 つ 場 合 があります 14 Copyright GrapeCity inc. All rights reserved.

16 MVC 4 での Wijmo の 操 作 MVC Classicを 使 用 する 場 合 次 の2つのアプリケーションを 選 択 できます 標 準 の Visual Studio ASP.NET MVC 4 Web アプリケーションを 使 用 するか 当 社 の Wijmo 向 けに 最 適 化 された ASP.NET MVC 4 Wijmo インターネットアプリケーショ ンを 使 用 することができます ASP.NET MVC 4 Wijmo インターネットアプリケーション( MVC Classic プロジェクトの 作 成 を 参 照 )は そのデフォルトの UI に Wijmo コントロールを 使 用 し 必 要 な Wijmo アセンブリはアプリケーションの _Layout.cshtml ページで 参 照 済 みです Wijmo ウィジェットは 常 に Views フォルダにある1つまたは 複 数 のビュー(.cshtml ファイル)の 下 に 追 加 されます MVC 4 ビューに 関 するいくつかの 基 礎 を 復 習 しておくと 便 利 です ビューがユーザーに 表 示 される 前 に コントローラーでビューの return View() ステートメントが 実 行 されます そのビュー のレイアウト 実 際 にはプロジェクトにあるすべてのビューのレイアウトは _ViewStart.cshtml で 指 定 されています _ViewStart.cshtml ファイルは Views フォルダのルートにあります _ViewStart.cshtml ファイルを 開 くと 次 の Razor 構 文 Layout = "~/Views/Shared/_Layout.cshtml"; プロジェクト 全 体 のレイアウトの 一 部 として Wijmo ウィジェットを 表 示 する 場 合 は このページにウィジェットの HTML 要 素 を 追 加 し それを 初 期 化 することができます 実 際 ASP.NET MVC 4 Wijmo インターネットアプリケーションでは いくつかのウィ ジェットがその _Layout.cshtml ファイルですでにレイアウトされています 特 定 のビューにウィジェットを 表 示 する 場 合 は そのビューを 開 き そのページにウィジェットの HTML 要 素 を 追 加 し jquery を 使 用 してそれを 初 期 化 します たとえば 最 初 のページにメニューを 表 示 する 場 合 は 次 のマークアップとスクリプトを _Index.cshtml ファイルに 追 加 するだけです <body> <header> <div class="content-wrapper"> <div class="float-left"> <p class="site-title">@html.actionlink("mvc アプリケーション", "Index", "Home")</p> <div class="float-right"> <nav> <ul id="menu"> <li>hello <li>world </ul> <script type="text/javascript"> $(document).ready(function () { $("#menu").wijmenu(); </script> </nav> </header> </body> このように 簡 単 に 行 えます. 15 Copyright GrapeCity inc. All rights reserved.

17 MVC Classic プロジェクトの 作 成 MVC Classic プロジェクトを 作 成 するには 以 下 の 手 順 を 実 行 します s 1. Microsoft Visual Studio の[ファイル]メニューから [ 新 しいプロジェクト]を 選 択 します [ 新 しいプロジェクト]ダイアロ グボックスが 開 きます 2. テンプレートの[Visual Basic]または[Visual C#]より[Web]を 選 択 します 3. 右 ペインから[ASP.NET MVC 4 Wijmo アプリケーション]を 選 択 します 4. [ 名 前 ] [ 場 所 ] [ソリューション 名 ]フィールドを 設 定 して OK をクリックします 5. 新 しい ASP.NET MVC Wijmo 4 アプリケーションが 作 成 されます Models Views および Controllers フォルダが 含 まれていることがわかります これらのフォルダは Wijmo for MVC のチュートリアルで 使 用 します NuGet を 介 した Wijmo 参 照 の 追 加 / 更 新 最 新 の Wijmo ライブラリは ライブラリと 参 照 を 自 動 的 にプロジェクトに 追 加 する Visual Studio の 拡 張 機 能 である NuGet を 介 して 入 手 できます NuGet のインストール NuGet をインストールするには 次 の 手 順 を 実 行 します 1. に 移 動 し NuGet のインストール をクリックします 2. NuGet.vsix インストーラを 実 行 します クします 3. Visual Studio 拡 張 機 能 インストーラウィンドウで Microsoft Visual Studioが 選 択 されいることを 確 認 し インストール インストール をク リックします 4. インストールが 完 了 したら 閉 じる をクリックします NuGet を 介 した Wijmo 参 照 の 追 加 / 更 新 Wijmo 参 照 を 更 新 またはプロジェクトに 追 加 するには 次 の 手 順 を 実 行 します 16 Copyright GrapeCity inc. All rights reserved.

18 1. 既 存 の MVC Classic プロジェクトを 開 くか または 新 しい MVC Classic プロジェクトを 作 成 します( MVC Classic プロジェクトの 作 成 を 参 照 ) 2. 次 のサイトにて 日 本 語 版 の Wijmo ライブラリの 最 新 バージョンを 確 認 します 3. 次 の 手 順 にて 日 本 語 版 の Wijmo ライブラリの 最 新 バージョンを NuGet から 追 加 します 4. Visual Studio の[ツール] [ツール]メニューから[ライブラリパッケージマネージャ] [パッケージマネージャコンソール]を 選 択 します [パッケージマネージャコンソール]ダイアログボックスが 表 示 されます 5. [パッケージマネージャコンソール]ダイアログボックスで [パッケージソース]ドロップダウンから[NuGet 公 式 パッケージソー ス]を 選 択 し [ [ 既 定 のプロジェクト]ドロップダウンから 参 照 を 追 加 したいプロジェクトを 選 択 します 6. Wijmo Professionalをインストールするには [パッケージマネージャコンソール] [パッケージマネージャコンソール]ダイアログボックスに 次 のコマンドを 実 行 しま す PM> Install-Package jquery.wijmo.pro -Version [パッケージマネージャコンソール]ダイアログボックスでは インストールしたい 任 意 のバージョンを 入 力 できます 17 Copyright GrapeCity inc. All rights reserved.

19 jquery と jquery UI の 概 要 Wijmo ウィジェットは jquery UI ウィジェットを 拡 張 したものであり 置 き 換 わるものではありません jquery UI と Wijmo の 両 方 とも jquery ライブラリの 上 に 構 築 されるので Wijmo に 取 り 組 む 前 に jquery のいくつかの 基 本 概 念 を 学 習 することが 適 切 です このセクションでは jquery と jquery UI の 概 念 の 簡 単 な 概 要 を 示 します さらに 広 範 囲 の 情 報 については jquery および jquery UI のリソース を 参 照 してください jquery 構 文 jquery 構 文 は 開 発 者 が HTML 要 素 を 簡 単 に 選 択 し その 要 素 上 でいくつかのアクションを 実 行 できるように 設 計 されまし た 基 本 構 文 は 次 のとおりです $(selector).action() $references jquery;(selector)は HTML 要 素 ( 複 数 可 )をクエリーし.action()はその 要 素 上 でアクションを 実 行 しま す jquery 構 文 の 例 : $(this).hide(): は 現 在 の 要 素 を 非 表 示 にします $( p ).hide(): はすべての 段 落 を 非 表 示 にします $( p.wow ).hide(): は クラス wow のすべての 段 落 を 非 表 示 にします $( #wow ).hide(): は wow という ID を 持 つ 要 素 を 非 表 示 にします jquery セレクタ jquery の 使 用 を 開 始 する 前 に jquery セレクタの 概 念 を 理 解 することがきわめて 重 要 です jquery セレクタは CSS 構 文 を 利 用 するので 開 発 者 は 効 果 を 適 用 する 要 素 を 正 確 に 選 択 できます これらのセレクタを 使 用 して 属 性 名 タグ 名 ID さら にはコンテンツにより 特 定 の HTML 要 素 または 要 素 のグループを 選 択 できます さまざまなセレクタのタイプを 次 に 示 しま す jquery 要 素 セレクタ jquery では CSS セレクタを 使 用 して 特 定 の HTML 要 素 を 選 択 できます 次 に 例 を 示 します $(this): は 現 在 の HTML 要 素 を 選 択 します $( div ): はすべての <div> 要 素 を 選 択 します $(.super ): は クラス super のすべての 要 素 を 選 択 します $( div.super ): は クラス super のすべての <div> 要 素 を 選 択 します $( #wow ): は ID wow を 持 つ 最 初 の 要 素 を 選 択 します $( div#wow ): は ID wow を 持 つ 最 初 の <div> 要 素 を 選 択 します jquery 属 性 セレクタ HTML 要 素 ではなく 属 性 によって 要 素 を 選 択 する 場 合 は Xpath 式 を 使 用 して 特 定 の 属 性 を 持 つ 要 素 を 選 択 できます 次 に 例 を 示 します $( [href] )は href 属 性 を 持 つすべての 要 素 を 選 択 します $( [href= # ] )は # と 等 しい 値 を 含 む href 属 性 を 持 つすべての 要 素 を 選 択 します 18 Copyright GrapeCity inc. All rights reserved.

20 $( [href!= # ] )は # と 等 しくない 値 を 含 む href 属 性 を 持 つすべての 要 素 を 選 択 します jquery CSS セレクタ HTML 要 素 の CSS プロパティを 変 更 する 場 合 は CSS セレクタを 使 用 することができます たとえば 次 の jquery スクリプタ は すべての <div> 要 素 の 背 景 色 を 赤 色 に 変 更 します $( div ).css( background-color, red ); ドキュメントレディ 関 数 ドキュメントが 完 全 にロードされる 前 に jquery コードが 実 行 されないようにするには $(document).ready 関 数 内 に すべての jquery 関 数 を 配 置 する 必 要 があります 次 に 例 を 示 します $(document).ready(function(){ // ドキュメントの 準 備 が 完 了 したら 何 かを 実 行 してください 希 望 する 場 合 は$(document).ready: 関 数 の 短 縮 版 を 使 用 することもできます 次 に 例 を 示 します $(function() { // ドキュメントの 準 備 が 完 了 したら 何 かを 実 行 してください $(document).ready 関 数 内 にあるすべてのスクリプトは DOM がロードされた 直 後 で ページのコンテンツがロードされ る 前 にロードされます jquery オプション jquery オプションは 単 に 引 数 としてウィジェットに 渡 されるプロパティです 各 Wijmo ウィジェットはデフォルトのオプション が 設 定 されていますが これらのデフォルトをオーバーライドしてウィジェットをカスタマイズする 必 要 がある 場 合 もあります 例 として wijprogressbar ウィジェットにデフォルト 値 100 を 持 つ maxvalue オプションが 設 定 されている 場 合 この 値 を 85 に 変 更 する 必 要 があると 仮 定 します maxvalue オプションをデフォルト 値 から 85 に 変 更 する 場 合 次 に 示 すように wijprogressbar に 引 数 を 渡 すだけです $( #progressbar ).wijprogressbar({ maxvalue: 85 maxvalue オプションを 85 に 設 定 したことで wijprogressbar ウィジェットの 値 範 囲 が 0~85 になります デフォルトでは minvalue プロパティは 0 に 設 定 されているためです minvalue オプションを 25 に 変 更 する 場 合 は maxvalue の 引 数 の 後 ろにカンマを 追 加 し minvalue の 引 数 を 記 述 します 19 Copyright GrapeCity inc. All rights reserved.

21 $( #progressbar ).wijprogressbar({ maxvalue: 85, minvalue: 25 必 要 な 数 のオプションをいくつでもウィジェットに 渡 すことができます ただし カンマを 追 加 することを 忘 れないでください jquery および jquery UI のリソース Tインターネット 上 には すでに 数 百 ページ あるいは 数 千 ページもの jquery UI リソースが 掲 載 されており これらの 豊 富 な 情 報 に 簡 単 に 迷 い 込 んでしまうほどです Wijmo チームは 少 しだけユーザーを 後 押 しするために これからの 学 習 に 役 立 つリ ソースの 一 覧 を 作 成 しました サイト jquery.com jqueryui.com ThemeRoller 説 明 TjQuery ライブラリ プロジェクトの 公 式 ページ このサイトでは 包 括 的 なドキュメント (docs.jquery.com/main_page) からチュートリアル (docs.jquery.com/tutorials)まで あら ゆるドキュメントを 見 つけることができます. jquery UI ウィジェットプロジェクトの 公 式 サイトで jqueryui チームを 訪 問 してください ここ では 少 し 時 間 をとってデモとドキュメント(jqueryui.com/demos/)をご 覧 ください. ThemeRoller アプリケーションを 使 用 して Wijmo ウィジェットをスキンしてください 既 存 の テーマを 使 用 または 変 更 するか 独 自 のテーマを 作 成 します これは 簡 単 です しゃれた テーマを 作 成 するために グラフィックデザイナに 依 頼 して 作 成 する 必 要 はありません 20 Copyright GrapeCity inc. All rights reserved.

22 MVC 4 スキャフォールディングの 使 用 Wijmo で MVC 4 スキャフォールディングを 使 用 して 豊 富 な Web アプリケーションをすばやく 作 成 できます スキャフォール ディングは CRUD( 作 成 読 み 取 り 更 新 削 除 ) 操 作 と 検 証 を 備 えたコントローラーとビューを 自 動 的 に 作 成 することにより すべての 作 業 を 行 います Wijmo は Wijmo ウィジェットとスタイルを 使 用 して さらにアプリケーションを 拡 張 します 以 下 の チュートリアルでは スキャフォールディングを 使 用 して MVC Classic Web アプリケーションを 作 成 する 手 順 を 段 階 的 に 説 明 し ます 注 意 :: スキャフォールディングを 使 用 するには 最 新 の ASP.NET MVC 4 更 新 版 を 入 手 する 必 要 があります 更 新 版 をダウンロードしてください. 手 順 1:MVC Classic Web アプリケーションの 作 成 まず ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します Microsoft が 提 供 するデフォルトプロジェクトテンプレートに 基 づく 組 み 込 みビューによって 自 動 的 にスタイルが 設 定 されます 以 下 の 手 順 を 実 行 します 1. Microsoft Visual Studio の[ファイル]メニューから [ 新 しいプロジェクト]を 選 択 します [ 新 しいプロジェクト]ダイアロ グボックスが 開 きます 2. テンプレートの[Visual Basic]または[Visual C#]より[Web]を 選 択 します 3. 右 ペインから[ASP.NET MVC 4 Wijmo アプリケーション]を 選 択 します 4. [ 名 前 ] [ 場 所 ] [ソリューション 名 ]フィールドを 設 定 して OK をクリックします 5. 新 しい ASP.NET MVC Wijmo 4 アプリケーションが 作 成 されます Models Views および Controllers フォルダが 含 まれていることがわかります これらのフォルダは Wijmo for MVC のチュートリアルで 使 用 します 6. ソリューションエクスプローラで [Views] [Shared]ノードを 展 開 し _Layout.cshtml を 開 きます メニュー ボタン チェックボックス ラジオボタン および 簡 単 な 入 力 ボックスを Wijmo ウィジェットに 変 える いくつかの JavaScript がす でにページに 追 加 されていることに 注 意 してください <script type="text/javascript"> $(document).ready(function () { $("#menu").wijmenu(); $(".button").button(); $(":input[type='submit']").button(); $(":input[type='checkbox']").wijcheckbox(); $(":input[type='radio']").wijradio(); $(":input[type='text'],:input[type='password'], textarea").not(":wijmo-wijinputnumber"). not(":wijmo-wijinputmask").not(":wijmo-wijinputdate"). wijtextbox(); $("select").not(":wijmo-wijcombobox"). wijdropdown(); </script> 7. <ul id="menu"> 要 素 を 探 し マークアップでの 現 在 の <li> リスト 項 目 を 置 き 換 えてページをセットアップします: <li>@html.actionlink("ホーム", "Index", "Home") <li>@html.actionlink("リスト", "Index", "TahDoList") <ul> <li>@html.actionlink("リストの 追 加 ", "Create", "TahDoList") </ul> 21 Copyright GrapeCity inc. All rights reserved.

23 項 目 ", "Index", "TahDoItem") <ul> 項 目 の 追 加 ", "Create", "TahDoItem") </ul> 情 報 ", "About", "Home") このマークアップは 後 で 追 加 するコントローラーにリンクする[リスト]および[ 項 目 ]メニュー 項 目 を 追 加 します 次 の 手 順 で は プロジェクトにモデルを 追 加 します 手 順 2:モデルの 追 加 TahDoList および TahDoItem の POCO(Plain Old CLR Object)モデルを 作 成 します. 1. ソリューションエクスプローラの Models フォルダで [ 追 加 ] [クラス]を 選 択 します 2. クラスに ToDo.cs という 名 前 を 付 けて 追 加 をクリックします 3. データの 注 釈 を 使 用 してモデルを 定 義 できるように 次 の 指 示 文 を 追 加 します Visual Basic コードの 書 き 方 Visual Basic Imports using System.ComponentModel.DataAnnotations C# コードの 書 き 方 C# using System.ComponentModel.DataAnnotations; 4. 次 のストアドプロシージャを 追 加 します 最 初 のクラスが TahDoList に 名 前 変 更 されていることに 注 意 してください Visual Basic コードの 書 き 方 Visual Basic Public Class TahDoList <Editable(False)> _ Public Property Id() As Integer Get Return m_id End Get Set m_id = Value End Set End Property Private m_id As Integer <Required> _ Public Property Title() As String Get 22 Copyright GrapeCity inc. All rights reserved.

24 Return m_title End Get Set m_title = Value End Set End Property Private m_title As String <Display(Name := "Date Created")> _ Public Property CreatedAt() As System.Nullable(Of DateTime) Get Return m_createdat End Get Set m_createdat = Value End Set End Property Private m_createdat As System.Nullable(Of DateTime) <Range(0, 5), UIHint("IntSlider")> _ Public Property Priority() As Integer Get Return m_priority End Get Set m_priority = Value End Set End Property Private m_priority As Integer <Range(0, )> _ Public Property Cost() As Decimal Get Return m_cost End Get Set m_cost = Value End Set End Property Private m_cost As Decimal <DataType(DataType.MultilineText)> _ Public Property Summary() As String Get Return m_summary End Get Set m_summary = Value End Set End Property Private m_summary As String Public Property Done() As Boolean Get Return m_done End Get Set m_done = Value 23 Copyright GrapeCity inc. All rights reserved.

25 End Set End Property Private m_done As Boolean <Display(Name := "Date Completed")> _ Public Property DoneAt() As System.Nullable(Of DateTime) Get Return m_doneat End Get Set m_doneat = Value End Set End Property Private m_doneat As System.Nullable(Of DateTime) Public Property TahDoItems() As ICollection(Of TahDoItem) Get Return m_tahdoitems End Get Set m_tahdoitems = Value End Set End Property Private m_tahdoitems As ICollection(Of TahDoItem) End Class Public Class TahDoItem <Editable(False)> _ Public Property Id() As Integer Get Return m_id End Get Set m_id = Value End Set End Property Private m_id As Integer <Required> _ Public Property Title() As String Get Return m_title End Get Set m_title = Value End Set End Property Private m_title As String <Display(Name := "Date Created")> _ Public Property CreatedAt() As System.Nullable(Of DateTime) Get Return m_createdat End Get Set m_createdat = Value End Set 24 Copyright GrapeCity inc. All rights reserved.

26 End Property Private m_createdat As System.Nullable(Of DateTime) <Range(0, 5), UIHint("IntSlider")> _ Public Property Priority() As Integer Get Return m_priority End Get Set m_priority = Value End Set End Property Private m_priority As Integer <DataType(DataType.MultilineText)> _ Public Property Note() As String Get Return m_note End Get Set m_note = Value End Set End Property Private m_note As String Public Property TahDoListId() As Integer Get Return m_tahdolistid End Get Set m_tahdolistid = Value End Set End Property Private m_tahdolistid As Integer Public Property TahDoList() As TahDoList Get Return m_tahdolist End Get Set m_tahdolist = Value End Set End Property Private m_tahdolist As TahDoList Public Property Done() As Boolean Get Return m_done End Get Set m_done = Value End Set End Property Private m_done As Boolean <Display(Name := "Date Completed")> _ Public Property DoneAt() As System.Nullable(Of DateTime) Get Return m_doneat 25 Copyright GrapeCity inc. All rights reserved.

27 End Get Set m_doneat = Value End Set End Property Private m_doneat As System.Nullable(Of DateTime) End Class C# コードの 書 き 方 C# public class TahDoList { [Editable(false)] public int Id { get; set; [Required] public string Title { get; set; [Display(Name = "Date Created")] public DateTime? CreatedAt { get; set; [Range(0, 5), UIHint("IntSlider")] public int Priority { get; set; [Range(0, )] public decimal Cost { get; set; [DataType(DataType.MultilineText)] public string Summary { get; set; public bool Done { get; set; [Display(Name = "Date Completed")] public DateTime? DoneAt { get; set; public ICollection TahDoItems { get; set; public class TahDoItem { [Editable(false)] public int Id { get; set; [Required] public string Title { get; set; [Display(Name = "Date Created")] public DateTime? CreatedAt { get; set; [Range(0, 5), UIHint("IntSlider")] public int Priority { get; set; [DataType(DataType.MultilineText)] public string Note { get; set; public int TahDoListId { get; set; public TahDoList TahDoList { get; set; public bool Done { get; set; [Display(Name = "Date Completed")] public DateTime? DoneAt { get; set; 5. アプリケーションをリビルドします これで スキャフォールディングがオブジェクトモデルを 認 識 できるようになります 次 の 手 順 では Entity Framework に 参 照 を 追 加 します 26 Copyright GrapeCity inc. All rights reserved.

28 手 順 3:Entity Framework への 参 照 の 追 加 EntityFramework.SqlServerCompact ライブラリに 参 照 を 追 加 することで データベースなしでオブジェクトモデルを 定 義 で きます プロジェクトを 実 行 すると データベースは 動 的 に 作 成 されます この 例 では Entity Framework 4 で Code First アプローチを 使 用 します このアプローチでは デザイナまたは XML マッピ ングファイルなしで 開 発 できます 1. プロジェクト 名 を 右 クリックして[ライブラリパッケージ 参 照 の 追 加 ]を 選 択 します 2. インストール 済 みパッケージの 下 で オンライン を 選 択 し [オンライン 検 索 ]テキストボックスに EntityFramework.SqlServerCompact を 入 力 します 3. インストール をクリックし インストールが 完 了 したら 同 意 する をクリックします 4. 閉 じる をクリックして [ライブラリパッケージ 参 照 の 追 加 ]ダイアログボックスを 閉 じます 5. ソリューションエクスプローラで プロジェクト 名 を 右 クリックして[ビルド]を 選 択 し オブジェクトモデルがコンパイルされ ていることを 確 認 します 次 の 手 順 では プロジェクトにコントローラーを 追 加 します 手 順 4:コントローラーの 追 加 1. 次 の 手 順 では TahDoList および TahDoItem のコントローラーを 追 加 します ソリューションエクスプローラ で Controllers フォルダを 右 クリックし [ [ 追 加 ] [コントローラー]を 選 択 します [コントローラーの 追 加 ]ダイアログ ボックスが 開 きます 2. コントローラー 名 (たとえば TahDoListController)を 入 力 します 3. [スキャフォールディングオプション]ボックスの[テンプレート]で [Entity Framework を 使 用 した 読 み 取 り/ 書 き 込 み 操 作 とビューのある MVC コントローラーー]を 選 択 します 4. [モデル クラス] で モデル 用 に 厳 密 に 型 指 定 された TahDoList(TahDo.Models)を 選 択 します 5. [データ コンテキスト クラス] で < 新 しいデータコンテクスト > を 選 択 します [ 新 しいデータコンテクスト]ダイアログ ボックスが 開 きます 27 Copyright GrapeCity inc. All rights reserved.

29 6. OK をクリックし 追 加 をクリックします Visual Studio は モデルに 対 して 実 行 するすべての CRUD 操 作 のため のコントローラーとビューを 含 む 必 要 なすべての 要 素 を 生 成 します データアクセス 用 の Entity Framework へのリ ンクも 自 動 的 に 作 成 されます 7. TahDoItemController 用 のコントローラーも 同 様 に 追 加 できます 名 前 用 の TahDoItemController および モデル クラス 用 の TahDoItem(TahDo.Models)を 使 用 して 手 順 1~6を 実 行 します これで プロジェクトを 実 行 して データベースを 動 的 に 作 成 し 新 しい 項 目 を 追 加 できるようになりました 手 順 5:プロジェクトの 実 行 [F5]を 押 して プロジェクトを 実 行 します 次 のような 表 示 になります 1. メニューから [リスト] [リスト] [リストの[リストの 追 加 ]を 選 択 します 2. ウィジェットを 使 用 してテキストを 追 加 し 日 付 ピッカー スライダ および 数 値 入 力 を 使 用 します データベースが 動 的 に 作 成 されます 28 Copyright GrapeCity inc. All rights reserved.

30 29 Copyright GrapeCity inc. All rights reserved.

31 MVC Classic ウィジェット このセクションでは 各 ウィジェットの 紹 介 を 行 います MVC プロジェクトで 各 ウィジェットの 操 作 を 可 能 にするマークアップとス クリプトの 例 を 含 みます Wijaccordion wijaccordion ウィジェットは 一 度 に1つのペインの 情 報 を 表 示 する 一 連 のコンテンツペインで 構 成 されるメニュー UI です ペ インを 単 に 選 択 してそのペインを 拡 張 すると 他 のペインは 縮 小 したままで ユーザーインタフェースが 自 動 的 に 構 成 され 画 面 の 実 面 積 が 最 適 化 されて ユーザーは 指 定 した 情 報 を 閲 覧 できます wijaccordion ウィジェットは jquery.wijmo.wijaccordion.js ライブラリによって 作 成 されます アコーディオンを 表 示 するビューの.cshtml ファイルを 開 きます 次 のマークアップのように アコーディオン DOM 要 素 を 追 加 します <div id="accordion"> ac <h1>ヘッダ1</h1> <div>lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac lacus nibh viverra faucibus. Mauris non vestibulum dui <h1>ヘッダ2</h1> <div>vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus. <h1>ヘッダ3</h1> <div>sed facilisis placerat commodo. Nam odio dolor, viverra eu blandit in, hendrerit eu arcu. In hac habitasse platea dictumst. ここで wijaccordion ウィジェットを 初 期 化 する 必 要 があります これを 行 うには 次 のスクリプトを.cshtml ファイルに 追 加 でき ます <script type="text/javascript"> $(document).ready(function () { $("#accordion").wijaccordion(); </script> プロジェクトを 実 行 すると アコーディオンは 次 のような 表 示 になります 30 Copyright GrapeCity inc. All rights reserved.

32 関 連 項 目 : wijaccordion の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください wijaccordion Wijaccordion チュートリアル 以 下 のチュートリアルでは クリックすると 展 開 して 指 定 されたコンテンツを 表 示 するペイン 構 成 のアコーディオンを 含 む MVC プロジェクトの 作 成 手 順 について 説 明 します このトピックでは ASP.NET MVC 4 Wijmo インターネットアプリケーションを 作 成 済 みであることが 前 提 となります 作 成 してい ない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では マークアップを 追 加 し コンテンツをアコーディオンのペインに 追 加 します 以 下 を 実 行 します 1. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックして ファイル を 開 きます 2. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します このマークアップはアコーディオンのコンテンツをペー ジに 追 加 します <div id="accordion"> <div> <h3> <a href="#"> 手 順 1</a></h3> <div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac lacus ac nibh viverra faucibus. Mauris non vestibulum dui </p> <div> <h3> <a href="#"> 手 順 2</a></h3> <div> <p> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus. </p> <div> <h3> <a href="#"> 手 順 3</a></h3> <div> <p> Sed facilisis placerat commodo. Nam odio dolor, viverra eu blandit in, hendrerit eu arcu. In hac habitasse platea 31 Copyright GrapeCity inc. All rights reserved.

33 dictumst. </p> <div> <h3> <a href="#"> 手 順 4</a></h3> <div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac lacus ac nibh viverra faucibus. Mauris non vestibulum dui. </p> 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では マークアップを 追 加 し アコーディオンのペインに 表 示 するコンテンツを 追 加 しました ここでは jquery スクリ プトを 追 加 し ウィジェットを 初 期 化 できます 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 して wijaccordion ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#accordion").wijaccordion({ header: "h3" </script> 手 順 3:プロジェクトの 実 行 この 手 順 では アプリケーションを 実 行 し アコーディオンのペインを 展 開 して 指 定 されたコンテンツを 表 示 します 1. [F5]を 押 して アプリケーションを 実 行 します 2. 展 開 する 任 意 のペインをクリックして 展 開 し コンテンツを 表 示 します 32 Copyright GrapeCity inc. All rights reserved.

34 アコーディオンへのアニメーションの 適 用 wijaccordion ウィジェットはアニメーションをサポートします この 機 能 を 利 用 するには 単 に animated オプションを 設 定 し ます Web サイト ( にアクセスし MVC コ ントロールエクスプローラの Accordion > Animation サンプルのライブデモをご 覧 ください. 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します 2つの 異 なる <div id="accordion"> 要 素 が あることに 注 意 してください 2つのペインにアニメーションを 設 定 し 他 の2つのペインではアニメーションを 無 効 にし ます <div id="accordion"> <h3>セクション 1</h3> <div> <p> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </p> <h3>セクション 2</h3> <div> <p> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </p> <div id="accordion2"> <h3> セクション 3</h3> 33 Copyright GrapeCity inc. All rights reserved.

35 <div> <p> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <h3> セクション 4</h3> <div> <p> Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p> 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 し wijaccordion ウィジェット を 初 期 化 して animated オプションを 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#accordion").wijaccordion({ animated: "easeinoutbounce", duration: 700, </script> $("#accordion2").wijaccordion({ animated: false 5. アプリケーションを 実 行 し 最 初 の2つのペインのいずれかをクリックしてバウンドアニメーションを 確 認 します ペイン 3またはペイン4をクリックした 場 合 アニメーション 効 果 は 見 られません コンテンツペインの 拡 張 方 向 の 変 更 wijaccordion ウィジェットでは ユーザーは 上 下 左 または 右 からペインのコンテンツを 拡 張 できます この 機 能 を 利 用 する には 単 に expanddirection オプションを 設 定 します Web サイト ( にアクセスし MVC コントロールエ クスプローラの Accordion > ExpandDirection サンプルのライブデモをご 覧 ください. 1. ASP.NET MVC 4 Wijmo インターネットアプリケーション を 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div id="accordion"> <h3>ペイン 1</h3> <div> 34 Copyright GrapeCity inc. All rights reserved.

36 <p> ペイン 1 のコンテン </p> <h3>ペイン 2</h3> <div> <p> ペイン 2 のコンテンツ </p> <h3> ペイン 3</h3> <div> <p> ペイン 3 のコンテンツ </p> <h3> ペイン 4</h3> <div> <p> ペイン 4 のコンテンツ </p> 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 し wijaccordion ウィジェットを 初 期 化 して expanddirection オプションを 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#accordion").wijaccordion({ expanddirection: "left" </script> 5. アプリケーションを 実 行 し いずれかのペインをクリックしてコンテンツが 左 へ 拡 張 されることを 確 認 します. 35 Copyright GrapeCity inc. All rights reserved.

37 Hover 状 態 でのアコーディオンペインの 拡 張 wijaccordion ウィジェットでは ユーザーはペインを Hover 状 態 にしてペインのコンテンツを 拡 張 できます この 機 能 を 利 用 するには 単 に event オプションを 設 定 します Web サイト ( ) にアクセスし MVC コントロールエクスプ ローラの Accordion > Hover サンプルのライブデモをご 覧 ください. 1. ASP.NET MVC 4 Wijmo インターネットアプリケーション を 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div id="accordion"> <h3>セクション 1</h3> <div> <p> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </p> <h3>セクション 2</h3> <div> <p> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> <h3> セクション 3</h3> <div> <p> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <h3> セクション 4</h3> <div> <p> Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p> 36 Copyright GrapeCity inc. All rights reserved.

38 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 し wijaccordion ウィジェットを 初 期 化 して event オプションを mouseover に 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#accordion").wijaccordion({ event: "mouseover" </script> 5. アプリケーションを 実 行 し マウスポインタをペインヘッダーの 上 に 置 くとペインが 拡 張 されます 複 数 のペインを 同 時 に 開 く wijaccordion ウィジェットでは 複 数 のペインを 同 時 に 開 くことができます 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの タグ 内 に 追 加 します <div id="accordion"> <h3>セクション 1</h3> <div> <p> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </p> <h3>セクション 2</h3> 37 Copyright GrapeCity inc. All rights reserved.

39 <div> <p> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> <h3> セクション 3</h3> <div> <p> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p> <h3> セクション 4</h3> <div> <p> Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p> 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 し wijaccordion ウィジェットを 初 期 化 して event オプションを mouseover に 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#accordion").wijaccordion({ requireopenedpane: false </script> 5. アプリケーションを 実 行 し 複 数 のヘッダーをクリックしてコンテンツペインが 閉 じないことを 確 認 します 38 Copyright GrapeCity inc. All rights reserved.

40 Chart ウィジェット このセクションでは MVC4のさまざまなChartウィジェットについて 説 明 します Wijbarchart wijbarchart ウィジェットでは カスタマイズした 横 棒 や 縦 棒 グラフを 作 成 できます 横 棒 グラフは カテゴリ 軸 が 垂 直 軸 になる 反 転 した 縦 棒 グラフです 横 棒 / 縦 棒 グラフは 各 系 列 をクラスタ 内 の1 本 の 棒 として 描 画 します クラスタの 数 は データ 内 の 各 点 の 数 です 各 クラスタは 各 系 列 の n 番 目 のデータ 点 を 表 示 します wijbarchart を 表 示 するビュー ビューの.cshtml ファイルを 開 きます 次 のマークアップのように DOM 要 素 を 追 加 します <div id="barchart"> ここで wijbarchart ウィジェットを 初 期 化 する 必 要 があります これを 行 うには 次 のスクリプトを.cshtml ファイルに 追 加 でき ます <script type="text/javascript"> $(document).ready(function () { $("#barchart").wijbarchart({ </script> 39 Copyright GrapeCity inc. All rights reserved.

41 関 連 項 目 : wijbarchart の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijbarchart Wijbarchart チュートリアル 以 下 のチュートリアルでは X と Y 軸 のテキスト 設 定 グラフへのヘッダー 要 素 の 追 加 グラフ 凡 例 へのラベルテキストの 追 加 グラフへのデータ 移 植 の 手 順 について 説 明 します このトピックでは ASP.NET MVC 4 Wijmo アプリケーションを 作 成 済 みであることが 前 提 となります 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では マークアップを 追 加 し コンテンツを 棒 グラフに 追 加 します 以 下 を 実 行 します 1. Microsoft Visual Studio の[ファイル]メニューから [ 新 しいプロジェクト]を 選 択 します [ 新 しいプロジェクト]ダイアロ グボックスが 開 きます 2. テンプレートの[Visual Basic]または[Visual C#]より[Web]を 選 択 します 3. 右 ペインから[ASP.NET MVC 4 Wijmo アプリケーション]を 選 択 します 4. [ 名 前 ] [ 場 所 ] [ソリューション 名 ]フィールドを 設 定 して OK をクリックします 5. 新 しい ASP.NET MVC Wijmo 4 アプリケーションが 作 成 されます Models Views および Controllers フォルダが 含 まれていることがわかります これらのフォルダは Wijmo for MVC のチュートリアルで 使 用 します 6. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックして ファイルを 開 きます 7. 次 のマークアップをページの <body> タグ 内 に 追 加 します このマークアップは 棒 のコンテンツをページに 追 加 しま す 棒 グラフの 幅 と 高 さはここで 定 義 されます <div id="wijbarchart" class="ui-widget ui-widget-content ui-corner-all" style="width: 650px; height: 400px"> 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では マークアップを 追 加 し 棒 グラフに 表 示 するコンテンツを 追 加 しました ここで jquery スクリプトを 追 加 し ウィ ジェットを 初 期 化 して さらに X と Y 軸 のテキスト 設 定 グラフラベルへのツールチップの 追 加 ハードウェア 販 売 という 名 前 のグラフヘッダーの 追 加 を 行 った 後 serieslist を 使 用 して X 軸 に 文 字 列 データと Y 軸 に 数 値 データを 持 つ3つのデータ 系 列 を 作 成 できます 前 の 手 順 で 追 加 した 終 了 のタグの 後 に 次 の jquery スクリプトを 入 力 して wijbarchart ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijbarchart").wijbarchart({ axis: { y: { text: "ハードウェア 数 " 40 Copyright GrapeCity inc. All rights reserved.

42 , x: { text: "", hint: { content: function () { return this.data.label + '<br/> ' + this.y + '';, header: { text: "ハードウェア 分 布 ", serieslist: [{ label: " 西 ", legendentry: true, data: { x: ['デスクトップ', 'ノート', ' 一 体 型 ', 'タブレット', ' 携 帯 電 話 '], y: [5, 3, 4, 7, 2], { label: " 中 央 ", legendentry: true, data: { x: ['デスクトップ', 'ノート', ' 一 体 型 ', 'タブレット', ' 携 帯 電 話 '], y: [2, 2, 3, 2, 1], { label: " 東 ", legendentry: true, data: { x: ['デスクトップ', 'ノート', ' 一 体 型 ', 'タブレット', ' 携 帯 電 話 '], y: [3, 4, 4, 2, 5] ] </script> 手 順 3:プロジェクトの 実 行 この 手 順 では アプリケーションを 実 行 し 新 しいデータやグラフ 要 素 (X 軸 と Y 軸 のタイトル グラフヘッダー およびグラフラ ベルなど)を 観 察 します 1. [F5] を 押 して アプリケーションを 実 行 します 2. 以 下 を 観 察 します 任 意 のグラフ 系 列 の 上 にホバーします ツールチップにラベルプロパティの 値 やその 系 列 の Y 値 の 説 明 が 表 示 されることに 注 意 してください ツールチップは 次 のコードを 使 用 したときに 表 示 されます: hint: { content: function () { return this.data.label + '<br/> ' + this.y + ''; 41 Copyright GrapeCity inc. All rights reserved.

43 次 のコードを 使 用 すると グラフヘッダーのタイトルが 表 示 されることに 注 意 してください header: {, text: "ハードウェア 分 布 " 3つのデータ 系 列 に 文 字 列 の X データと 数 値 の Y データを 表 示 します 次 のコードを 使 用 し この 結 果 を 達 成 し ます serieslist: [{ label: " 西 ", legendentry: true, data: { x: ['デスクトップ', 'ノート', ' 一 体 型 ', 'タブレット', ' 携 帯 電 話 '], y: [5, 3, 4, 7, 2], { label: " 中 央 ", legendentry: true, data: { x: ['デスクトップ', 'ノート', ' 一 体 型 ', 'タブレット', ' 携 帯 電 話 '], y: [2, 2, 3, 2, 1], { label: " 東 ", legendentry: true, data: { x: ['デスクトップ', 'ノート', ' 一 体 型 ', 'タブレット', ' 携 帯 電 話 '], y: [3, 4, 4, 2, 5] ] Y 軸 タイトル ハードウェア 合 計 数 を 縦 棒 グラフに 適 用 し X 軸 タイトルを 空 の 文 字 列 にします 次 のコードを 使 用 し この 結 果 を 達 成 します axis: { y: { 42 Copyright GrapeCity inc. All rights reserved.

44 text: "ハードウェア 数 ",, x: { text: "" Wijbarchart タスク 別 ヘルプ タスク 別 ヘルプは ASP.NET のプログラミングに 精 通 し コントロールの 一 般 的 な 使 用 方 法 を 理 解 しているユーザーを 対 象 とし ています ヘルプに 記 述 された 手 順 に 従 うことによって C1BarChart のさまざまな 機 能 をデモンストレーションするプロジェク トを 作 成 して C1BarChart コントロールの 用 途 を 理 解 することができます アニメーションのタスク ChartAnimation.Enabled オプションが true のとき アニメーション 効 果 を 棒 グラフの 系 列 に 適 用 できます アニメーション 化 されたスライド 状 態 /フェード 状 態 の 間 に 遷 移 効 果 を 追 加 すれば それらの 状 態 間 にシームレスな 流 れが 生 まれ 棒 グラフの 魅 力 を 高 めることができます ロード 時 に 左 から 右 へスムーズに 移 動 する 棒 グラフ 系 列 の 代 わりに 棒 グラフを 系 列 のスライド イン 時 にバウンドインさせ 系 列 のスライドアウト 時 にバウンドアウトさせることができます デフォルトで は ChartAnimation.Easing オプションは EaseLinear に 設 定 され 棒 グラフをリロードすると 各 系 列 はスムーズな 直 線 的 遷 移 効 果 でロードされます 以 下 の 遷 移 効 果 は 状 態 間 の 遷 移 をアニメーション 化 するために 使 用 できます これにより 棒 グラフ 系 列 をロードする 際 に ユーザーにとって 動 きがスムーズに 見 えます 遷 移 の 名 前 EaseInBack EaseInCubic EaseInOutCubic EaseOutBack EaseOutBounce EaseOutCubic EaseOutElastic 遷 移 の 説 明 バックのイージングイン 開 始 は 遅 く それから 加 速 します 3 次 型 のイージングイン 開 始 は 速 度 ゼロで それから 加 速 します 3 次 型 のイージングインとイージングアウト 開 始 は 速 度 ゼロで 途 中 まで 加 速 し それから 再 び 速 度 ゼロまで 減 速 します バックのイージングアウト 開 始 は 速 く それから 減 速 します バウンドしながらのイージングアウト 開 始 は 速 く それから 減 速 し ます バウンドの 回 数 は 持 続 時 間 に 関 係 します 持 続 時 間 が 延 び れば バウンドの 回 数 は 多 くなります 3 次 型 のイージングインとイージングアウト 開 始 は 全 速 で それか らゼロまで 減 速 します 5 次 型 のイージングアウト 開 始 は 全 速 で それからゼロまで 減 速 し ます C1BarChart のアニメーション 効 果 の 長 さは ChartAnimation.Durationオプションを 使 用 して 設 定 できます アニメーション 効 果 の 持 続 時 間 の 指 定 に 使 用 される 時 間 の 単 位 はミリ 秒 であり Duration プロパティのデフォルト 設 定 値 は 500 ミリ 秒 (0.5 秒 )です アニメーション 効 果 を 長 くするにはこの 値 を 増 加 させ 短 くするにはこの 値 を 減 少 させます 以 下 のリンクは C1BarChart 上 でさまざまなアニメーション 効 果 を 使 用 する 方 法 を 示 します アニメーションのサンプルコード 43 Copyright GrapeCity inc. All rights reserved.

45 <cc1:c1barchart ID="C1BarChart1" runat="server"> </cc1:c1barchart> <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijbarchart").wijbarchart({ axis: { y: { text: "ヒット 数 ", automax: false, max: 100, automin: false, min: 0, x: { text: " 年 月 ", hint: { content: function () { return this.data.label + '<\n> ' + this.y + '';, stacked: true, clusterradius: 5, serieslist: [createrandomserieslist("2010")] function changeproperties() { var animation = {; enabled = $("#chkenabled").is(":checked"), duration = $("#inpduration").val(), easing = $("#seleasing").val(); animation.enabled = enabled; if (duration && duration.length) { animation.duration = parsefloat(duration); animation.easing = easing; $("#wijbarchart").wijbarchart({("option", "animation", animation); function reload() { $("#wijbarchart").wijbarchart({("option", "serieslist", [createrandomserieslist("2010")]); function createrandomserieslist(label) { var data = [], randomdatavaluescount = 12, labels = ["1 月 ", "2 月 ", "3 月 ", "4 月 ", "5 月 ", "6 月 ", "7 月 ", "8 月 ", "9 月 ", "10 月 ", "11 月 ", "12 月 "], idx; for (idx = 0; idx < randomdatavaluescount; idx++) { data.push(createrandomvalue()); return { 44 Copyright GrapeCity inc. All rights reserved.

46 label: label, legendentry: false, data: { x: labels, y: data ; function createrandomvalue() { var val = Math.round(Math.random() * 100); return val; </script> <h2>アニメーション</h2> <div class="main demo"> <!-- デモ マークアップの 開 始 --> <input type="button" value="リロード" onclick="reload()" /> <div id="wijbarchart" class="ui-widget ui-widget-content ui-corner-all" style="width: 600px; height: 475px"> <!-- デモ マークアップの 終 了 --> <div class="demo-options"> <!-- オプション マークアップの 開 始 --> <div> <label for="chkenabled"> Animation Settings: Enabled </label> <input id="chkenabled" type="checkbox" checked="checked" /> <label for="inpduration"> Duration </label> <input id="inpduration" type="text" value="1000" /> <label for="seleasing"> Easing </label> <select id="seleasing"> <option value=">">></option> <option value="<"><</option> <option value="<>"><></option> <option value="backin">backin</option> <option value="backout">backout</option> <option value="bounce">bounce</option> <option value="elastic">elastic</option> </select> <input type="button" value=" 適 用 " onclick="changeproperties()" /> <!-- オプション マークアップの 終 了 --> 軸 のタスク 45 Copyright GrapeCity inc. All rights reserved.

47 以 下 のトピックでは Axis オブジェクトを 使 用 して グラフの X 軸 と Y 軸 を 作 成 する 方 法 や 軸 の 外 観 をカスタマイズする 方 法 (フォントスタイル フォント 色 およびフォントサイズの 変 更 など)について 説 明 します X 軸 と Y 軸 の 定 義 軸 は 軸 配 列 で 定 義 され x/y 軸 の 配 置 x/y 軸 のテキスト x/y 軸 の 表 示 / 非 表 示 x/y 軸 テキストの 表 示 / 非 表 示 x/y 軸 の スタイル 軸 ラベル 軸 位 置 (north south east west などのオプションから 選 択 ) 軸 の 最 小 値 と 最 大 値 主 目 盛 記 号 と 補 助 目 盛 記 号 を 制 御 できます $(document).ready(function () { $("#wijbarchart").wijbarchart({ axis: { y: { text: "パーセント(%)", x: { text: "グラフィックカード" ) ) 軸 ラベルのスタイル 設 定 X 軸 と Y 軸 ラベルの 色 とフォントサイズを 変 更 するには 以 下 のコードを 使 用 します $(document).ready(function () { $("#wijbarchart").wijbarchart({ axis: { y: { text: "パーセント(%)", textstyle: { fill: "#6633ff", "font-size": "11pt", x: { text: "グラフィックカード" このトピックの 作 業 結 果 以 下 の 図 は フォントサイズと 前 景 色 を 変 更 した 場 合 の Y 軸 ラベルを 示 しています フォントサイズは font-size オプションを 使 用 して 変 更 され 前 景 色 は fill オプションを 使 用 して 変 更 されました 46 Copyright GrapeCity inc. All rights reserved.

48 回 転 後 の 軸 タイトルの 下 方 移 動 軸 ラベルと 軸 テキストの 両 方 が 重 なり 合 わないように 軸 タイトルを 下 方 に 移 動 するには 以 下 のコードを 使 用 できます axis: { y: { text: " 値 段 ", textstyle: { translation: "0 20", labels: { style: { translation: "0 0" 軸 ラベルの 回 転 X 軸 のラベルのプロパティ(width textalign および rotation など)を 設 定 するには 以 下 のコードを 使 用 します $(document).ready(function () { $("#wijbarchart").wijbarchart({ axis: { y: { text: "パーセント(%)" 47 Copyright GrapeCity inc. All rights reserved.

49 ,, x: { text: "グラフィックカード", labels: { width: 80, textalign: "near", style: { rotation: -45 このトピックの 作 業 結 果 以 下 の 図 は -45 度 回 転 させ 互 いに 幅 80 ピクセル 離 して テキスト 配 置 を 軸 の 左 側 にした 場 合 の 軸 ラベルを 示 しています 凡 例 の 定 義 とオプションの 設 定 凡 例 の 枠 の 色 を 定 義 するには 以 下 のコードを 使 用 します legend: {, text:" 月 ", style:{ fill:"#f1f1f1", stroke: "#6699cc", このトピックの 作 業 結 果 48 Copyright GrapeCity inc. All rights reserved.

50 以 下 の 図 は 枠 を 水 色 にし 塗 りつぶし 色 を 淡 色 にした 場 合 の 凡 例 を 示 しています ヘッダーの 定 義 とオプションの 設 定 ヘッダーのテキスト 色 とサイズを 定 義 するには 以 下 のコードを 使 用 します header: {, text: "ビデオカードのランキング", textstyle:{ fill:"#6699cc", stroke: "#6699cc", "font-size": "24pt", このトピックの 作 業 結 果 以 下 の 図 は 前 景 色 を 水 色 にし フォントサイズを larger にした 場 合 のグラフヘッダーを 示 しています 49 Copyright GrapeCity inc. All rights reserved.

51 フッターの 定 義 とオプションの 設 定 フッターのテキスト 色 とサイズを 定 義 するには 以 下 のコードを 使 用 します footer: { text: "フッター", textstyle:{ fill:"#6699cc", stroke: "#533e67", "font-size": "24pt",, ツールチップの 定 義 以 下 のコードは Hint オブジェクトを 使 用 して Y 値 を 表 示 するツールチップを 作 成 する 方 法 を 示 します hint: { content: function () { return this.data.label + ' ' + this.y + ''; 50 Copyright GrapeCity inc. All rights reserved.

52 このトピックの 作 業 結 果 以 下 の 図 は 各 データ 系 列 にホバーしたときに 表 示 されるツールチップを 示 しています SeriesList の 定 義 以 下 のコードは serieslist 配 列 コレクションを 使 用 してグラフ 化 するデータを 組 み 込 む 方 法 を 示 しています この 例 では 文 字 列 型 の X データと 数 値 型 の Y データで3つの 系 列 が 定 義 されています 横 棒 グラフであるため X 軸 と Y 軸 が 反 転 して 表 示 さ れます serieslist: [{ label: "5 月 ", legendentry: true, data: { x: ['カード1', 'カード2', 'カード3', 'カード4', 'カード5', 'カード6'], y: [1.91, 1.9, 1.61, 2.23, 2.85, 3.64], { label: "6 月 ", legendentry: true, data: { x: ['カード1', 'カード2', 'カード3', 'カード4', 'カード5', 'カード6'], y: [1.82, 1.88, 1.77, 2.33, 2.97, 3.70], { label: "7 月 ", legendentry: true, data: { x: ['カード1', 'カード2', 'カード3', 'カード4', 'カード5', 'カード6'], y: [1.94, 1.80, 1.81, 2.23, 2.83, 3.57] ], 系 列 のホバースタイルの 定 義 51 Copyright GrapeCity inc. All rights reserved.

53 系 列 のホバースタイルの 定 義 系 列 およびホバー 系 列 の 色 とストロークスタイルを 定 義 するには 以 下 のコードを 使 用 します seriesstyles: [{ opacity: 0.8, fill: "0-# #2d2d2d", stroke: "#2d2d2d", "stroke-width": "1.5", { opacity: 0.8, fill: "0-#6aaba7-#5f9996", stroke: "#5f9996", "stroke-width": "1.5", { opacity: 0.8, fill: "0-#c3ff00-#afe500", stroke: "#afe500", "stroke-width": "1.5" ], serieshoverstyles: [{ opacity: 1, "stroke-width": "2.5", { opacity: 1, "stroke-width": "2.5", stroke: "2d2d2d", { opacity: 1, "stroke-width": "2.5" ] ホバー 時 の bar の 効 果 を 強 調 するために 大 きなストローク 幅 の 値 と 異 なるストロークの 色 が 使 用 されたことに 注 意 してくださ い Wijbubblechart wijbubblechart ウィジェットは データ 点 をバブルに 置 き 換 えた 散 布 図 に 似 ています データが3つの 独 立 した 値 を 持 つ 場 合 この 種 類 のグラフを 散 布 図 の 代 わりに 使 用 できます wijbubblechart は 各 データ 点 に x y および y1 の3つの 値 を 使 用 しま 52 Copyright GrapeCity inc. All rights reserved.

54 す X 要 素 の 値 は x 軸 のデカルト 位 置 を 決 定 し Y 要 素 の 値 は y 軸 のデカルト 位 置 を 決 定 し Y1 要 素 の 値 は 各 点 のバブルの サイズを 決 定 します wijbarchart を 表 示 するビュー ビューの.cshtml ファイルを 開 きます 次 のマークアップのように <div> DOM 要 素 を 追 加 します <div id="bubblechart"> ここで wijbubblechart ウィジェットを 初 期 化 する 必 要 があります これを 行 うには 次 のスクリプトを.cshtml ファイルに 追 加 できます <script type="text/javascript"> $(document).ready(function () { $("#bubblechart").wijbubblechart({ </script> 関 連 項 目 : wijbubblechart の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijbubblechart Wijbubblechart チュートリアル 以 下 のチュートリアルでは X と Y 軸 のテキスト 設 定 グラフへのヘッダー 要 素 の 追 加 グラフ 凡 例 へのラベルテキストの 追 加 グラフへのデータ 移 植 の 手 順 について 説 明 します このトピックでは ASP.NET MVC 4 Wijmo アプリケーションを 作 成 済 みであることが 前 提 となります 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では マークアップを 追 加 し コンテンツをバブルチャートに 追 加 します 以 下 を 実 行 します 1. Microsoft Visual Studio の[ファイル]メニューから [ 新 しいプロジェクト]を 選 択 します [ 新 しいプロジェクト]ダイアロ グボックスが 開 きます 2. テンプレートの[Visual Basic]または[Visual C#]より[Web]を 選 択 します 3. 右 ペインから[ASP.NET MVC 4 Wijmo アプリケーション]を 選 択 します 4. [ 名 前 ] [ 場 所 ] [ソリューション 名 ]フィールドを 設 定 して OK をクリックします 5. 新 しい ASP.NET MVC Wijmo 4 アプリケーションが 作 成 されます Models Views および Controllers フォルダが 含 まれていることがわかります これらのフォルダは Wijmo for MVC のチュートリアルで 使 用 します 6. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックして ファイルを 開 きます 7. 次 のマークアップをページの タグ 内 に 追 加 します このマークアップはバブルのコンテンツをページに 追 加 します バブ ルチャートの 幅 と 高 さはここで 定 義 されます <h3> ハードウェア 分 布 </h3> 53 Copyright GrapeCity inc. All rights reserved.

55 <div id="wijbubblechart" class="ui-widget ui-widget-content ui-corner-all" style="width: 500px; height: 400px;"> 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では マークアップを 追 加 し バブルチャートに 表 示 するコンテンツを 追 加 しました ここで jquery スクリプトを 追 加 し ウィジェットを 初 期 化 して さらに X と Y 軸 のテキスト 設 定 グラフラベルへのツールチップの 追 加 ハードウェア 販 売 と いう 名 前 のグラフヘッダーの 追 加 を 行 った 後 serieslist を 使 用 して X 軸 に 文 字 列 データと Y 軸 に 数 値 データを 持 つ3つの データ 系 列 を 作 成 できます 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 して wijbubblechart ウィジェットを 初 期 化 しま す <script type="text/javascript"> $(document).ready(function () { $("#wijbubblechart").wijbubblechart({ minimumsize: 3, MaximumSize: 15, axis: { y: { text: "ハードウェア 数 ", x: { text: "", hint: { content: function () { return 'x:' + this.x + ',y:' + this.y + ",y1:" + this.data.y1;, header: { text: "ハードウェア 分 布 ", serieslist: [{ label: " 西 ", legendentry: true, data: { x: [5, 14, 20, 18, 22], y: [5500, 12200, 60000, 24400, 32000], y1: [3, 12, 33, 10, 42] // markers: { 型 : 'tri' // ] </script> 54 Copyright GrapeCity inc. All rights reserved.

56 手 順 3:プロジェクトの 実 行 この 手 順 では アプリケーションを 実 行 し 新 しいデータやグラフ 要 素 (Y 軸 のタイトル グラフヘッダー グラフラベルなど)を 観 察 します 1. [F5] を 押 して アプリケーションを 実 行 します 2. 以 下 を 観 察 します 任 意 のグラフ 系 列 の 上 にホバーします ツールチップにバブル 系 列 の X Y および Y1 の 値 が 表 示 されること に 注 意 してください ツールチップは 次 のコードを 使 用 したときに 表 示 されます hint: { content: function () { return 'x:' + this.x + ',y:' + this.y + ",y1:" + this.data.y1; 次 のコードを 使 用 すると グラフヘッダーのタイトルが 表 示 されることに 注 意 してください header: {, text: "ハードウェア 分 布 " つのデータ 系 列 に 文 字 列 の X データと 数 値 の Y データを 表 示 します 次 のコードを 使 用 し この 結 果 を 達 成 し ます serieslist: [{ label: " 西 ", legendentry: true, data: { x: [5, 14, 20, 18, 22], y: [5500, 12200, 60000, 24400, 32000], y1: [3, 12, 33, 10, 42] 55 Copyright GrapeCity inc. All rights reserved.

57 型 : 'tri' ] // markers: { // Y 軸 タイトル ハードウェア 合 計 数 をバブルチャートに 適 用 し X 軸 タイトルを 空 の 文 字 列 にします 次 のコード を 使 用 し この 結 果 を 達 成 します axis: { y: { text: "ハードウェア 数 ",, x: { text: "" Wijbubblechart タスク 別 ヘルプ タスク 別 ヘルプは ASP.NET のプログラミングに 精 通 し コントロールの 一 般 的 な 使 用 方 法 を 理 解 しているユーザーを 対 象 とし ています ヘルプに 記 述 された 手 順 に 従 うことによって wijbubblechart のさまざまな 機 能 をデモンストレーションするプロ ジェクトを 作 成 して wijbubblechart コントロールの 用 途 を 理 解 することができます X 軸 と Y 軸 の 定 義 軸 は 軸 配 列 で 定 義 され x/y 軸 の 配 置 x/y 軸 のテキスト x/y 軸 の 表 示 / 非 表 示 x/y 軸 テキストの 表 示 / 非 表 示 x/y 軸 の スタイル 軸 ラベル 軸 位 置 (north south east west などのオプションから 選 択 ) 軸 の 最 小 値 と 最 大 値 主 目 盛 記 号 と 補 助 目 盛 記 号 を 制 御 できます $(document).ready(function () { $("#wijbubblechart").wijbubblechart({ axis: { y: { text: "ハードウェア 数 ", x: { text: "", 軸 ラベルのスタイル 設 定 X 軸 と Y 軸 ラベルの 色 とフォントサイズを 変 更 するには 以 下 のコードを 使 用 します $(document).ready(function () { $("#wijbubblechart").wijbubblechart({ 56 Copyright GrapeCity inc. All rights reserved.

58 axis: { y: { text: "ハードウェア 数 ", textstyle: { fill: "#6633ff", "font-size": "11pt", x: { text: "" このトピックの 作 業 結 果 以 下 の 図 は フォントサイズと 前 景 色 を 変 更 した 場 合 の Y 軸 ラベルを 示 しています フォントサイズは font-size オプションを 使 用 して 変 更 され 前 景 色 は fill オプションを 使 用 して 変 更 されました 回 転 後 の 軸 タイトルの 下 方 移 動 軸 ラベルと 軸 テキストの 両 方 が 重 なり 合 わないように 軸 タイトルを 下 方 に 移 動 するには 以 下 のコードを 使 用 できます axis: { y: { text: " 値 段 ", textstyle: { translation: "0 20", labels: { style: { translation: "0 0" 57 Copyright GrapeCity inc. All rights reserved.

59 軸 ラベルの 回 転 X 軸 のラベルのプロパティ(width textalign および rotation など)を 設 定 するには 以 下 のコードを 使 用 します $(document).ready(function () { $("#wijbubblechart").wijbubblechart({ axis: { y: { text: "ハードウェア 数 ",, labels: { width: 80, textalign: "near", style: { rotation: -45, x: { text: "", このトピックの 作 業 結 果 以 下 の 図 は Y- 軸 ラベルが -45 度 に 回 転 させ 互 いに 幅 80 ピクセル 離 して テキスト 配 置 を 軸 の 左 側 にした 場 合 の 軸 ラベル を 示 しています 58 Copyright GrapeCity inc. All rights reserved.

60 凡 例 の 定 義 とオプションの 設 定 凡 例 の 枠 の 色 を 定 義 するには 以 下 のコードを 使 用 します legend: { text:" 凡 例 ", style:{ fill:"#f1f1f1", stroke: "#6699cc", このトピックの 作 業 結 果 以 下 の 図 は 枠 を 水 色 にし 塗 りつぶし 色 を 淡 色 にした 場 合 の 凡 例 を 示 しています 59 Copyright GrapeCity inc. All rights reserved.

61 ヘッダーの 定 義 とオプションの 設 定 ヘッダーのテキスト 色 とサイズを 定 義 するには 以 下 のコードを 使 用 します header: { text: "ハードウェア 分 布 ", textstyle:{ fill:"#6699cc", stroke: "#6699cc", "font-size": "24pt",, このトピックの 作 業 結 果 以 下 の 図 は 前 景 色 を 水 色 にし フォントサイズを larger にした 場 合 のグラフヘッダーを 示 しています 60 Copyright GrapeCity inc. All rights reserved.

62 フッターの 定 義 とオプションの 設 定 フッターのテキスト 色 とサイズを 定 義 するには 以 下 のコードを 使 用 します footer: { text: "フッター", textstyle:{ fill:"#6699cc", stroke: "#6699cc", "font-size": "24pt",, ツールチップの 定 義 以 下 のコードは Hint オブジェクトを 使 用 して Y 値 を 表 示 する tooltip を 作 成 する 方 法 を 示 します hint: { content: function () return this.data.label + ' ' + this.y + ''; このトピックの 作 業 結 果 以 下 の 図 は 各 データ 系 列 にホバーしたときに 表 示 される tooltip を 示 しています 61 Copyright GrapeCity inc. All rights reserved.

63 SeriesList の 定 義 以 下 のコードは serieslist 配 列 コレクションを 使 用 してグラフ 化 するデータを 組 み 込 む 方 法 を 示 しています この 例 では 文 字 列 型 の X データと 数 値 型 の Y データで3つの 系 列 が 定 義 されています バブルグラフであるため X 軸 と Y 軸 が 反 転 して 表 示 されます seriesstyles: [{ label: " 西 ", legendentry: true, data: { x: [5, 14, 20, 18, 22], y: [5500, 12200, 60000,24400, 32000], y1: [3, 12, 33, 10, 42] ] ] 系 列 のホバースタイルの 定 義 系 列 およびホバー 系 列 の 色 とストロークスタイルを 定 義 するには 以 下 のコードを 使 用 します seriesstyles: [{ opacity: 0.8, fill: "0-# #2d2d2d", stroke: "#2d2d2d", "stroke-width": "1.5" ], serieshoverstyles: [{ opacity: 1, "stroke-width": "2.5" ], ホバー 時 の bar の 効 果 を 強 調 するために ストローク 幅 の 値 に larger が 使 用 されたことに 注 意 してください 62 Copyright GrapeCity inc. All rights reserved.

64 Wijcompositechart wijcomposite グラフウィジェットでは 複 雑 なデータを ダッシュボードを 備 えた1つのグラフ 面 上 で 分 析 できます 同 じデータ を 異 なる 視 覚 化 でオーバーレイしたり 関 連 するデータを 一 緒 に 表 示 して 傾 向 を 示 すことができます wijbarchart を 表 示 するビューの.cshtml ファイルを 開 きます 次 のマークアップのように <div> DOM 要 素 を 追 加 します <div id="compositechart"> ここで wijbarchart ウィジェットを 初 期 化 する 必 要 があります これを 行 うには 次 のスクリプトを.cshtml ファイルに 追 加 でき ます <script type="text/javascript"> $(document).ready(function () { $("#compositechart").wijcompositechart({ </script> 関 連 項 目 : wijcompositechart の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijcompositechart Wijcompositechart チュートリアル 以 下 のチュートリアルでは X と Y 軸 のテキスト 設 定 グラフへのヘッダー 要 素 の 追 加 グラフ 凡 例 へのラベルテキストの 追 63 Copyright GrapeCity inc. All rights reserved.

65 加 グラフへのデータ 移 植 の 手 順 について 説 明 します このトピックでは ASP.NET MVC 4 Wijmo アプリケーションを 作 成 済 みであることが 前 提 となります 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では マークアップを 追 加 し コンテンツを 複 合 グラフに 追 加 します 以 下 を 実 行 します 1. Microsoft Visual Studio の[ファイル]メニューから [ 新 しいプロジェクト]を 選 択 します [ 新 しいプロジェクト]ダイアロ グボックスが 開 きます 2. テンプレートの[Visual Basic]または[Visual C#]より[Web]を 選 択 します 3. 右 ペインから[ASP.NET MVC 4 Wijmo アプリケーション]を 選 択 します 4. [ 名 前 ] [ 場 所 ] [ソリューション 名 ]フィールドを 設 定 して OK をクリックします 5. 新 しい ASP.NET MVC Wijmo 4 アプリケーションが 作 成 されます Models Views および Controllers フォルダが 含 まれていることがわかります これらのフォルダは Wijmo for MVC のチュートリアルで 使 用 します 6. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックして ファイルを 開 きます 7. 次 のマークアップをページの <body> タグ 内 に 追 加 します このマークアップは 棒 のコンテンツをページに 追 加 しま す 複 合 グラフの 幅 と 高 さはここで 定 義 されます <div id="wijcompositechart" class="ui-widget ui-widget-content ui-corner-all" style="width: 756px; height: 475px"> 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では マークアップを 追 加 し 複 合 グラフに 表 示 するコンテンツを 追 加 しました ここで jquery スクリプトを 追 加 し ウィジェットを 初 期 化 して さらに X と Y 軸 のテキスト 設 定 グラフラベルへのツールチップの 追 加 ハードウェア 販 売 という 名 前 のグラフヘッダーの 追 加 を 行 った 後 serieslist を 使 用 して X 軸 に 文 字 列 データと Y 軸 に 数 値 データを 持 つ3つのデータ 系 列 を 作 成 できます 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 して wijcompositechart ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijcompositechart").wijcompositechart({ axis: { y: { text: "ハードウェア 数 ", x: { text: "", stacked: false, hint: { content: function () { return this.label + '<br/> ' + this.y + ''; 64 Copyright GrapeCity inc. All rights reserved.

66 , header: { text: "ハードウェア 分 布 ", serieslist: [{ type: "column", label: " 西 ", legendentry: true, data: { x: ['デスクトップ', 'ノート', ' 一 体 型 ', 'タブレット', ' 携 帯 電 話 '], y: [5, 3, 4, 7, 2], { type: "column", label: " 中 央 ", legendentry: true, data: { x: ['デスクトップ', 'ノート', ' 一 体 型 ', 'タブレット', ' 携 帯 電 話 '], y: [2, 2, 3, 2, 1], { type: "column", label: " 東 ", legendentry: true, data: { x: ['デスクトップ', 'ノート', ' 一 体 型 ', 'タブレット', ' 携 帯 電 話 '], y: [3, 4, 4, 2, 5], { type: "pie", label: "asdfdsfdsf", legendentry: true, center: { x: 150, y: 150, radius: 60, data: [{ label: " 種 類 2", legendentry: true, data: 46.78, offset: 15, { label: " 種 類 3", legendentry: true, data: 23.18, offset: 0, { label: " 種 類 4", legendentry: true, data: 20.25, offset: 0 ], { type: "line", label: " 米 国 ", legendentry: true, data: { x: ['デスクトップ', 'ノート', ' 一 体 型 ', 'タブレット', ' 携 帯 電 話 '], y: [3, 6, 2, 9, 5], 65 Copyright GrapeCity inc. All rights reserved.

67 話 '], </script>, { ] markers: { visible: true, type: "circle" type: "line", label: "カナダ", legendentry: true, data: { x: ['デスクトップ', 'ノート', ' 一 体 型 ', 'タブレット', ' 携 帯 電 y: [1, 3, 4, 7, 2], markers: { visible: true, type: "tri" 手 順 3:プロジェクトの 実 行 この 手 順 では アプリケーションを 実 行 し 新 しいデータやグラフ 要 素 (X 軸 と Y 軸 のタイトル グラフヘッダー およびグラフラベ ルなど)を 観 察 します 1. [F5] を 押 して アプリケーションを 実 行 します 2. 以 下 を 観 察 します 任 意 のグラフ 系 列 の 上 にホバーします ツールチップにその 系 列 のラベルプロパティ 値 と Y 値 が 表 示 されること に 注 意 してください ツールチップは 次 のコードを 使 用 したときに 表 示 されます hint: {, content: function () { return this.label + '<br/> ' + this.y + ''; 66 Copyright GrapeCity inc. All rights reserved.

68 次 のコードを 使 用 すると グラフヘッダーのタイトルが 表 示 されることに 注 意 してください header: {, text: "ハードウェア 分 布 " 円 縦 棒 および 折 れ 線 グラフの3 種 類 のグラフに それぞれ 複 数 のデータ 系 列 を 表 示 します この 結 果 を 達 成 するには 次 のコードを 使 用 します serieslist: [{ type: "column", label: " 西 ", legendentry: true, data: { x: ['デスクトップ', 'ノート', ' 一 体 型 ', 'タブレット', ' 携 帯 電 話 '], y: [5, 3, 4, 7, 2], { type: "column", label: " 中 央 ", legendentry: true, data: { x: ['デスクトップ', 'ノート', ' 一 体 型 ', 'タブレット', ' 携 帯 電 話 '], y: [2, 2, 3, 2, 1], { type: "column", label: " 東 ", legendentry: true, data: { x: ['デスクトップ', 'ノート', ' 一 体 型 ', 'タブレット', ' 携 帯 電 話 '], y: [3, 4, 4, 2, 5], { type: "pie", label: "asdfdsfdsf", legendentry: true, 67 Copyright GrapeCity inc. All rights reserved.

69 center: { x: 150, y: 150, radius: 60, data: [{ label: " 種 類 2", legendentry: true, data: 46.78, offset: 15, { label: " 種 類 3", legendentry: true, data: 23.18, offset: 0, { label: " 種 類 4", legendentry: true, data: 20.25, offset: 0 ], { type: "line", label: " 米 国 ", legendentry: true, data: { x: ['デスクトップ', 'ノート', ' 一 体 型 ', 'タブレット', ' 携 帯 電 話 '], y: [3, 6, 2, 9, 5], markers: { visible: true, type: "circle", { type: "line", label: "カナダ", legendentry: true, data: { x: ['デスクトップ', 'ノート', ' 一 体 型 ', 'タブレット', ' 携 帯 電 話 '], y: [1, 3, 4, 7, 2], markers: { visible: true, type: "tri" ] Y 軸 タイトル ハードウェア 合 計 数 を 複 合 グラフに 適 用 し X 軸 タイトルを 空 の 文 字 列 にします 次 のコードを 使 用 し この 結 果 を 達 成 します axis: { y: { text: "ハードウェア 数 ", 68 Copyright GrapeCity inc. All rights reserved.

70 , x: { text: "" Wijcompositechart タスク 別 ヘルプ タスク 別 ヘルプは ASP.NET のプログラミングに 精 通 し コントロールの 一 般 的 な 使 用 方 法 を 理 解 しているユーザーを 対 象 とし ています ヘルプに 記 述 された 手 順 に 従 うことによって C1CompositeChartのさまざまな 機 能 をデモンストレーションするプ ロジェクトを 作 成 して C1CompositeChart コントロールの 用 途 を 理 解 することができます X 軸 と Y 軸 の 定 義 軸 は 軸 配 列 で 定 義 され x/y 軸 の 配 置 x/y 軸 のテキスト x/y 軸 の 表 示 / 非 表 示 x/y 軸 テキストの 表 示 / 非 表 示 x/y 軸 の スタイル 軸 ラベル 軸 位 置 (north south east west などのオプションから 選 択 ) 軸 の 最 小 値 と 最 大 値 主 目 盛 記 号 と 補 助 目 盛 記 号 を 制 御 できます $(document).ready(function () { $("#wijcompositechart").wijcompositechart({ axis: { y: { text: "ハードウェア 数 ", x: { text: "" ) ) 軸 ラベルのスタイル 設 定 Y 軸 ラベルのスタイルを 変 更 するには 以 下 のコードを 使 用 します $(document).ready(function () { $("#wijcompositechart").wijcompositechart({ axis: { y: { text: "ハードウェア 数 ", textstyle: { fill: "#3399ff", "font-size": "20pt", x: { text: "" 69 Copyright GrapeCity inc. All rights reserved.

71 , このトピックの 作 業 結 果 以 下 の 図 では スタイルの 前 景 色 とフォントサイズを 変 更 した 場 合 の Y 軸 ラベルを 示 しています フォントサイズは font-size オプションを 使 用 して 変 更 され 前 景 色 は fill オプションを 使 用 して 変 更 されました 回 転 後 の 軸 タイトルの 下 方 移 動 軸 ラベルと 軸 テキストの 両 方 が 重 なり 合 わないように 軸 タイトルを 下 方 に 移 動 するには 以 下 のコードを 使 用 できます axis: { y: { text: " 値 段 ", textstyle: { translation: "0 20", labels: { style: { translation: "0 0" 軸 ラベルの 回 転 X 軸 のラベルのプロパティ(width textalign および rotation など)を 設 定 するには 以 下 のコードを 使 用 します 70 Copyright GrapeCity inc. All rights reserved.

72 $(document).ready(function () { $("#wijcompositechart").wijcompositechart({ x: { text: "", labels: { style: { fill: "#7f7f7f", "font-size": "11pt", rotation: -45, ) ) 凡 例 の 定 義 とオプションの 設 定 凡 例 の 枠 の 色 を 定 義 するには 以 下 のコードを 使 用 します legend: { text:" 凡 例 ", style:{ fill:"#f1f1f1", stroke: "#6699cc", 71 Copyright GrapeCity inc. All rights reserved.

73 , ヘッダーの 定 義 とオプションの 設 定 ヘッダーのテキスト 色 とサイズを 定 義 するには 以 下 のコードを 使 用 します $("#wijcompositechart").wijcompositechart({ header: { text: " 機 種 の 割 合 ", textstyle:{ fill:"#3300cc", "font-size": "24pt", このトピックの 作 業 結 果 以 下 の 図 は 水 色 の 前 景 色 にしたグラフヘッダーを 示 しています フッターの 定 義 とオプションの 設 定 フッターのテキスト 色 とサイズを 定 義 するには 以 下 のコードを 使 用 します footer: { 72 Copyright GrapeCity inc. All rights reserved.

74 text: "フッター", textstyle:{ fill:"#6699cc", stroke: "#33FF00", "font-size": "24pt",, このトピックの 作 業 結 果 以 下 の 図 は 薄 緑 色 の 前 景 色 にしたグラフフッターを 示 しています ツールチップの 定 義 以 下 のコードは Hint オブジェクトを 使 用 して 各 系 列 にラベルと Y 値 を 表 示 するツールチップを 作 成 する 方 法 を 示 します hint: { content: function () { return this.label + ' ' + this.y + '';, このトピックの 作 業 結 果 以 下 の 図 は 各 データ 系 列 にホバーしたときに 表 示 されるツールチップを 示 しています 73 Copyright GrapeCity inc. All rights reserved.

75 シリーズ 一 覧 の 定 義 以 下 のコードは シリーズ 一 覧 配 列 コレクションを 使 用 してグラフ 化 するデータを 組 み 込 む 方 法 を 示 しています serieslist: [{ type: "column", label: " 西 ", legendentry: true, data: { x: ['デスクトップ', 'ノート', ' 一 体 型 ', 'タブレット', ' 携 帯 電 話 '], y: [5, 3, 4, 7, 2], { type: "column", label: " 中 央 ", legendentry: true, data: { x: ['デスクトップ', 'ノート', ' 一 体 型 ', 'タブレット', ' 携 帯 電 話 '], y: [2, 2, 3, 2, 1], { type: "column", label: " 東 ", legendentry: true, data: { x: ['デスクトップ', 'ノート', ' 一 体 型 ', 'タブレット', ' 携 帯 電 話 '], y: [3, 4, 4, 2, 5], { type: "pie", label: " 機 種 1", legendentry: true, center: { x: 150, y: 150, 74 Copyright GrapeCity inc. All rights reserved.

76 radius: 60, data: [{ label: " 機 種 2", legendentry: true, data: 46.78, offset: 15, { label: " 機 種 3", legendentry: true, data: 23.18, offset: 0, { label: " 機 種 4", legendentry: true, data: 20.25, offset: 0 ], { type: "line", label: " 米 国 ", legendentry: true, data: { x: ['デスクトップ', 'ノート', ' 一 体 型 ', 'タブレット', ' 携 帯 電 話 '], y: [3, 6, 2, 9, 5], markers: { visible: true, type: "circle", { type: "line", label: "カナダ", legendentry: true, data: { x: ['デスクトップ', 'ノート', ' 一 体 型 ', 'タブレット', ' 携 帯 電 話 '], y: [1, 3, 4, 7, 2], markers: { visible: true, type: "tri" ] Wijlinechart wijlinechart ウィジェットでは ダッシュボードを 備 えた1つのグラフ 面 上 で 複 雑 なデータを 分 析 できます 同 じデータを 異 なる 視 覚 化 でオーバーレイしたり 関 連 するデータを 一 緒 に 表 示 して 傾 向 を 示 すことができます wijbarchart を 表 示 するビューの.cshtml ファイルを 開 きます 次 のマークアップのように 75 Copyright GrapeCity inc. All rights reserved.

77 DOM 要 素 を 追 加 します <div id="linechart"> ここで wijbarchart ウィジェットを 初 期 化 する 必 要 があります これを 行 うには 次 のスクリプトを.cshtml ファイルに 追 加 でき ます <script type="text/javascript"> $(document).ready(function () { $("#linechart").wijlinechart({ </script> 関 連 項 目 : wijlinechart の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijlinechart Wijlinechart チュートリアル 以 下 のチュートリアルでは X と Y 軸 のテキスト 設 定 グラフへのヘッダー 要 素 の 追 加 グラフ 凡 例 へのラベルテキストの 追 加 グラフへのデータ 移 植 の 手 順 について 説 明 します このトピックでは ASP.NET MVC 4 Wijmo アプリケーションを 作 成 済 みであることが 前 提 となります 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では マークアップを 追 加 し コンテンツを 折 れ 線 グラフに 追 加 します 以 下 を 実 行 します 1. Microsoft Visual Studioの[ファイル] [ファイル]メニューから [ 新 しいプロジェクト]を 選 択 します [ [ 新 しいプロジェクト]ダイアログ ボックスが 開 きます 2. テンプレートの[Visual Basic]または[Visual C#]より[Web]を 選 択 します 3. 右 ペインから[ASP.NET MVC 4 Wijmo アプリケーション]を 選 択 します 4. [ 名 前 ] [ 場 所 ] [ソリューション 名 ]フィールドを 設 定 して OK をクリックします 5. 新 しい ASP.NET MVC Wijmo 4 アプリケーションが 作 成 されます Models Views および Controllers フォルダが 含 まれていることがわかります これらのフォルダは Wijmo for MVC のチュートリアルで 使 用 します 6. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックして ファイルを 開 きます 7. 次 のマークアップをページのタグ 内 に 追 加 します このマークアップは 折 れ 線 グラフのコンテンツをページに 追 加 しま す 折 れ 線 グラフの 幅 と 高 さがここで 定 義 されます <div id="wijlinechartdefault" class="ui-widget ui-widget-content ui-cornerall" style="width: 650px; height: 400px"> 76 Copyright GrapeCity inc. All rights reserved.

78 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では マークアップを 追 加 し 折 れ 線 グラフに 表 示 されるコンテンツを 追 加 しました ここで jquery スクリプトを 追 加 し ウィジェットを 初 期 化 して さらに X と Y 軸 のテキスト 設 定 グラフラベルへのツールチップの 追 加 ハードウェア 販 売 と いう 名 前 のグラフヘッダーの 追 加 を 行 った 後 serieslist を 使 用 して X 軸 に 文 字 列 データと Y 軸 に 数 値 データを 持 つ3つの データ 系 列 を 作 成 できます 前 の 手 順 で 追 加 した 終 了 の<div>タグの 後 に 次 の jquery スクリプトを 入 力 し wijlinechart ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijlinechartdefault").wijlinechart({ culture: "ja-jp" header: { visible: true, text: "オンラインユーザーの 数 ", textstyle: { fill: "#7f7f7f", axis: { y: { labels: { style: { fill: "#7f7f7f", "font-size": "11pt", gridmajor: { style: {stroke: "#353539", "stroke-dasharray": "- ", tickmajor: { position: "outside", style: {stroke: "#7f7f7f", tickminor: { position: "outside", style: {stroke: "#7f7f7f", x: { labels: { style: { fill: "#7f7f7f", "font-size": "11pt", rotation: -45, tickmajor: { position: "outside", style: {stroke: "#7f7f7f", showchartlabels: false, hint: { content: function () { return this.data.lineseries.label + '\n' + this.x + '\n' + this.y + '';, 77 Copyright GrapeCity inc. All rights reserved.

79 contentstyle: { "font-size": "10pt", offsety: -10, legend: { visible: false, serieslist: [ { label: "オンラインユーザーの 数 ", legendentry: true, fittype: "spline", data: { x: [new Date('10/27/ :48:00'), new Date('10/27/ :47:00'), new Date('10/27/ :46:00'), new Date('10/27/ :45:00'), new Date('10/27/ :44:00'), new Date('10/27/ :43:00'), new Date('10/27/ :41:00'), new Date('10/28/2010 1:40:00'), new Date('10/28/2010 3:39:00'), new Date('10/28/2010 5:38:00'), new Date('10/28/2010 7:37:00'), new Date('10/28/2010 9:36:00'), new Date('10/28/ :35:00'), new Date('10/28/ :34:00'), new Date('10/28/ :33:00'), new Date('10/28/ :32:00'), new Date('10/28/ :31:00'), new Date('10/28/ :30:00'), new Date('10/28/ :38:00'), new Date('10/29/2010 1:27:00'), new Date('10/29/2010 3:26:00'), new Date('10/29/2010 5:25:00'), new Date('10/29/2010 7:24:00'), new Date('10/29/2010 9:23:00'), new Date('10/29/ :22:00')], y: [ , , , , , , , , , , , , , , , , , , , , , , , , ], markers: { visible: true, type: "circle" ], 78 Copyright GrapeCity inc. All rights reserved.

80 seriesstyles: [ {stroke: "#ff9900", "stroke-width": "3" ] </script> 手 順 3:プロジェクトの 実 行 この 手 順 では アプリケーションを 実 行 し 新 しいデータやグラフ 要 素 (X 軸 と Y 軸 のタイトル グラフヘッダー およびグラフラ ベルなど)を 観 察 します 1. F5 を 押 して アプリケーションを 実 行 します 2. 以 下 を 観 察 します 任 意 のグラフ 系 列 の 上 にホバーします ツールチップにラベルプロパティの 値 やその 系 列 の Y 値 の 説 明 が 表 示 されることに 注 意 してください ツールチップは 次 のコードを 使 用 したときに 表 示 されます hint: { content: function () { return this.data.lineseries.label + '\n' + this.x + '<br/>' + this.y + '';, contentstyle: { "font-size": "10pt", offsety: -10, 次 のコードを 使 用 すると グラフヘッダーのタイトルが 表 示 されることに 注 意 してください 79 Copyright GrapeCity inc. All rights reserved.

81 header: { visible: true, text: "オンラインユーザーの 数 ", textstyle: { fill: "#fafafa", データ 系 列 に 文 字 列 の X データと 数 値 の Y データを 表 示 します 次 のコードを 使 用 し この 結 果 を 達 成 します serieslist: [ { label: "オンラインユーザーの 数 ", legendentry: true, fittype: "spline", data: { x: [new Date('10/27/ :48:00'), new Date('10/27/ :47:00'), new Date('10/27/ :46:00'), new Date('10/27/ :45:00'), new Date('10/27/ :44:00'), new Date('10/27/ :43:00'), new Date('10/27/ :41:00'), new Date('10/28/2010 1:40:00'), new Date('10/28/2010 3:39:00'), new Date('10/28/2010 5:38:00'), new Date('10/28/2010 7:37:00'), new Date('10/28/2010 9:36:00'), new Date('10/28/ :35:00'), new Date('10/28/ :34:00'), new Date('10/28/ :33:00'), new Date('10/28/ :32:00'), new Date('10/28/ :31:00'), new Date ('10/28/ :30:00'), new Date('10/28/ :38:00'), new Date('10/29/2010 1:27:00'), new Date('10/29/2010 3:26:00'), new Date('10/29/2010 5:25:00'), new Date('10/29/2010 7:24:00'), new Date('10/29/2010 9:23:00'), new Date('10/29/ :22:00')], y: [ , , , , , , , , , , , , , , , , , , , , , , , , ], markers: { visible: true, type: "circle" ], Wijlinechart タスク 別 ヘルプ タスク 別 ヘルプは ASP.NET のプログラミングに 精 通 し コントロールの 一 般 的 な 使 用 方 法 を 理 解 しているユーザーを 対 象 とし ています ヘルプに 記 述 された 手 順 に 従 うことによって C1LineChart のさまざまな 機 能 をデモンストレーションするプロジェク トを 作 成 して C1LineChart コントロールの 用 途 を 理 解 することができます X 軸 と Y 軸 の 定 義 軸 は 軸 配 列 で 定 義 され x/y 軸 の 配 置 x/y 軸 のテキスト x/y 軸 の 表 示 / 非 表 示 x/y 軸 テキストの 表 示 / 非 表 示 x/y 軸 の スタイル 軸 ラベル 軸 位 置 (north south east west などのオプションから 選 択 ) 軸 の 最 小 値 と 最 大 値 主 目 盛 記 号 と 補 80 Copyright GrapeCity inc. All rights reserved.

82 助 目 盛 記 号 を 制 御 できます $(document).ready(function () { $("#wijlinechartdefault").wijlinechart({ axis: { y: { text: "パーセント(%)", x: { text: "グラフィックカード" ) ) 軸 ラベルのスタイル 設 定 X 軸 と Y 軸 ラベルの 色 とフォントサイズを 変 更 するには 以 下 のコードを 使 用 します $(document).ready(function () $("#wijlinechartdefault").wijlinechart({ axis: { y: { labels: { style: { fill: "#0000cc", "font-size": "11pt", gridmajor: { style: { stroke: "#353539", "stroke-dasharray": "- ", tickmajor: { position: "outside", style: { stroke: "#7f7f7f", tickminor: { position: "outside", style: { stroke: "#7f7f7f", x: { labels: { style: { fill: "#0000cc", "font-size": "11pt",, tickmajor: { position: "outside", style: { stroke: "#7f7f7f", 81 Copyright GrapeCity inc. All rights reserved.

83 このトピックは 次 のことを 示 します 以 下 の 図 は フォントサイズと 前 景 色 を 変 更 した 場 合 の Y 軸 ラベルを 示 しています フォントサイズは font-size オプションを 使 用 して 変 更 され 前 景 色 は fill オプションを 使 用 して 変 更 されました 回 転 後 の 軸 タイトルの 下 方 移 動 軸 ラベルと 軸 テキストの 両 方 が 重 なり 合 わないように 軸 タイトルを 下 方 に 移 動 するには 以 下 のコードを 使 用 できます axis: { y: { text: " 値 段 ", textstyle: { translation: "0 20", labels: { style: { translation: "0 0" 軸 ラベルの 回 転 X 軸 のラベルのプロパティ(width textalign および rotation など)を 設 定 するには 以 下 のコードを 使 用 します $(document).ready(function () { 82 Copyright GrapeCity inc. All rights reserved.

84 $("#wijlinechartdefault").wijlinechart({ x: { labels: { style: { fill: "#7f7f7f", "font-size": "11pt", rotation: -45, ) ) このトピックは 次 のことを 示 します </32> 以 下 の 図 は -45 度 回 転 させ 互 いに 幅 80 ピクセル 離 し テキスト 配 置 を 軸 の 左 側 にした 軸 ラベルを 示 しています 凡 例 の 定 義 とオプションの 設 定 凡 例 の 枠 の 色 を 定 義 するには 以 下 のコードを 使 用 します legend: { text:" 凡 例 ", style:{ fill:"#f1f1f1", stroke: "#6699cc", ヘッダーの 定 義 とオプションの 設 定 83 Copyright GrapeCity inc. All rights reserved.

85 ヘッダーのテキスト 色 とサイズを 定 義 するには 以 下 のコードを 使 用 します header: { visible: true, text: "オンラインユーザーの 数 ", textstyle: { fill: "#33cc33", font-size: 18pt, このトピックは 次 のことを 示 します 以 下 の 図 は 前 景 色 を 水 色 にし フォントサイズを larger にしたグラフヘッダーを 示 しています フッターの 定 義 とオプションの 設 定 フッターのテキスト 色 とサイズを 定 義 するには 以 下 のコードを 使 用 します footer: { visible: true, text: "Footer", textstyle:{ fill:"#6699cc", stroke: "#6699cc", "font-size": "18pt", 84 Copyright GrapeCity inc. All rights reserved.

86 , このトピックは 次 のことを 示 します 以 下 の 図 は 水 色 の 前 景 色 にしたグラフフッターを 示 しています ツールチップの 定 義 以 下 のコードは Hint オブジェクトを 使 用 してラベル x 値 および Y 値 を 表 示 するツールチップを 作 成 する 方 法 を 示 します hint: { content: function () { return this.data.lineseries.label + '\n' + this.x + '\n' + this.y + '';, contentstyle: { "font-size": "10pt", offsety: -10, このトピックは 次 のことを 示 します 以 下 の 図 は 各 データ 系 列 ポイントにホバーしたときに 表 示 されるツールチップを 示 しています 85 Copyright GrapeCity inc. All rights reserved.

87 シリーズ 一 覧 の 定 義 以 下 のコードは シリーズ 一 覧 配 列 コレクションを 使 用 してグラフ 化 するデータを 組 み 込 む 方 法 を 示 しています この 例 では 文 字 列 型 の X データと 数 値 型 の Y データで3つの 系 列 が 定 義 されています 横 棒 グラフであるため X 軸 と Y 軸 が 反 転 して 表 示 されます serieslist: [ { label: "オンラインユーザーの 数 ", legendentry: true, fittype: "spline", data: { x: [new Date('10/27/ :48:00'), new Date('10/27/ :47:00'), new Date('10/27/ :46:00'), new Date('10/27/ :45:00'), new Date('10/27/ :44:00'), new Date('10/27/ :43:00'), new Date('10/27/ :41:00'), new Date('10/28/2010 1:40:00'), new Date('10/28/2010 3:39:00'), new Date('10/28/2010 5:38:00'), new Date('10/28/2010 7:37:00'), new Date('10/28/2010 9:36:00'), new Date('10/28/ :35:00'), new Date('10/28/ :34:00'), new Date('10/28/ :33:00'), new Date('10/28/ :32:00'), new Date('10/28/ :31:00'), new 86 Copyright GrapeCity inc. All rights reserved.

88 Date('10/28/ :30:00'), new Date('10/28/ :38:00'), new Date('10/29/2010 1:27:00'), new Date('10/29/2010 3:26:00'), new Date('10/29/2010 5:25:00'), new Date('10/29/2010 7:24:00'), new Date('10/29/2010 9:23:00'), new Date('10/29/ :22:00')], y: [ , , , , , , , , , , , , , , , , , , , , , , , , ], markers: { visible: true, type: "circle" ], 系 列 のスタイルの 定 義 系 列 およびホバー 系 列 の 色 とストロークスタイルを 定 義 するには 以 下 のコードを 使 用 します seriesstyles: [ ] { stroke: "#ff9900", "stroke-width": "3" Wijpiechart wijpiechart ウィジェットでは カスタマイズした 円 グラフを 作 成 できます wijpiechart を 表 示 するビューのcshtmlファイルを 開 きます 次 のマークアップのように <div>dom 要 素 を 追 加 します <div id="piechart"> ここで wijpiechart ウィジェットを 初 期 化 する 必 要 があります これを 行 うには 次 のスクリプトをcshtml ファイルに 追 加 できま す <script type="text/javascript"> $(document).ready(function () { $("#piechart").wijpiechart({ </script> 87 Copyright GrapeCity inc. All rights reserved.

89 関 連 項 目 : wijpiechart の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijpiechart Wijpiechart チュートリアル Wijpiechart チュートリアル 以 下 のチュートリアルでは X と Y 軸 のテキスト 設 定 グラフへのヘッダー 要 素 の 追 加 グラフ 凡 例 へのラベルテキストの 追 加 グラフへのデータ 移 植 の 手 順 について 説 明 します このトピックでは ASP.NET MVC 4 Wijmo アプリケーションを 作 成 済 みであることが 前 提 となります 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では マークアップを 追 加 し コンテンツを 棒 グラフに 追 加 します 以 下 を 実 行 します 1. Microsoft Visual Studio の[ファイル]メニューから [ 新 しいプロジェクト]を 選 択 します [ 新 しいプロジェクト]ダイアロ グボックスが 開 きます 2. テンプレートの[Visual Basic]または[Visual C#]より[Web]を 選 択 します 3. 右 ペインから[ASP.NET MVC 4 Wijmo アプリケーション]を 選 択 します 4. [ 名 前 ] [ 場 所 ] [ソリューション 名 ]フィールドを 設 定 して OK をクリックします 5. 新 しい ASP.NET MVC Wijmo 4 アプリケーションが 作 成 されます Models Views および Controllers フォルダが 含 まれていることがわかります これらのフォルダは Wijmo for MVC のチュートリアルで 使 用 します 6. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックして ファイルを 開 きます 7. 次 のマークアップをページの <body> タグ 内 に 追 加 します このマークアップは 棒 のコンテンツをページに 追 加 しま す 棒 グラフの 幅 と 高 さはここで 定 義 されます 8. In the Solution Explorer, expand the Views Shared folder and double-click _Layout.cshtml to open the file. <div class="main demo"> <!-- デモマークアップの 開 始 --> <div id="wijpiechart" class="ui-widget ui-widget-content ui-corner-all"> <!-- デモマークアップの 終 了 --> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <!-- オプションマークアップの 終 了 --> 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では マークアップを 追 加 し 散 布 図 に 表 示 されるコンテンツを 追 加 しました ここで jquery スクリプトを 追 加 し ウィ ジェットを 初 期 化 して さらに X と Y 軸 のテキスト 設 定 グラフラベルへのツールチップの 追 加 ハードウェア 販 売 という 名 前 のグラフヘッダーの 追 加 を 行 った 後 serieslist を 使 用 して X 軸 に 文 字 列 データと Y 軸 に 数 値 データを 持 つ3つのデータ 系 列 を 作 成 できます 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 し wijpiechart ウィジェットを 初 期 化 します 88 Copyright GrapeCity inc. All rights reserved.

90 <style type="text/css"> #wijpiechart { width: 756px; height: 475px; </style> <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijpiechart").wijpiechart({ radius: 140, legend: { visible: true, hint: { content: function () { return this.data.label + " : " + Globalize.format(this.value / this.total, "p2");, header: { text: " 機 種 の 割 合 ", serieslist: [{ label: " 種 類 1", legendentry: true, data: 46.78, offset: 15, { label: " 種 類 2", legendentry: true, data: 23.18, offset: 0, { label: " 種 類 3", legendentry: true, data: 20.25, offset: 0, { label: " 種 類 4", legendentry: true, data: 5.41, offset: 0, { label: " 種 類 5", legendentry: true, data: 3.44, offset: 0 ], seriesstyles: [{ fill: "180-rgb(195,255,0)-rgb(175,229,0)", stroke: "rgb(175,229,0)", "stroke-width": "1.5", { 89 Copyright GrapeCity inc. All rights reserved.

91 fill: "90-rgb(142,222,67)-rgb(127,199,60)", stroke: "rgb(127,199,60)", "stroke-width": "1.5", { fill: "90-rgb(106,171,167)-rgb(95,153,150)", stroke: "rgb(95,153,150)", "stroke-width": "1.5", { fill: "90-rgb(70,106,133)-rgb(62,95,119)", stroke: "rgb(62,95,119)", "stroke-width": "1.5", { fill: "90-rgb(166,166,166)-rgb(149,149,149)", stroke: "rgb(149,149,149)", "stroke-width": "1.5" ] </script> 手 順 3:プロジェクトの 実 行 この 手 順 では アプリケーションを 実 行 し 新 しいデータやグラフ 要 素 (X 軸 と Y 軸 のタイトル グラフヘッダー およびグラフラ ベルなど)を 観 察 します 1. [F5]を 押 して アプリケーションを 実 行 します 2. 以 下 を 観 察 します 円 グラフ 系 列 のいずれかの 上 にホバーします ツールチップにラベルプロパティの 値 やその 系 列 の Y 値 の 説 明 が 表 示 されることに 注 意 してください ツールチップは 次 のコードを 使 用 したときに 表 示 されます 90 Copyright GrapeCity inc. All rights reserved.

92 hint: { content: function () { return this.data.label + " : " + Globalize.format(this.value / this.total, "p2");, 次 のコードを 使 用 すると グラフヘッダーのタイトルが 表 示 されることに 注 意 してください header: { text: " 機 種 の 割 合 ", 5つのデータ 系 列 に 数 値 データを 表 示 します 次 のコードを 使 用 し この 結 果 を 達 成 します serieslist: [{ label: " 種 類 1", legendentry: true, data: 46.78, offset: 15, { label: " 種 類 2", legendentry: true, data: 23.18, offset: 0, { label: " 種 類 3", legendentry: true, data: 20.25, offset: 0, { label: " 種 類 4", legendentry: true, data: 5.41, offset: 0, { label: " 種 類 5", legendentry: true, data: 3.44, offset: 0 ], Wijpiechart タスク 別 ヘルプ クライアント 側 タスク 別 ヘルプは ASP.NET のプログラミングに 精 通 し コントロールの 一 般 的 な 使 用 方 法 を 理 解 しているユー ザーを 対 象 としています ヘルプに 記 述 された 手 順 に 従 うことによって C1PieChartのさまざまな 機 能 をデモンストレーション するプロジェクトを 作 成 して C1PieChartコントロールの 用 途 を 理 解 することができます ドーナツグラフの 作 成 ドーナツグラフを 作 成 するには 以 下 のように innerradius オプションを 使 用 します 91 Copyright GrapeCity inc. All rights reserved.

93 $("#wijpiechart").wijpiechart({ radius: 140, innerradius: 30 このトピックの 作 業 結 果 以 下 の 図 は innerradius オプションを 使 用 して 作 成 されたドーナツグラフを 示 しています 凡 例 の 定 義 とオプションの 設 定 凡 例 の 枠 の 色 を 定 義 するには 以 下 のコードを 使 用 します legend: {, text:" 凡 例 ", style:{ fill:"#f1f1f1", stroke: "#6699cc", ヘッダーの 定 義 とオプションの 設 定 92 Copyright GrapeCity inc. All rights reserved.

94 ヘッダーのテキスト 色 とサイズを 定 義 するには 以 下 のコードを 使 用 します $("#wijpiechart").wijpiechart({ header: { text: " 機 種 の 割 合 ", textstyle:{ fill:"#6699cc", stroke: "#6699cc", "font-size": "24pt", このトピックの 作 業 結 果 以 下 の 図 は グラフヘッダーの 前 景 色 とフォントサイズを 変 更 した 場 合 を 示 しています フッターの 定 義 とオプションの 設 定 フッターのテキスト 色 とサイズを 定 義 するには 以 下 のコードを 使 用 します footer: {, text: "フッター", textstyle:{ fill:"#ff6600", "font-size": "24pt", 93 Copyright GrapeCity inc. All rights reserved.

95 このトピックの 作 業 結 果 以 下 の 図 は グラフフッターを 橙 色 の 前 景 色 にした 場 合 を 示 しています ツールチップの 定 義 以 下 のコードは Hint オブジェクトを 使 用 して Y 値 を 表 示 するツールチップを 作 成 する 方 法 を 示 します hint: { content: function () { return this.data.label + " : " + Globalize.format(this.value / this.total, "p2");, このトピックの 作 業 結 果 以 下 の 図 は 各 データ 系 列 にホバーしたときに 表 示 されるツールチップを 示 しています 94 Copyright GrapeCity inc. All rights reserved.

96 シリーズ 一 覧 の 定 義 以 下 のコードは シリーズ 一 覧 配 列 コレクションを 使 用 してグラフ 化 するデータを 組 み 込 む 方 法 を 示 します この 例 では 数 値 データを 持 つ5つの 系 列 が 定 義 されます serieslist: [{ label: " 機 種 1", legendentry: true, data: 46.78, offset: 15, { label: " 機 種 2", legendentry: true, data: 23.18, offset: 0, { label: " 機 種 3", legendentry: true, data: 20.25, offset: 0, { label: " 機 種 4", legendentry: true, data: 5.41, offset: 0 95 Copyright GrapeCity inc. All rights reserved.

97 , { label: " 機 種 5", legendentry: true, data: 3.44, offset: 0 ], Wijscatterchart wijscatterchart では ユーザーは 一 方 が x 軸 に 沿 った 一 連 の 数 値 データ 他 方 が y 軸 に 沿 った 一 連 の 数 値 データを 表 示 す る2つの 値 軸 を 備 えたグラフを 表 示 できます wijscatterchart は これらの 値 を1つのデータポイントに 組 み 合 わせて 不 規 則 な 間 隔 やクラスタで 表 示 します wijbarchart を 表 示 するビューの.cshtml ファイルを 開 きます 次 のマークアップのように <div> DOM 要 素 を 追 加 します <div id="scatterchart"> ここで wijbarchart ウィジェットを 初 期 化 する 必 要 があります これを 行 うには 次 のスクリプトを.cshtml ファイルに 追 加 でき ます <script type="text/javascript"> $(document).ready(function () { $("#scatterchart").wijscatterchart({ </script> 関 連 項 目 : wijscatterchart の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijscatterchart Wijscatterchart チュートリアル 以 下 のチュートリアルでは X と Y 軸 のテキスト 設 定 グラフへのヘッダー 要 素 の 追 加 グラフ 凡 例 へのラベルテキストの 追 加 グラフへのデータ 移 植 の 手 順 について 説 明 します このトピックでは ASP.NET MVC 4 Wijmo アプリケーションを 作 成 済 みであることが 前 提 となります 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では マークアップを 追 加 し コンテンツを 棒 グラフに 追 加 します 以 下 を 実 行 します 1. Microsoft Visual Studio の[ファイル]メニューから [ 新 しいプロジェクト]を 選 択 します [ 新 しいプロジェクト]ダイアロ グボックスが 開 きます 2. テンプレートの[Visual Basic]または[Visual C#]より[Web]を 選 択 します 3. 右 ペインから[ASP.NET MVC 4 Wijmo アプリケーション]を 選 択 します 96 Copyright GrapeCity inc. All rights reserved.

98 4. [ 名 前 ] [ 場 所 ] [ソリューション 名 ]フィールドを 設 定 して OK をクリックします 5. 新 しい ASP.NET MVC Wijmo 4 アプリケーションが 作 成 されます Models Views および Controllers フォルダが 含 まれていることがわかります これらのフォルダは Wijmo for MVC のチュートリアルで 使 用 します 6. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックして ファイルを 開 きます 7. 次 のマークアップをページの タグ 内 に 追 加 します このマークアップは 棒 のコンテンツをページに 追 加 します 棒 グラフ の 幅 と 高 さはここで 定 義 されます <div id="wijscatterchartdefault" class="ui-widget ui-widget-content ui-cornerall" style="width: 550px; height: 350px;"> 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では マークアップを 追 加 し 散 布 図 に 表 示 されるコンテンツを 追 加 しました ここで jquery スクリプトを 追 加 し ウィ ジェットを 初 期 化 して さらに X と Y 軸 のテキスト 設 定 グラフラベルへのツールチップの 追 加 ハードウェア 販 売 という 名 前 のグラフヘッダーの 追 加 を 行 った 後 serieslist を 使 用 して X 軸 に 文 字 列 データと Y 軸 に 数 値 データを 持 つ3つのデータ 系 列 を 作 成 できます 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 し wijscatterchart ウィジェットを 初 期 化 しま す <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijscatterchartdefault").wijscatterchart({ header: { text: " 性 別 による72 人 の 身 長 / 体 種 のグラフ", axis: { y: { text: " 体 種 (キロ)", labels: { style: { fill: "#7f7f7f", "font-size": "11pt", gridmajor: { style: {stroke: "#353539", "stroke-dasharray": "- ", tickmajor: { position: "outside", style: {stroke: "#7f7f7f", tickminor: { position: "outside", style: {stroke: "#7f7f7f", x: { text: " 身 長 (センチ)", labels: { style: { fill: "#7f7f7f", "font-size": "11pt", rotation: Copyright GrapeCity inc. All rights reserved.

99 , tickmajor: { position: "outside", style: {stroke: "#7f7f7f", showchartlabels: false, hint: { content: function () { return this.x + ' cm, ' + this.y + ' kg', contentstyle: { "font-size": "10pt", offsety: -10, legend: { visible: false, serieslist: [ { label: " 女 ", legendentry: true, data: { x: [161.4, 169.0, 166.2, 159.4, 162.5, 159.0, 162.8, 159.0, 179.8, 162.9, 161.0, 151.1, 168.2, 168.9, 173.2,174.0, 162.6,161.3, 156.2, 149.9, 169.5, 174.0, 162.6, 160.0, 175.3, 169.5, 160.0, 172.7, 162.6, 157.5, 176.5, 164.4, 160.7, 174.0, 163.8], y: [63.4, 58.2, 58.6, 45.7, 52.2, 48.6, 57.8, 55.6, 66.8, 59.4, 53.6, 73.2, 53.4, 69.0, 58.4,73.6, 61.4, 55.5, 63.6, 60.9, 60.0, 46.8, 57.3, 64.1, 63.6, 67.3, 75.5, 68.2, 61.4, 76.8,71.8, 55.5, 48.6, 66.4, 67.3], visible: true, markertype: "circle", { label: " 男 ", legendentry: true, data: { x: [175.0, 174.0, 165.1, 177.0, 192.0, 176.5, 169.4, 182.1, 179.8, 175.3, 184.9, 177.3, 167.4, 178.1, 168.9,174.0, 167.6, 170.2, 167.6, 188.0, 174.0, 176.5, 180.3, 167.6, 188.0, 180.3,167.6, 183.0, 183.0, 179.1,170.2, 177.8, 179.1, 190.5, 177.8, 180.3, ], y: [70.2, 73.4, 70.5, 68.9, 102.3, 68.4, 65.9, 75.7, 84.5, 87.7, 86.4, 73.2, 53.9, 72.0, 55.5,70.9, 64.5, 77.3, 72.3, 87.3, 80.0, 82.3, 73.6, 74.1, 85.9, 73.2, 76.3, 65.9, 90.9, 89.1,62.3, 82.7, 79.1, 98.2, 84.1, 83.2, 83.2 ], visible: true, markertype: "diamond" ], seriesstyles: [{ fill: "#afe500", 98 Copyright GrapeCity inc. All rights reserved.

100 stroke: "#afe500" stroke: "#ff9900" </script>, { fill: "#ff9900", ] 手 順 3:プロジェクトの 実 行 この 手 順 では アプリケーションを 実 行 し 新 しいデータやグラフ 要 素 (X 軸 と Y 軸 のタイトル グラフヘッダー およびグラフラベルなど) を 観 察 します 1. [F5]を 押 して アプリケーションを 実 行 します 2. 以 下 を 観 察 します 任 意 のグラフ 系 列 の 上 にホバーします ツールチップにラベルプロパティの 値 やその 系 列 の Y 値 の 説 明 が 表 示 されるこ とに 注 意 してください ツールチップは 次 のコードを 使 用 したときに 表 示 されます hint: { content: function () { return this.data.label + '<br/> ' + this.y + '';, 次 のコードを 使 用 すると グラフヘッダーのタイトルが 表 示 されることに 注 意 してください header: { 99 Copyright GrapeCity inc. All rights reserved.

101 text: " 性 別 による72 人 の 身 長 / 体 種 のグラフ", 3つのデータ 系 列 に 文 字 列 の X データと 数 値 の Y データを 表 示 します 次 のコードを 使 用 し この 結 果 を 達 成 します serieslist: [ { label: " 女 ", legendentry: true, data: { x: [161.4, 169.0, 166.2, 159.4, 162.5, 159.0, 162.8, 159.0, 179.8, 162.9, 161.0, 151.1, 168.2, 168.9, 173.2, 174.0, 162.6, 174.0, 162.6, 161.3, 156.2, 149.9, 169.5, 160.0, 175.3, 169.5, 160.0, 172.7, 162.6, 157.5, 176.5, 164.4, 160.7, 174.0, 163.8], y: [63.4, 58.2, 58.6, 45.7, 52.2, 48.6, 57.8, 55.6, 66.8, 59.4, 53.6, 73.2, 53.4, 69.0, 58.4, 73.6, 61.4, 55.5, 63.6, 60.9, 60.0, 46.8, 57.3, 64.1, 63.6, 67.3, 75.5, 68.2, 61.4, 76.8, 71.8, 55.5, 48.6, 66.4, 67.3], visible: true, markertype: "circle", { label: " 男 ", legendentry: true, data: { x: [175.0, 174.0, 165.1, 177.0, 192.0, 176.5, 169.4, 182.1, 179.8, 175.3, 184.9, 177.3, 167.4, 178.1, 168.9, 174.0, 167.6, 170.2, 167.6, 188.0, 174.0, 176.5, 180.3, 167.6, 188.0, 180.3, 167.6, 183.0, 183.0, 179.1, 170.2, 177.8, 179.1, 190.5, 177.8, 180.3, ], y: [70.2, 73.4, 70.5, 68.9, 102.3, 68.4, 65.9, 75.7, 84.5, 87.7, 86.4, 73.2, 53.9, 72.0, 55.5, 70.9, 64.5, 77.3, 72.3, 87.3, 80.0, 82.3, 73.6, 74.1, 85.9, 73.2, 76.3, 65.9, 90.9, 89.1, 62.3, 82.7, 79.1, 98.2, 84.1, 83.2, 83.2 ], visible: true, markertype: "diamond" ], Y 軸 タイトル 体 種 (キロ) を 散 布 図 に 適 用 し X 軸 タイトルを 空 の 文 字 列 にします 次 のコードを 使 用 し この 結 果 を 達 成 します axis: { y: { text: " 体 種 (キロ)", x: { text: "" 100 Copyright GrapeCity inc. All rights reserved.

102 , Wijscatterchart タスク 別 ヘルプ クライアント 側 タスク 別 ヘルプは ASP.NET のプログラミングに 精 通 し コントロールの 一 般 的 な 使 用 方 法 を 理 解 しているユー ザーを 対 象 としています ヘルプに 記 述 された 手 順 に 従 うことによって C1ScatterChart のさまざまな 機 能 をデモンストレー ションするプロジェクトを 作 成 して C1ScatterChartコントロールの 用 途 を 理 解 することができます X 軸 と Y 軸 の 定 義 軸 は 軸 配 列 で 定 義 され x/y 軸 の 配 置 x/y 軸 のテキスト x/y 軸 の 表 示 / 非 表 示 x/y 軸 テキストの 表 示 / 非 表 示 x/y 軸 の スタイル 軸 ラベル 軸 位 置 (north south east west などのオプションから 選 択 ) 軸 の 最 小 値 と 最 大 値 主 目 盛 記 号 と 補 助 目 盛 記 号 を 制 御 できます $(document).ready(function () { $("#wijscatterchartdefault").wijscatterchart({ axis: { y: { text: " 体 重 (キロ)", x: { text: " 身 長 (センチ)" ) ) 軸 ラベルのスタイル 設 定 X 軸 または Y 軸 のテキストのスタイルを 変 更 するには 以 下 のコードを 使 用 します $(document).ready(function () { $("#wijscatterchartdefault").wijscatterchart({ $(document).ready(function () { axis: { y: { text: " 体 重 (キロ)", textstyle: { fill: "#3399ff", "font-size": "9pt", x: { text: " 身 長 (センチ)" textstyle: { fill: "#6633ff", "font-size": "9pt" 101 Copyright GrapeCity inc. All rights reserved.

103 このトピックの 作 業 結 果 以 下 の 図 は 軸 ラベルを -45 度 回 転 させ 互 いに 幅 80 ピクセル 離 し テキスト 配 置 を 軸 の 左 側 にした 場 合 を 示 しています 凡 例 の 定 義 とオプションの 設 定 凡 例 の 枠 の 色 を 定 義 するには 以 下 のコードを 使 用 します legend: {, text:" 凡 例 ", style:{ fill:"#f1f1f1", stroke: "#6699cc", ヘッダーの 定 義 とオプションの 設 定 ヘッダーのテキスト 色 とサイズを 定 義 するには 以 下 のコードを 使 用 します 102 Copyright GrapeCity inc. All rights reserved.

104 $("#wijscatterchartdefault").wijscatterchart({ header: { text: " 性 別 による72 人 の 身 長 / 体 重 のグラフ", textstyle:{ fill:"#6699cc", stroke: "#6699cc", "font-size": "24pt", このトピックの 作 業 結 果 以 下 の 図 は グラフヘッダーを 水 色 の 前 景 色 にした 場 合 を 示 しています フッターの 定 義 とオプションの 設 定 フッターのテキスト 色 とサイズを 定 義 するには 以 下 のコードを 使 用 します footer: { text: "フッター", textstyle:{ fill:"#6699cc", stroke: "#6699cc", "font-size": "24pt", 103 Copyright GrapeCity inc. All rights reserved.

105 , このトピックの 作 業 結 果 以 下 の 図 は グラフフッターを 水 色 の 前 景 色 にした 場 合 を 示 しています ツールチップの 定 義 以 下 のコードは Hint オブジェクトを 使 用 して Y 値 を 表 示 するツールチップを 作 成 する 方 法 を 示 します hint: { content: function () { return this.data.label + ' ' + this.y + ''; このトピックの 作 業 結 果 以 下 の 図 は 各 データ 系 列 にホバーしたときに 表 示 されるツールチップを 示 しています 104 Copyright GrapeCity inc. All rights reserved.

106 シリーズ 一 覧 の 定 義 以 下 のコードは シリーズ 一 覧 配 列 コレクションを 使 用 してグラフ 化 するデータを 組 み 込 む 方 法 を 示 します この 例 では 文 字 列 型 の X データと 数 値 型 の Y データで3つの 系 列 が 定 義 されています 横 棒 グラフであるため X 軸 と Y 軸 が 反 転 して 表 示 さ れます serieslist: [ { label: " 女 ", legendentry: true, data: { x: [161.4, 169.0, 166.2, 159.4, 162.5, 159.0, 162.8, 159.0, 179.8, 162.9, 161.0, 151.1, 168.2, 168.9, 173.2,174.0, 162.6, 174.0, 162.6, 161.3, 156.2, 149.9, 169.5, 160.0, 175.3, 169.5, 160.0, 172.7, 162.6, 157.5, 176.5, 164.4, 160.7, 174.0, 163.8], y: [63.4, 58.2, 58.6, 45.7, 52.2, 48.6, 57.8, 55.6, 66.8, 59.4, 53.6, 73.2, 53.4, 69.0, 58.4,73.6, 61.4, 55.5, 63.6, 60.9, 60.0, 46.8, 57.3, 64.1, 63.6, 67.3, 75.5, 68.2, 61.4, 76.8, 71.8, 55.5, 48.6, 66.4, 67.3], visible: true, markertype: "circle", { label: " 男 ", legendentry: true, data: { x: [175.0, 174.0, 165.1, 177.0, 192.0, 176.5, 169.4, 182.1, 179.8, 105 Copyright GrapeCity inc. All rights reserved.

107 175.3, 184.9, 177.3, 167.4, 178.1, 168.9,174.0, 167.6, 170.2, 167.6, 188.0, 174.0, 176.5, 180.3, 167.6, 188.0, 180.3, 167.6, 183.0, 183.0, 179.1,170.2, 177.8, 179.1, 190.5, 177.8, 180.3, ], y: [70.2, 73.4, 70.5, 68.9, 102.3, 68.4, 65.9, 75.7, 84.5, 87.7, 86.4, 73.2, 53.9, 72.0, 55.5,70.9, 64.5, 77.3, 72.3, 87.3, 80.0, 82.3, 73.6, 74.1, 85.9, 73.2, 76.3, 65.9, 90.9, 89.1,62.3, 82.7, 79.1, 98.2, 84.1, 83.2, 83.2 ], visible: true, markertype: "diamond" ], 系 列 のホバースタイルの 定 義 系 列 およびホバー 系 列 の 色 とストロークスタイルを 定 義 するには 以 下 のコードを 使 用 します seriesstyles: [{ opacity: 0.8, fill: "0-# #2d2d2d", stroke: "#2d2d2d", "stroke-width": "1.5", { opacity: 0.8, fill: "0-#6aaba7-#5f9996", stroke: "#5f9996", "stroke-width": "1.5", { opacity: 0.8, fill: "0-#c3ff00-#afe500", stroke: "#afe500", "stroke-width": "1.5" ], serieshoverstyles: [{ opacity: 1, "stroke-width": "2.5", { opacity: 1, "stroke-width": "2.5", { opacity: 1, "stroke-width": "2.5" ] ホバー 時 のポイントの 効 果 を 強 調 するために ストローク 幅 の 値 に larger が 使 用 されたことに 注 意 してください Gauge ウィジェット このセクションでは MVC4のさまざまなGaugeウィジェットについて 説 明 します Wijlineargauge 106 Copyright GrapeCity inc. All rights reserved.

108 wijlineargauge ウィジェットは 情 報 の 表 示 に 必 要 な 正 確 なグラフィカル 表 現 を 提 供 します 水 平 または 垂 直 の 線 形 ゲージか ら 選 択 します wijlineargauge ウィジェットは jquery.wijmo.wijlineargauge.js ライブラリによって 作 成 されます wijlineargauge ウィジェットの 作 成 に 使 用 されるマークアップは 次 のようになります <div id="wijlineargauge" class="ui-corner-all"> CSS スタイリングをゲージに 多 少 追 加 することもできます この 例 はゲージの 幅 を 指 定 します <style type="text/css"> #gauge.wijlineargauge { width: 400px; </style> 次 のスクリプトは wijlineargauge ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijlineargauge").wijlineargauge({ width: 400, height: 100, value: 50, max: 100, min: 0, </script> 関 連 項 目 : wijlineargauge の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください wijlineargauge Wijlineargauge チュートリアル 以 下 のチュートリアルでは 複 数 の 画 像 を 表 示 する 線 形 ゲージを 含 む MVC プロジェクトの 作 成 手 順 について 説 明 します 注 意 : このチュートリアルでは MVC Classicバープロジェクトを 作 成 済 みであることを 前 提 にしています 詳 細 について は MVC Classic プロジェクトの 作 成 トピックを 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では 最 初 にビューを 設 定 します コンテンツを 線 形 ゲージに 追 加 します 注 意 : この 手 順 では MVC Classicバープロジェクトを 作 成 済 みであることを 前 提 にしています 詳 細 については MVC Classic プロジェクトの 作 成 トピックを 参 照 してください 以 下 の 手 順 を 実 行 します 1. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 107 Copyright GrapeCity inc. All rights reserved.

109 2. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="gauge1" class="ui-corner-all"> このマークアップは 線 形 ゲージのコンテンツをページに 追 加 します この 手 順 では ビューを 作 成 しました 次 の 手 順 手 順 2:ウィジェットの 初 期 化 では ウィジェットを 初 期 化 するスクリプトを 追 加 します 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では 線 形 ゲージに 表 示 されるコンテンツを 追 加 するマークアップを 追 加 しました この 手 順 では ウィジェットを 初 期 化 するために 必 要 な jquery スクリプトを 追 加 します 以 下 の 手 順 を 実 行 します 1. 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 し wijlineargauge ウィジェットを 初 期 化 します <script type="text/javascript"> $(document).ready(function () { $("#gauge1").wijlineargauge({ width: 400, height: 100, value: 50, max: 100, min: 0, labels: { style: { fill: "#1E395B", "font-size": "12pt", "font-weight": "800", tickmajor: { position: "inside", offset: -11, interval: 20, factor: 12, style: { fill: "#1E395B", stroke: "none", tickminor: { position: "inside", offset: -11, visible: true, interval: 4, factor: 10, style: { fill: "#1E395B", 108 Copyright GrapeCity inc. All rights reserved.

110 stroke: "none", pointer: { shape: "rect", length: 0.5, style: { fill: "#1E395B", stroke: "#1E395B",, face: { style: { fill: "270-#FFFFFF-#D9E3F0", stroke: "#7BA0CC", "stroke-width": "4", ranges: [{ startvalue: 20, endvalue: 80, startdistance: 0.85, // 比 率 値 は 範 囲 の 開 始 値 の 位 置 を 決 定 します enddistance: 0.85, // 比 率 値 は 範 囲 の 終 了 値 の 位 置 を 決 定 します startwidth: 0.5, endwidth: 0.5, style: { fill: "90-#3DA1D8-#3A6CAC", stroke: "none" ] </script> このスクリプトはウィジェットを 初 期 化 します アプリケーションを 作 成 し wijlineargauge ウィジェットを 追 加 および 初 期 化 しました 次 の 手 順 手 順 3:プロジェクトの 実 行 では ウィジェットの 実 行 時 のインタラクティブ 操 作 を 表 示 します 手 順 3:プロジェクトの 実 行 前 の 手 順 では アプリケーションを 作 成 し wijlineargauge ウィジェットを 追 加 および 初 期 化 しました この 手 順 では ウィ ジェットの 実 行 時 のインタラクティブ 操 作 を 確 認 します 以 下 の 手 順 を 実 行 します 1. [F5]を 押 して アプリケーションを 実 行 します アプリケーションと wijlineargauge は 次 のように 表 示 されます 109 Copyright GrapeCity inc. All rights reserved.

111 このチュートリアルでは wijlineargaugeウィジェットをアプリケーションに 追 加 し 実 行 時 のウィジェットを 観 察 しまし た Linear Gauge へのインタラクティブ 機 能 の 追 加 この 例 では インタラクティブ 機 能 を wijlineargauge ウィジェットに 追 加 します 実 行 時 に 変 更 されたときにゲージの 現 在 の 値 を 変 更 するスライダを 追 加 します MVC コントロールエクスプローラのライブデモで lineargauge > Interactive サンプ ル( 参 照 してください 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 し Views フォルダ 内 部 のShared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. ページの<body> タグ 内 のすぐ 後 に 次 のマークアップを 追 加 します <div id="gauge" class="ui-corner-all"> <p>スライダをドラッグし 解 除 することでゲージの 値 を 変 更 する:</p> <div id="slider" style="width: 400px"> このマークアップによって 1つの 線 形 ゲージウィジェットと1つのスライダのコンテンツがページに 追 加 されます 次 の 手 順 では インタラクティブ 機 能 を 線 形 ゲージに 設 定 します 4. 前 の 手 順 で 追 加 した 終 了 タグ の 後 に 次 の jquery スクリプトを 追 加 し wijlineargauge ウィジェットをカスタマイズし て 初 期 化 します <script type="text/javascript"> $(document).ready(function () { $("#gauge").wijlineargauge({ width: 400, height: 100, value: 50, max: 100, min: 0, animation: { enabled: true, duration: 400, easing: ">", labels: { style: { fill: "#1E395B", "font-size": "12pt", "font-weight": "800", 110 Copyright GrapeCity inc. All rights reserved.

112 tickmajor: { position: "inside", offset: -11, interval: 20, factor: 12, style: { fill: "#1E395B", stroke: "none",, tickminor: { position: "inside", offset: -11, visible: true, interval: 4, factor: 10, style: { fill: "#1E395B", stroke: "none",, pointer: { shape: "tri", length: 0.5, style: { fill: "#1E395B", stroke: "#1E395B", face: { style: { fill: "270-#FFFFFF-#D9E3F0", stroke: "#7BA0CC", "stroke-width": "4" $("#slider").slider({ value: $("#gauge").wijlineargauge("option", "value"), change: function (event, ui) { $("#gauge").wijlineargauge("option", "value", ui.value); </script> これによって 要 素 が 追 加 され wijlineargauge のインタラクティブ 機 能 がカスタマイズされます 実 行 時 にスライダーの 値 を 変 更 すると ゲージの 値 も 変 更 されます このトピックの 作 業 結 果 [F5]を 押 して アプリケーションを 実 行 します スライダのつまみボタンをクリック&ドラッグして マウスを 離 します ゲージがス 111 Copyright GrapeCity inc. All rights reserved.

113 ライダの 新 しい 値 を 反 映 していることに 注 意 してください 線 形 ゲージの 向 きの 設 定 wijlineargauge ウィジェットは 水 平 と 垂 直 向 きをサポートします この 機 能 を 活 用 するには orientation オプションを 単 に 設 定 します 例 については MVC コントロールエクスプローラのライブデモで lineargauge > Orientation サンプル ( 参 照 してください 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 し Views フォルダ 内 部 のShared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. ページの<body> タグ 内 のすぐ 後 に 次 のマークアップを 追 加 します <div id="gauge"> <div class="demo-options"> <select id="orientation"> <option> 水 平 方 向 </option> <option> 垂 直 方 向 </option> </select> 4. 前 の 手 順 で 追 加 した 終 了 タグ の 後 に 次 の jquery スクリプトを 入 力 し wijlineargauge ウィジェットを 初 期 化 して orientation オプションを 設 定 します <script type="text/javascript"> $(document).ready(function () { $("#gauge").wijlineargauge({ value: 50, labels: { style: { fill: "#1E395B", "font-size": "12pt", "font-weight": "800", tickmajor: { position: "inside", interval: 20, style: { fill: "#1E395B", stroke: "none" 112 Copyright GrapeCity inc. All rights reserved.

114 , tickminor: { position: "inside", visible: true, interval: 4, style: { fill: "#1E395B", stroke: "none", pointer: { shape: "rect", length: 0.5, style: { fill: "#1E395B", stroke: "#1E395B", face: { style: { fill: "270-#FFFFFF-#D9E3F0", stroke: "#7BA0CC", "stroke-width": "4" $("#orientation").change(function () { var orientation = $(this).val(); $("#gauge").wijlineargauge("option", "orientation", orientation); </script> 実 行 時 ドロップダウンボックスを 使 用 してゲージの 向 きを 選 択 できます このトピックの 作 業 結 果 [F5]を 押 して アプリケーションを 実 行 します ゲージが 水 平 向 き(デフォルト)に 表 示 されることに 注 意 してください ゲージの 向 きを 垂 直 に 変 更 するには ドロップダウンから vertical を 選 択 します 対 数 ゲージの 作 成 wijlineargauge ウィジェットは 対 数 スケールの 値 の 表 示 をサポートします この 機 能 を 活 用 するには islogarithmic オプショ ンを 単 に 設 定 します 例 については MVC コントロールエクスプローラのライブデモで lineargauge > Logarithmic サンプル ( 参 照 してください ページャタイプを 設 定 するには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 し Views フォルダ 内 部 のshared フォルダを 展 開 し Layout をダブルクリックして ファイルを 開 きます 3. ページの<body> タグ 内 のすぐ 後 に 次 のマークアップを 追 加 します 113 Copyright GrapeCity inc. All rights reserved.

115 <div id="gauge"> <div class="options"> <input type="checkbox" id="checkbox1" checked="checked" /> <label for="checkbox1">islogarithmic</label> このマークアップによって 1つの 線 形 ゲージウィジェットと1つのチェックボックスのコンテンツがページに 追 加 されま す 4.. 前 の 手 順 で 追 加 した 終 了 タグ の 後 に 次 の jquery スクリプトを 追 加 し wijlineargauge ウィジェットを 初 期 化 しま す <script type="text/javascript"> $(document).ready(function () { $("#gauge").wijlineargauge({ value: 50, islogarithmic: true, labels: { style: { fill: "#1E395B", "font-size": "12pt", "font-weight": "800", tickmajor: { position: "inside", interval: 20, style: { fill: "#1E395B", stroke: "none", tickminor: { position: "inside", visible: true, interval: 4, style: { fill: "#1E395B", stroke: "none", pointer: { shape: "rect", length: 0.5, style: { fill: "#1E395B", stroke: "#1E395B", face: { style: { 114 Copyright GrapeCity inc. All rights reserved.

116 fill: "270-#FFFFFF-#D9E3F0", stroke: "#7BA0CC", "stroke-width": "4" $("#checkbox1").change(function () { $("#gauge").wijlineargauge("option", "islogarithmic", $(this).is(":checked")); </script> チェックボックスが ON の 場 合 ゲージは 対 数 スケールで 値 を 表 示 します チェックボックスが OFF の 場 合 値 はデフォ ルトスケールで 表 示 されます このトピックの 作 業 結 果 [F5]を 押 して アプリケーションを 実 行 します チェックボックスが ON の 場 合 はゲージが 対 数 スケールで 値 を 表 示 し チェック ボックスが OFF の 場 合 は 値 がデフォルトスケールで 表 示 されることに 注 意 してください 線 形 ゲージの 外 観 のカスタマイズ wijlineargauge ウィジェットの 外 観 は 簡 単 にカスタマイズできます tickmajor tickminor pointer face の 各 オプションを 単 に 設 定 するだけです 例 については MVC コントロールエクスプローラのライブデモで lineargauge > Level サンプル ( 参 照 してください ページャタイプを 設 定 するには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 し Views フォルダ 内 部 のshared フォルダを 展 開 し Layout をダブルクリックして ファイルを 開 きます 3. ページの<body> タグ 内 のすぐ 後 に 次 のマークアップを 追 加 します <div id="gauge"> <div class="options"> <input type="checkbox" id="checkbox1" checked="checked" /> <label for="checkbox1">islogarithmic</label> このマークアップによって 線 形 ウィジェットがページに 追 加 されます 4. 前 の 手 順 で 追 加 した 終 了 タグ の 後 に 次 の jquery スクリプトを 追 加 し wijlineargauge ウィジェットを 初 期 化 します <script type="text/javascript"> $(document).ready(function () { $("#gauge").wijlineargauge({ width: 400, height: 70, value: 50, tickmajor: { position: "center", factor: 3, offset: 5, 115 Copyright GrapeCity inc. All rights reserved.

117 style: { fill: "#efefef", stroke: "none", tickminor: { position: "center", visible: true, style: { fill: "#efefef", stroke: "none", pointer: { length:.6, width: 8, style: { fill: "180-#FB7800-#C00100", stroke: "#FB7800", opacity: 0.8, face: { style: { fill: "270-#C9C9C9-#A6A6A6", stroke: "270-#C9C9C9-#A6A6A6" // 位 置 変 数 var x = 0; // 速 度 var vx = 0; // 加 速 var ax = 0; var delay = 10; var vmultiplier = 0.05; if (window.devicemotionevent === undefined) { // デバイスはモーション API をサポートしません else { window.ondevicemotion = function (event) { ax = event.accelerationincludinggravity.x; //console.log("accelerometer data - x: " + event.accelerationincludinggravity.x + " y: " + event.accelerationincludinggravity.y + " z: " + event.accelerationincludinggravity.z); ; setinterval(function () { vx = vx + ax; x = parseint(x + vx * vmultiplier); if (x < 0) { x = 0; vx = 0; if (x > 100) { x = 100; vx = 0; $("#gauge").wijlineargauge("option", "value", x);, delay); </script> wijlineargauge ウィジェットが 書 式 設 定 されます 116 Copyright GrapeCity inc. All rights reserved.

118 このトピックの 作 業 結 果 [F5]を 押 して アプリケーションを 実 行 します ゲージが 書 式 設 定 されていることに 注 意 してください Wijradialgauge Wijradialgauge ウィジェットでは ダイヤルや 速 度 計 を 含 む 一 般 的 な 放 射 状 ゲージを 作 成 できます 単 純 なオプションを 使 用 し 開 始 と 掃 引 角 度 目 盛 範 囲 およびポインタをカスタマイズします wijradialgauge ウィジェットは jquery.wijmo.wijradialgauge.js ライブラリによって 作 成 されます wijradialgauge ウィジェットの 作 成 に 使 用 されるマークアップは 次 のようになります <div id="gauge"> 次 のスクリプトは wijradialgauge ウィジェットを 初 期 化 します <script type="text/javascript"> $(document).ready(function () { $("#gauge").wijradialgauge({ value: 100, max: 150, min: 0, startangle: -45, sweepangle: 270, radius: "auto", islogarithmic: false, origin: { x: 0.5, y: 0.5, labels: { offset: 27, //4F6B82 style: { fill: "#1E395B", "font-size": "12pt", "font-weight": "800", tickminor: { position: "inside", offset: 30, style: { "height": "3px", "width": "10px", fill: "#1E395B", stroke: "#E7EFF8", interval: 5, visible: true, tickmajor: { 117 Copyright GrapeCity inc. All rights reserved.

119 position: "inside", offset: 27, style: { fill: "#1E395B", "height": "4px", "width": "20px", stroke: "#E7EFF8", "stroke-width": "1.5", interval: 25, visible: true, ranges: [ { startwidth: 2, endwidth: 5, startvalue: 0, endvalue: 10, startdistance: 1, enddistance: 0.98, style: { fill: "#7BA0CC", stroke: "#7BA0CC", "stroke-width": "0", { startwidth: 5, endwidth: 20, startvalue: 10, endvalue: 125, startdistance: 0.98, enddistance: 0.9, style: { fill: "0-#B4D5F0-#B4D5F0", stroke: "#FFFFFF", "stroke-width": "0", { startwidth: 20, endwidth: 25, startvalue: 125, endvalue: 150, startdistance: 0.9, enddistance: 0.86, style: { fill: "#7BA0CC", stroke: "#7BA0CC", "stroke-width": "0" ], 118 Copyright GrapeCity inc. All rights reserved.

120 face: { style: { fill: "r(0.9, 0.60)#FFFFFF-#D9E3F0", stroke: "#7BA0CC", "stroke-width": "4", pointer: { length: 0.8, offset: 0, shape: "rect", width: 6, style: { fill: "#1E395B", stroke: "#1E395B", cap: { radius: 10, style: { fill: "#1E395B", stroke: "#1E395B" </script> 関 連 項 目 : wijradialgauge の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください wijradialgauge Wijradialgauge チュートリアル 以 下 のチュートリアルでは 複 数 の 画 像 を 表 示 する 放 射 状 ゲージを 含 む MVC プロジェクトの 作 成 手 順 について 説 明 します 注 意 :このチュートリアルでは MVC Classicバープロジェクトを 作 成 済 みであることを 前 提 にしています 詳 細 について は MVC Classic プロジェクトの 作 成 トピックを 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では 最 初 にビューを 設 定 します コンテンツを 線 形 ゲージに 追 加 します 注 意 : この 手 順 では MVC Classicバープロジェクトを 作 成 済 みであることを 前 提 にしています 詳 細 については MVC Classic プロジェクトの 作 成 トピックを 参 照 してください 以 下 の 手 順 を 実 行 します 1. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 119 Copyright GrapeCity inc. All rights reserved.

121 2. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="gauge"> このマークアップは 放 射 状 ゲージのコンテンツをページに 追 加 します この 手 順 では ビューを 作 成 しました 次 の 手 順 手 順 2:ウィジェットの 初 期 化 では ウィジェットを 初 期 化 するスクリプトを 追 加 します 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では 線 形 ゲージに 表 示 されるコンテンツを 追 加 するマークアップを 追 加 しました この 手 順 では ウィジェットを 初 期 化 するために 必 要 な jquery スクリプトを 追 加 します 以 下 の 手 順 を 実 行 します 1. 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 し wijradialgauge ウィジェットを 初 期 化 します <script type="text/javascript"> $(document).ready(function () { $("#gauge").wijradialgauge({ value: 100, max: 150, min: 0, startangle: -45, sweepangle: 270, radius: "auto", islogarithmic: false, origin: { x: 0.5, y: 0.5, labels: { offset: 27, //4F6B82 style: { fill: "#1E395B", "font-size": "12pt", "font-weight": "800", tickminor: { position: "inside", offset: 30, style: { fill: "#1E395B", stroke: "#E7EFF8", interval: 5, visible: true, tickmajor: { position: "inside", 120 Copyright GrapeCity inc. All rights reserved.

122 offset: 27, style: { fill: "#1E395B", stroke: "#E7EFF8", "stroke-width": "1.5", interval: 25, visible: true, ranges: [ { startwidth: 2, endwidth: 5, startvalue: 0, endvalue: 10, startdistance: 0.6, enddistance: 0.58, style: { fill: "#7BA0CC", stroke: "#7BA0CC", "stroke-width": "0", { startwidth: 5, endwidth: 20, startvalue: 10, endvalue: 125, startdistance: 0.58, enddistance: 0.54, style: { fill: "0-#B4D5F0-#B4D5F0", stroke: "#FFFFFF", "stroke-width": "0", { startwidth: 20, endwidth: 25, startvalue: 125, endvalue: 150, startdistance: 0.54, enddistance: 0.5, style: { fill: "#7BA0CC", stroke: "#7BA0CC", "stroke-width": "0" ], face: { style: { 121 Copyright GrapeCity inc. All rights reserved.

123 fill: "r(0.9, 0.60)#FFFFFF-#D9E3F0", stroke: "#7BA0CC", "stroke-width": "4", pointer: { length: 0.8, offset: 0, shape: "rect", width: 6, style: { fill: "#1E395B", stroke: "#1E395B", cap: { radius: 10, style: { fill: "#1E395B", stroke: "#1E395B" </script> このスクリプトはウィジェットを 初 期 化 します アプリケーションを 作 成 し wijradialgauge ウィジェットを 追 加 および 初 期 化 しました 次 の 手 順 手 順 3:プロジェクトの 実 行 では ウィジェットの 実 行 時 のインタラクティブ 操 作 を 表 示 します 手 順 3:プロジェクトの 実 行 前 の 手 順 では アプリケーションを 作 成 し wijradialgauge ウィジェットを 追 加 および 初 期 化 しました この 手 順 では ウィ ジェットの 実 行 時 のインタラクティブ 操 作 を 確 認 します 以 下 の 手 順 を 実 行 します 1. [F5]を 押 して アプリケーションを 実 行 します アプリケーションと wijradialgauge は 次 のように 表 示 されます 122 Copyright GrapeCity inc. All rights reserved.

124 このチュートリアルでは wijradialgauge ウィジェットをアプリケーションに 追 加 し 実 行 時 のウィジェットを 観 察 しまし た 対 数 ゲージの 作 成 wijradialgauge ウィジェットは 対 数 スケールでの 値 の 表 示 をサポートします この 機 能 を 活 用 するには islogarithmic オ プションを 設 定 するだけです 例 については MVC コントロールエクスプローラのライブデモで radialgauge > Logarithmic サンプル( 参 照 してください ページャタイプを 設 定 するには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 し Views フォルダ 内 部 のShared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. ページの <body> タグ 内 のすぐ 後 に 次 のマークアップを 追 加 します <div id="gauge"> <div class="options"> <input type="checkbox" id="checkbox1" checked="checked" /> <label for="checkbox1">islogarithmic</label> このマークアップによって 1つの 放 射 状 ゲージウィジェットと1つのチェックボックスのコンテンツがページに 追 加 されま す 4. 前 の 手 順 で 追 加 した 終 了 タグ の 後 に 次 の jquery スクリプトを 追 加 し wijradialgauge ウィジェットを 初 期 化 します <script type="text/javascript"> $(document).ready(function () { $("#gauge").wijradialgauge({ value: 100, max: 150, min: 0, 123 Copyright GrapeCity inc. All rights reserved.

125 startangle: -45, sweepangle: 270, radius: "auto", islogarithmic: true, origin: { x: 0.5, y: 0.5, labels: { offset: 27, //4F6B82 style: { fill: "#1E395B", "font-size": "12pt", "font-weight": "800", tickminor: { position: "inside", offset: 30, style: { "height": "3px", "width": "10px", fill: "#1E395B", stroke: "#E7EFF8", interval: 5, visible: true, tickmajor: { position: "inside", offset: 27, style: { fill: "#1E395B", "height": "4px", "width": "20px", stroke: "#E7EFF8", "stroke-width": "1.5", interval: 25, visible: true, ranges: [ { startwidth: 2, endwidth: 5, startvalue: 0, endvalue: 10, startdistance: 0.6, enddistance: 0.58, style: { fill: "#7BA0CC", stroke: "#7BA0CC", "stroke-width": "0" 124 Copyright GrapeCity inc. All rights reserved.

126 , { startwidth: 5, endwidth: 20, startvalue: 10, endvalue: 125, startdistance: 0.58, enddistance: 0.54, style: { fill: "0-#B4D5F0-#B4D5F0", stroke: "#FFFFFF", "stroke-width": "0", { startwidth: 20, endwidth: 25, startvalue: 125, endvalue: 150, startdistance: 0.54, enddistance: 0.5, style: { fill: "#7BA0CC", stroke: "#7BA0CC", "stroke-width": "0" ], face: { style: { fill: "r(0.9, 0.60)#FFFFFF-#D9E3F0", stroke: "#7BA0CC", "stroke-width": "4", pointer: { length: 0.8, offset: 0, shape: "rect", width: 6, style: { fill: "#1E395B", stroke: "#1E395B", cap: { radius: 10, style: { fill: "#1E395B", stroke: "#1E395B" 125 Copyright GrapeCity inc. All rights reserved.

127 $("#checkbox1").change(function () { $("#gauge").wijradialgauge("option", "islogarithmic", $(this).is(":checked")); </script> チェックボックスが ON の 場 合 ゲージは 対 数 スケールで 値 を 表 示 します チェックボックスが OFF の 場 合 値 はデフォ ルトスケールで 表 示 されます このトピックの 作 業 結 果 [F5]を 押 して アプリケーションを 実 行 します チェックボックスが ON の 場 合 はゲージが 対 数 スケールで 値 を 表 示 し チェック ボックスが OFF の 場 合 は 値 がデフォルトスケールで 表 示 されることに 注 意 してください 実 行 時 の 放 射 状 ゲージのマージンの 設 定 実 行 時 に wijradialgauge ウィジェットのマージンを 簡 単 に 設 定 できます 例 については MVC コントロールエクスプローラの ライブデモで radialgauge > Margin サンプル ( 参 照 してください マージンを 設 定 するには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 し Views フォルダ 内 部 のShared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. ページの <body> タグ 内 のすぐ 後 に 次 のマークアップを 追 加 します <div id="gauge"> <div> <p> <label>marginleft:</label> <input type="text" id="txleft" value="0" /> </p> <p> <label>marginright:</label> <input type="text" id="txright" value="0" /> </p> <p> <label>margintop:</label> <input type="text" id="txtop" value="0" /> </p> <p> <label>marginbottom:</label> <input type="text" id="txbottom" value="0" /> </p> <p> <input type="button" id="btnexec" value="apply" /> </p> このマークアップによって 1つの 放 射 状 ゲージウィジェットと4つのテキストボックスのコンテンツが 追 加 されます 次 の 126 Copyright GrapeCity inc. All rights reserved.

128 手 順 では ゲージを 初 期 化 します 4. 前 の 手 順 で 追 加 した 終 了 タグ <body> の 後 に 次 の jquery スクリプトを 追 加 し wijradialgauge ウィジェットを 初 期 化 します <script type="text/javascript"> $(document).ready(function () { $("#gauge").wijradialgauge({ value: 100, max: 150, min: 0, startangle: -45, sweepangle: 270, islogarithmic: false, origin: { x: 0.5, y: 0.5, labels: { offset: -30, //4F6B82 style: { fill: "#556A7C", stroke: "#556A7C", tickminor: { position: "inside", style: { fill: "#556A7C", stroke: "#556A7C", interval: 2, visible: true, offset: 0, tickmajor: { position: "center", style: { fill: "#556A7C", stroke: "#556A7C", interval: 10, visible: true, face: { style: { fill: "#E0E8EF", stroke: "#E0E8EF", pointer: { length: 1, style: { 127 Copyright GrapeCity inc. All rights reserved.

129 fill: "#BF551C", stroke: "#BF551C", cap: { style: { fill: "#7F9CAD", stroke: "#7F9CAD" $("#btnexec").click(function () { $("#gauge").wijradialgauge("option", "marginleft", parseint($("#txleft").val())); $("#gauge").wijradialgauge("option", "marginright", parseint($("#txright").val())); $("#gauge").wijradialgauge("option", "margintop", parseint($("#txtop").val())); $("#gauge").wijradialgauge("option", "marginbottom", parseint($("#txbottom").val())); ) </script> 実 行 時 にゲージのマージンを 設 定 できます このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し テキストボックスのそれぞれに 値 (50 など)を 入 力 して 適 用 ボタンをクリックしま す ゲージのマージンが 指 定 した 値 に 変 わります 実 行 時 の 放 射 状 ゲージの 位 置 の 設 定 実 行 時 に wijradialgauge ウィジェットのマージンを 簡 単 に 設 定 できます 例 については MVC コントロールエクスプローラのラ イブデモで radialgauge > Margin サンプル ( 参 照 してください マージンを 設 定 するには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 し Views フォルダ 内 部 のShared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. ページの <body> タグ 内 のすぐ 後 に 次 のマークアップを 追 加 します <div id="gauge"> <div class="options"> <p>pointer</p> Length:<input id="p_length" type="text" /> Offset:<input id="p_offset" type="text" /> <p>label</p> Offset:<input id="l_offset" type="text" /> <p>tick</p> 128 Copyright GrapeCity inc. All rights reserved.

130 Offset:<input id="t_offset" type="text" /> Position:<select id="t_position"><option value="inside">inside</option> <option value="outside">outside</option> </select> <p>range1</p> start Distance<input id="rs_distance" type="text" /> end Distance<input id="re_distance" type="text" /> <br /> <input id="applyoption" type="button" value="apply" /> このマークアップによって 1つの 放 射 状 ゲージウィジェットといくつかのテキストボックスが 追 加 され 実 行 時 に 位 置 の 設 定 が 可 能 になります 次 の 手 順 では ゲージを 初 期 化 します 4. 前 の 手 順 で 追 加 した 終 了 タグ<body>の 後 に 次 の jquery スクリプトを 追 加 し wijradialgauge ウィジェットを 初 期 化 します <script type="text/javascript"> $(document).ready(function () { $("#gauge").wijradialgauge({ value: 100, max: 150, min: 0, startangle: -45, sweepangle: 270, radius: 170, islogarithmic: false, origin: { x: 0.5, y: 0.5, labels: { offset: -30, //4F6B82 style: { fill: "#556A7C", stroke: "#556A7C", tickminor: { position: "inside", style: { fill: "#556A7C", stroke: "#556A7C", interval: 2, visible: true, offset: 0, tickmajor: { position: "center", style: { fill: "#556A7C", stroke: "#556A7C" 129 Copyright GrapeCity inc. All rights reserved.

131 , interval: 10, visible: true, ranges: [{ startwidth: 15, endwidth: 20, startvalue: 20, endvalue: 50, startdistance: 1, enddistance: 1, style: { fill: "#BC8A8E", stroke: "#BC8A8E" ], face: { style: { fill: "#E0E8EF", stroke: "#E0E8EF", pointer: { length: 1, style: { fill: "#BF551C", stroke: "#BF551C", cap: { style: { fill: "#7F9CAD", stroke: "#7F9CAD" $("#applyoption").click(function () { var option = {, pointer = {, label = {, tick = {, range1 = {; pointer.length = getinputnum("p_length"); pointer.offset = getinputnum("p_offset"); label.offset = getinputnum("l_offset"); tick.offset = getinputnum("t_offset"); tick.position = $("#t_position").val(); range1 = $("#gauge").wijradialgauge("option", "ranges")[0]; range1.startdistance = getinputnum("rs_distance"); range1.enddistance = getinputnum("re_distance"); option.pointer = pointer; option.labels = label; option.tickminor = tick; option.tickmajor = tick; option.ranges = []; option.ranges[0] = range1; 130 Copyright GrapeCity inc. All rights reserved.

132 $("#gauge").wijradialgauge("option", option); var getinputnum = function (id) { var val = $("#" + id).val(); return val? parseint(val) : undefined; </script> 実 行 時 にゲージの 位 置 を 設 定 できます このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し テキストボックスのそれぞれに 値 を 入 力 して 適 用 ボタンをクリックします ゲージ の 位 置 が 指 定 した 値 に 変 わります 放 射 状 ゲージの 外 観 のカスタマイズ wijradialgauge ウィジェットの 外 観 は 簡 単 にカスタマイズできます tickmajor tickminor pointer face の 各 オプション を 設 定 するだけです 例 については MVC コントロールエクスプローラのライブデモで radialgauge > RPM サンプル ( 参 照 してください ページャタイプを 設 定 するには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 し Views フォルダ 内 部 のShared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. ページの <body> タグ 内 のすぐ 後 に 次 のマークアップを 追 加 します <div id="gauge" style="background: #000" class="ui-corner-all"> このマークアップによって 放 射 状 ゲージウィジェットがページに 追 加 されます 4. 前 の 手 順 で 追 加 した 終 了 タグ <body> の 後 に 次 の jquery スクリプトを 追 加 し wijradialgauge ウィジェットを 初 期 化 します <script type="text/javascript"> $(document).ready(function () { $("#gauge").wijradialgauge({ width: 500, height: 500, radius: "auto", value: 468, max: 1200, min: 0, startangle: 270, sweepangle: 240, labels: { style: { "font-size": "15pt", "font-weight": "800", fill: "#000", 131 Copyright GrapeCity inc. All rights reserved.

133 ui.r); "#fff" 100); offset: -5, pointer: { length: 1, width: 16, style: { fill: "340-#FB7800-#C00100", stroke: "none", cap: { style: { fill: "#C00100", stroke: "none", tickmajor: { factor: 8, offset: 0, interval: 100, position: "inside", style: { fill: "#333333", stroke: "none", tickminor: { factor: 3, visible: true, offset: 10, interval: 25, position: "inside", style: { fill: "#333333", stroke: "none", face: { style: {, template: function (ui) { var set = ui.canvas.set(); var circle = ui.canvas.circle(ui.origin.x, ui.origin.y, circle.attr({ "stroke": "#474747", "stroke-width": 3, fill: set.push(circle); var circle2 = ui.canvas.circle(ui.origin.x, ui.origin.y, circle2.attr({ fill: "#060606" set.push(circle2); return set;, ranges: [{ startwidth: 73, endwidth: 73, startvalue: 1000, endvalue: 1200, startdistance: 0.575, enddistance: 0.575, style: { 132 Copyright GrapeCity inc. All rights reserved.

134 fill: "40-#FB7800-#C00100", stroke: "none", { startwidth: 10, endwidth: 1, startvalue: 625, endvalue: 1175, startdistance: 0.75, enddistance: 0.8, style: { fill: "#333333", stroke: "none" ] </script> wijradialgauge ウィジェットが 書 式 設 定 されます このトピックの 作 業 結 果 [F5]を 押 して アプリケーションを 実 行 します ゲージが 書 式 設 定 されていることに 注 意 してください Wijinput wijinput ウィジェットでは ユーザーが 入 力 するデータ 型 に 応 じて マスク 数 値 パーセント 通 貨 および 日 付 の 入 力 を 作 成 できます この wijinputmask ウィジェットは ユーザーがテキストボックスに 入 力 できる 値 を 制 御 して データエントリの 効 率 と 精 度 を 高 めます wijinput ウィジェットは jquery.wijmo.wijinputcore.js jquery.wijmo.wijinputdate.js jquery.wijmo.wijinputmask.js および jquery.wijmo.wijinputnumber.js ライブラリによって 作 成 されます jquery.wijmo.wijinputcore.js ライブラリは 共 有 可 能 な 基 本 ライブラリで 各 入 力 のウィジェットライブラリの 前 にリンクする 必 要 があります 133 Copyright GrapeCity inc. All rights reserved.

135 Wijinputmask wijinputmask を 表 示 するビューの.cshtml ファイルを 開 きます 次 のマークアップのように テキストボックス 要 素 を 追 加 しま す <input type="text" id="textbox1" /> ここで wijinputmask ウィジェットを 初 期 化 する 必 要 があります これを 行 うには 次 のスクリプトを.cshtml ファイルに 追 加 できます <script type="text/javascript"> $(function () { $("#textbox1").wijinputmask( { mask: '(999) ', </script> この 場 合 入 力 マスクは 10 文 字 の 数 値 入 力 ( 局 番 を 含 む 電 話 番 号 のフィールド)となります ただし 7 桁 の 電 話 番 号 ( )から 社 会 保 障 番 号 ( )まで さまざまな 入 力 マスクを 作 成 できます マスクタイプ 下 の 表 に マスクのいくつかの 例 とその 動 作 を 示 します マスク 動 作 00/00/0000 国 際 的 な 日 付 書 式 の 日 付 ( 日 数 字 月 年 ) / 文 字 は 論 理 日 付 区 切 り 文 字 で アプリケー ションの 現 在 のカルチャに 適 切 な 日 付 区 切 り 文 字 としてユーザーに 表 示 されます 日 付 パターン を 指 定 するには wijinputdate ウィジェットを 使 用 できることに 注 意 してください 00->L<LL-0000 米 国 書 式 の 日 付 ( 日 省 略 月 名 および 年 ) 大 文 字 の 語 頭 の 後 に 小 文 字 が 続 く3 文 字 の 省 略 月 名 を 表 示 します (999) 米 国 電 話 番 号 局 番 (オプション) ユーザーがオプション 文 字 を 入 力 しないときは スペースを 入 力 するか 最 初 の0で 示 される 位 置 にマウスポインタを 直 接 入 れることができます $999, ~ 範 囲 の 通 貨 値 通 貨 桁 区 切 り および 小 数 点 の 各 文 字 は 実 行 時 に カルチャ 固 有 の 等 価 に 置 換 されます mask オプションを 使 用 し wijinputmask ウィジェットのマスク 要 素 を 定 義 します マスク 編 集 を 定 義 する 場 合 ウィジェット 内 の 各 文 字 位 置 は 特 殊 プレースホルダまたはリテラル 文 字 のいずれかにマップします リテラル 文 字 (リテラル)は 使 用 されてい るデータのタイプについて 視 覚 的 なキューを 提 供 します たとえば 電 話 番 号 の 局 番 を 囲 むカッコとダッシュは リテラルです 例 :(412) マスクの 編 集 機 能 により 無 効 な 文 字 が 入 力 されないようにして ユーザーインタフェースをさらに 強 化 す ることができます C1MaskedInput 文 字 マスク 入 力 を 有 効 にするには mask オプションを 1つまたは 複 数 のプレースホルダとリテラルで 構 成 されるマスク 文 字 列 に 134 Copyright GrapeCity inc. All rights reserved.

136 設 定 します 下 の 表 に 使 用 可 能 なプレースホルダを 示 します マスク 要 素 説 明 0 数 字 ( 必 須 ) この 要 素 は 0~9の1 桁 の 数 字 を 受 け 付 けます 9 数 字 またはスペース(オプション) # 数 字 またはスペース(オプション) マスク 内 でこの 位 置 が 空 白 の 場 合 スペースとして レンダリングされます プラス(+)とマイナス(-) 符 号 が 許 容 されます L 文 字 ( 必 須 ) 入 力 を ASCII 文 字 a-z と A-Z に 制 限 します このマスク 要 素 は 正 規 表 現 の [a-za-z] と 等 価 です? 文 字 (オプション) 入 力 を ASCII 文 字 a-z と A-Z に 制 限 します このマスク 要 素 は 正 規 表 現 の [a-za-z]? と 等 価 です & 文 字 ( 必 須 ) C 文 字 (オプション) 任 意 の 非 制 御 文 字 A 英 数 字 (オプション). 小 数 点 プレースホルダ 使 用 される 実 際 の 表 示 文 字 は culture オプションに 適 切 な 小 数 点 プレースホルダとなります, 3 桁 プレースホルダ 使 用 される 実 際 の 表 示 文 字 は culture オプションに 適 切 な3 桁 プレースホルダとなります : 時 刻 区 切 り 文 字 使 用 される 実 際 の 表 示 文 字 は culture オプションに 適 切 な 時 刻 プ レースホルダとなります / 日 付 区 切 り 文 字 使 用 される 実 際 の 表 示 文 字 は culture オプションに 適 切 な 日 付 プ レースホルダとなります $ 通 貨 記 号 使 用 される 実 際 の 表 示 文 字 は culture プロパティに 適 切 な 通 貨 記 号 とな ります < シフトダウン 後 続 のすべての 文 字 を 小 文 字 に 変 換 します > シフトアップ 後 続 のすべての 文 字 を 大 文 字 に 変 換 します 直 前 のシフトアップまたはシフトダウンを 無 効 にします \ エスケープ マスク 文 字 をエスケープして リテラルに 変 えます \\ は バックスラッ シュのエスケープシーケンスです <<n...m>> ユーザー 入 力 を 宣 言 された 数 値 範 囲 に 制 限 します 例 :<< >> <<Value1 Value2 Value3>> その 他 のすべての 文 字 ユーザー 入 力 をセットオプションの1つに 制 限 します 文 字 ( )は オプション 値 の 間 の 区 切 り 文 字 として 機 能 します 例 :<<オプション1 オプション2 オプション3>> リテラル すべての 非 マスク 要 素 は wijinputmask 内 にそのまま 表 示 されます リテ ラルは 常 に 実 行 時 にマスク 内 の 静 的 位 置 を 占 め ユーザーによって 移 動 または 削 除 できません 関 連 項 目 : wijinputmask の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijinputmask 135 Copyright GrapeCity inc. All rights reserved.

137 Wijinputmask チュートリアル 以 下 のチュートリアルでは 電 話 番 号 マスクを 使 用 する 入 力 テキストボックスを 含 む MVC プロジェクトの 作 成 手 順 について 説 明 します このトピックでは ASP.NET MVC 4 Wijmo アプリケーションを 作 成 済 みであることが 前 提 となります 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1: ビューの 設 定 この 手 順 では 電 話 番 号 マスクを 使 用 する 入 力 テキストボックスを 追 加 します 以 下 を 実 行 します 1. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックして ファイルを 開 きます 2. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します このマークアップは 初 期 数 値 を 持 つ 入 力 テキストボック スを 追 加 します 1つのゼロをマスク 要 素 として 使 用 すると 1つの 数 字 を 入 力 する 必 要 があります <div class="page"> <div id="header"> <div id="title"> <h2> 概 要 </h2> <div class="main demo"> <!-- デモマークアップの 開 始 --> <input type="text" id="textbox1" value="(412) " /> <h5> マスク:</h5> <p> (999) </p> <!-- デモマークアップの 終 了 --> 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では 入 力 テキストボックスと 初 期 数 値 を 作 成 するマークアップを 追 加 しました ここでは ウィジェットを 使 用 し 入 力 された 任 意 の 数 値 を 電 話 番 号 のような 外 観 に 自 動 的 に 書 式 設 定 する jquery スクリプトを 追 加 できます 入 力 テキストボックスの 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 し wijinputnumber ウィジェットを 初 期 化 して マスクを 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#textbox1").wijinputmask( { mask: '(999) ', hidepromptonleave: true </script> 136 Copyright GrapeCity inc. All rights reserved.

138 手 順 3:プロジェクトの 実 行 [F5]を 押 して アプリケーションを 実 行 します 入 力 テキストボックス 内 の 数 値 は マスク 内 で 指 定 された 電 話 番 号 のように 書 式 設 定 されます 数 値 を 入 力 テキストボックスに 入 力 すると それらはマスクに 基 づいて 自 動 的 に 書 式 設 定 されます ドロップダウンリストへのマスクの 追 加 wijinputmask ウィジェットでは ドロップダウンリストボックスにマスクを 作 成 できます showtrigger オプションを 使 用 してド ロップダウン 矢 印 を 表 示 し comboitems オプションを 使 用 してドロップダウンリストに 移 植 します MVC コントロールエクスプ ローラのライブデモで InputMask > Drop Down サンプル ( 参 照 してください 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラで Views Sharedフォルダを 展 開 し _Layout.cshtml をダブルクリックしてファ イルを 開 きます 3. 次 のマークアップをページの <body> タグ 内 に 追 加 します <input type="text" id="textbox1" /> <h6>マスク</h6> <p> </p> 4. 前 の 手 順 で 追 加 した 終 了 タグ の 後 に 次 の jquery スクリプトを 入 力 し wijinputmask ウィジェットを 初 期 化 して mask comboitems showtrigger の 各 オプションを 設 定 します 1つのゼロをマスク 要 素 として 使 用 すると 1 桁 の 数 字 を 入 力 するように 要 求 されます この 場 合 7 桁 の 数 字 を 入 力 できます <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#textbox1").wijinputmask( { mask: ' ', comboitems: [' ', ' ', ' '], showtrigger: true </script> 5. [F5]を 押 して アプリケーションを 実 行 します showtrigger オプションは ドロップダウン 矢 印 を 表 示 します mask は 指 定 された 書 式 の 数 字 を 要 求 し comboitems オプションに 指 定 されたドロップダウンリストには 3つのプリセット 値 が 含 まれます 137 Copyright GrapeCity inc. All rights reserved.

139 文 字 を 要 求 するマスクの 作 成 wijinputmask ウィジェットでは ユーザーに 文 字 の 入 力 を 要 求 するマスク(ユーザー 名 の 入 力 ボックスなど)を 作 成 できます この 機 能 を 活 用 するには mask オプションに L マスク 要 素 を 使 用 します MVC コントロールエクスプローラのライブデモで InputMask > First Name サンプル( 参 照 してください 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラで Views Sharedフォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 次 のマークアップをページの <body> タグ 内 に 追 加 します <input type="text" id="textbox1" /> <h6>マスク</h6> <p> >L LLLLLLLLL</p> 4. 前 の 手 順 で 追 加 した 終 了 タグ の 後 に 次 の jquery スクリプトを 入 力 し wijinputmask ウィジェットを 初 期 化 して mask オプションを 設 定 します L をマスク 要 素 として 使 用 すると 1 文 字 の 入 力 が 要 求 されます この 場 合 10 の 文 字 を 入 力 できます >L は 最 初 の 文 字 を 大 文 字 にして 後 続 の 文 字 を 小 文 字 にします([Shift]キーを 使 用 して 他 の 文 字 も 大 文 字 にしない 場 合 ) <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#textbox1").wijinputmask( { mask: '>L LLLLLLLLL', hidepromptonleave: true </script> 5. [F5]を 押 してアプリケーションを 実 行 し 名 前 を 入 力 します パスワードと SSN の 入 力 の 非 表 示 化 wijinputmask ウィジェットでは パスワード 文 字 を 使 用 して 実 際 のパスワードや 社 会 保 障 番 号 が 画 面 に 表 示 させないように できます この 機 能 を 活 用 するには passwordchar オプションを 使 用 します MVC コントロールエクスプローラのライブデモ 138 Copyright GrapeCity inc. All rights reserved.

140 で InputMask > Password サンプル( InputMask > SSN サンプル( 参 照 してくださ い 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラで Views Sharedフォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 次 のマークアップをページの <body> タグ 内 に 追 加 します <input type="text" id="textbox1" /> <h6>マスク</h6> <p> </p> <h6>password Char</h6> <p>#</p> <input type="text" id="textbox2" /> <h6>マスク</h6> <p>ccccccc</p> <h6>password Char:</h6> <p>*</p> 4. 前 の 手 順 で 追 加 した 終 了 タグ の 後 に 次 の jquery スクリプトを 入 力 し wijinputmask ウィジェットを 初 期 化 して passwordchar オプションを 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#textbox1").wijinputmask( { mask: ' ', passwordchar: '#', hidepromptonleave: true $("#textbox2").wijinputmask( { mask: 'CCCCCCC', passwordchar: '*', hidepromptonleave: true </script> 5. [F5]を 押 して アプリケーションを 実 行 し 最 初 のテキストボックスに 数 値 を 入 力 します これらは # 文 字 によって 非 表 示 になります 2 番 目 のテキストボックスに 数 字 または 文 字 を 入 力 します これらは * 文 字 によって 非 表 示 になります 139 Copyright GrapeCity inc. All rights reserved.

141 Wijinputnumber wijinputnumber を 表 示 するビューの.cshtml ファイルを 開 きます 次 のマークアップのように テキストボックス 要 素 を 追 加 します <input type="text" id="textbox1" /> ここで wijinputnumber ウィジェットを 初 期 化 する 必 要 があります これを 行 うには 次 のスクリプトを.cshtml ファイルに 追 加 できます <script type="text/javascript"> $(function () { $("#textbox1").wijinputnumber( { type: 'numeric', minvalue: -100, maxvalue: 1000, decimalplaces: 3, showspinner: true </script> 上 のスクリプトで 設 定 されたオプションは 数 字 のみ(パーセント 不 可 通 貨 不 可 )の 入 力 をユーザーに 許 可 する 入 力 を 作 成 し ます ユーザーは -100 より 小 さい 数 字 や 1000 より 大 きい 数 字 は 入 力 できず ウィジェットが 値 を 保 持 していない 場 合 でも 常 に 小 数 点 以 下 3 桁 まで 表 示 します スピンボタンも 表 示 するため ユーザーは 入 力 せずに 値 を 増 減 できます これをプロジェクトに 設 定 して 実 行 すると ウィジェットは 次 のような 表 示 になります 関 連 項 目 : 140 Copyright GrapeCity inc. All rights reserved.

142 wijinputnumber の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください wijinputnumber Wijinput number チュートリアル 以 下 のチュートリアルでは -100~1000( 両 端 の 値 は 含 まない) 範 囲 の 小 数 点 以 下 3 桁 の 数 値 を 表 示 する 入 力 テキストボック スを 含 む MVC プロジェクトの 作 成 手 順 について 説 明 します このトピックでは ASP.NET MVC 4 Wijmo アプリケーションを 作 成 済 みであることが 前 提 となります 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では -100~1000( 両 端 の 値 は 含 まない) 範 囲 の 小 数 点 以 下 3 桁 の 数 値 を 表 示 する 入 力 テキストボックスを 追 加 しま す 以 下 を 実 行 します 1. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックして ファイルを 開 きます 2. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します このマークアップは 入 力 テキストボックスをページに 追 加 します <div class="page"> <div id="header"> <div id="title"> <h2> 概 要 </h2> <div class="main demo"> <!-- デモマークアップの 開 始 --> <input type="text" id="textbox1" value="2.324" /> <h5> 設 定 </h5> <p>min=-100; max=1000; DecimalPlaces=3;</p> <!-- デモマークアップの 終 了 --> 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では 入 力 テキストボックスを 作 成 するマークアップを 追 加 しました ここでは ウィジェットを 使 用 して 小 数 点 以 下 3 桁 の 数 値 を 表 示 する jquery スクリプトを 追 加 できます 前 の 手 順 で 追 加 した 入 力 テキストボックスの 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 し wijinputnumber ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#textbox1").wijinputnumber( { type: 'numeric', minvalue: -100, 141 Copyright GrapeCity inc. All rights reserved.

143 maxvalue: 1000, decimalplaces: 3, showspinner: true </script> 手 順 3:プロジェクトの 実 行 [F5]を 押 して アプリケーションを 実 行 します wijinputnumber は マークアップで 指 定 した の 初 期 値 を 持 ちます 矢 印 をクリックして 値 を 増 減 できますが -100 より 下 や 100 より 上 には 進 めないことに 注 意 してください 入 力 の 通 貨 書 式 設 定 wijinputnumber ウィジェットでは 入 力 を 通 貨 として 書 式 設 定 できます この 機 能 を 活 用 するには type オプションを currency に 設 定 します MVC コントロールエクスプローラのライブデモで InputNumber > Currency サンプル ( 参 照 してください 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラで Views Sharedフォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 次 のマークアップをページの <body> タグ 内 に 追 加 します <input type="text" id="textbox1" value="25.5" /> 4. 前 の 手 順 で 追 加 した 終 了 タグ の 後 に 次 の jquery スクリプトを 入 力 し wijinputnumber ウィジェットを 初 期 化 して type オプションを 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#textbox1").wijinputnumber( { type: 'currency', decimalplaces: 2, showspinner: true </script> 5. [F5]を 押 して アプリケーションを 実 行 します 142 Copyright GrapeCity inc. All rights reserved.

144 入 力 のパーセント 書 式 設 定 wijinputnumber ウィジェットでは 入 力 をパーセントとして 書 式 設 定 できます この 機 能 を 活 用 するには type オプションを percent に 設 定 します MVC コントロールエクスプローラのライブデモで InputNumber > Percent サンプル ( 参 照 してください 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラで Views Sharedフォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 次 のマークアップをページの <body> タグ 内 に 追 加 します wijinputnumber の 開 始 値 は 50 となります <input type="text" id="textbox1" value="50%" /> <h6> 設 定 </h6> <p>value=50; decimalplaces=4</p> 4. 前 の 手 順 で 追 加 した 終 了 タグ の 後 に 次 の jquery スクリプトを 入 力 し wijinputnumber ウィジェットを 初 期 化 して type オプションを 設 定 します また スピナーも 組 み 込 んで 数 値 を 小 数 点 以 下 4 桁 に 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#textbox1").wijinputnumber( { type: 'percent', decimalplaces: 4, showspinner: true </script> 5. [F5]を 押 して アプリケーションを 実 行 します ドロップダウンリストへの 数 値 の 追 加 wijinputnumber ウィジェットでは ドロップダウンリストボックスにプリセット 数 値 を 追 加 できます showtrigger オプションを 使 用 してドロップダウン 矢 印 を 表 示 し comboitems オプションを 使 用 してドロップダウンリストに 移 植 します MVC コントロー ルエクスプローラのライブデモで InputNumber > Drop Down サンプル ( " 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラで Views Sharedフォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 次 のマークアップをページの <body> タグ 内 に 追 加 します 143 Copyright GrapeCity inc. All rights reserved.

145 <input type="text" id="textbox1" /> 4. 前 の 手 順 で 追 加 した 終 了 タグ の 後 に 次 の jquery スクリプトを 入 力 し wijinputmask ウィジェットを 初 期 化 して type comboitems (リストにデータを 移 植 ) showtrigger の 各 オプションを 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#textbox1").wijinputnumber( { type: 'currency', comboitems: [{ label: '100,12$', value: , { label: '1200$', value: 1200, { label: '2000$', value: 2000, { label: '5200$', value: 5200], showtrigger: true </script> 5. [F5]を 押 して アプリケーションを 実 行 します showtrigger オプションは ドロップダウン 矢 印 を 表 示 します type は ドロップダウンリストの 値 を currency に 設 定 します comboitems オプションで 指 定 されたドロップダウンリストに は 4つのプリセット 値 が 含 まれます Wijinputdate wijinputdate を 表 示 するビューの.cshtml ファイルを 開 きます この 例 では 次 のマークアップのように 4つの 入 力 要 素 を 追 加 します <ul> <li> <li> <li> <li> <label>dateformat='t' ( 長 い 日 付 パターン)</label> <input type="text" id="textbox1" /> <label>dateformat='d' ( 短 い 日 付 パターン)</label> <input type="text" id="textbox2" /> <label>dateformat='g' ( 一 般 的 な 時 刻 パターン( 短 い 時 刻 ))</label> <input type="text" id="textbox3" /> 144 Copyright GrapeCity inc. All rights reserved.

146 </ul> <label>dateformat='u' ( 世 界 時 のソート 可 能 な 日 付 / 時 刻 パターン)</label> <input type="text" id="textbox4" /> 4つの 入 力 要 素 は それぞれ wijinputdate ウィジェットとして 初 期 化 されたときに 異 なった 表 示 になります ウィジェットを 初 期 化 するには 次 のスクリプトをプロジェクトに 追 加 するだけです <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $(function () { $("#textbox1").wijinputdate({ dateformat: 'T' $("#textbox2").wijinputdate({ dateformat: 'd' $("#textbox3").wijinputdate({ dateformat: 'g' $("#textbox4").wijinputdate({ dateformat: 'U' </script> アプリケーションでこの 例 を 使 用 すると 次 のような 表 示 になります 関 連 項 目 : wijinputdate の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください wijinputdate Wijinputdate チュートリアル 以 下 のチュートリアルでは さまざまな 日 付 と 時 刻 書 式 を 例 示 する4つの 入 力 ボックスを 含 む MVC プロジェクトの 作 成 手 順 に ついて 説 明 します このトピックでは ASP.NET MVC 4 Wijmo アプリケーションを 作 成 済 みであることが 前 提 となります 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では さまざまな 日 付 と 時 刻 書 式 を 例 示 する4つの 入 力 ボックスを 追 加 します 以 下 を 実 行 します 1. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックして ファイルを 145 Copyright GrapeCity inc. All rights reserved.

147 開 きます 2. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します このマークアップは4つの 異 なる 入 力 テキストボックスと ラベルをページに 追 加 します 各 入 力 ボックスは 異 なる 日 付 パターンを 表 示 します <div class="page"> <div id="header"> <div id="title"> <h2> 概 要 </h2> <div class="main demo"> <!-- デモマークアップの 開 始 --> <ul class="ui-helper-reset"> <li> <label> dateformat='t' ( 長 い 日 付 パターン)</label> <input type="text" id="textbox1" /> <li> <label> dateformat='d' ( 短 い 日 付 パターン)</label> <input type="text" id="textbox2" /> <li> <label> dateformat='g' ( 一 般 的 な 時 刻 パターン( 短 い 時 刻 )) </label> <input type="text" id="textbox3" /> <li> <label> dateformat='u' ( 世 界 時 のソート 可 能 な 日 付 / 時 刻 パターン)</label> <input type="text" id="textbox4" /> </ul> <!-- デモマークアップの 終 了 --> 3. 次 のマークアップを <body> の 上 に 追 加 します このマークアップは 長 い 日 付 書 式 を 表 示 するため 最 後 のテキスト ボックスの 幅 を 拡 張 します <style type="text/css"> #textbox4 { width: 300px; 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では 入 力 テキストボックスを 作 成 するマークアップを 追 加 しました ここでは ウィジェットを 使 用 してさまざまな 日 付 と 時 刻 書 式 を 表 示 する jquery スクリプトを 追 加 できます 146 Copyright GrapeCity inc. All rights reserved.

148 前 の 手 順 で 追 加 した 入 力 テキストボックスの 終 了 タグの 後 に 次 の jquery スクリプトを 入 力 し wijinputdate ウィ ジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $(function () { $("#textbox1").wijinputdate({ dateformat: 'T' $("#textbox2").wijinputdate({ dateformat: 'd' $("#textbox3").wijinputdate({ dateformat: 'g' $("#textbox4").wijinputdate({ dateformat: 'U' </script> 手 順 3:プロジェクトの 実 行 [F5]を 押 して アプリケーションを 実 行 します 入 力 テキストのそれぞれに 異 なる 日 付 または 時 刻 書 式 が 表 示 されます 日 付 ピッカーのドロップダウンカレンダーの 作 成 wijinputdate ウィジェットでは 日 付 ピッカーとして 使 用 できるドロップダウンカレンダーを 作 成 できます この 機 能 を 活 用 する には showtrigger オプションを true に 設 定 します MVC コントロールエクスプローラのライブデモで InputDate > DatePicker サンプル( 参 照 してくださ い 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラで Views Sharedフォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 次 のマークアップをページの <body> タグ 内 に 追 加 します <input type="text" id="textbox1" /> 4. 前 の 手 順 で 追 加 した 終 了 タグ の 後 に 次 の jquery スクリプトを 入 力 し wijinputdate ウィジェットを 初 期 化 し て showtrigger オプションを 設 定 します <script id="scriptinit" type="text/javascript"> 147 Copyright GrapeCity inc. All rights reserved.

149 $(document).ready(function () { $("#textbox1").wijinputdate( { showtrigger: true </script> 5. [F5]を 押 して アプリケーションを 実 行 します ドロップダウン 矢 印 をクリックすると カレンダーが 表 示 され 日 付 を 選 択 できます 日 付 のドロップダウンリストの 作 成 wijinputdate ウィジェットでは 日 付 のドロップダウンリストボックスを 作 成 できます showtrigger オプションを 使 用 してド ロップダウン 矢 印 を 表 示 し comboitems オプションを 使 用 してドロップダウンリストに 移 植 します MVC コントロールエクスプ ローラのライブデモで InputDate > DropDown サンプル ( 参 照 してください 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラで Views Sharedフォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 次 のマークアップをページの <body> タグ 内 に 追 加 します <input type="text" id="textbox1" /> 4. 前 の 手 順 で 追 加 した 終 了 タグ の 後 に 次 の jquery スクリプトを 入 力 し wijinputdate ウィジェットを 初 期 化 し て comboitems dateformat showtrigger の 各 オプションを 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#textbox1").wijinputdate( { dateformat: 'yyyy/m/d', comboitems: [{ label: '1980/4/8', value: new Date(1980, 3, 8), { label: '2007/12/25', value: new Date(2007, 11, 25), { label: 'today', value: new Date()], showtrigger: true </script> 148 Copyright GrapeCity inc. All rights reserved.

150 5. [F5]を 押 して アプリケーションを 実 行 します showtrigger オプションは ドロップダウン 矢 印 を 表 示 しま す dateformat オプションは 日 付 の 書 式 を 設 定 し comboitems オプションで 指 定 されたドロップダウンリストに は 3つのリスト 項 目 が 含 まれます Wijcalendar wijcalendar では カスタマイズ 可 能 なスタイルやナビゲーション 要 素 を 備 えた1つの 月 または 複 数 月 の 表 を 表 示 できます カレンダーを 表 示 するビューの.cshtml ファイルを 開 きます 次 のマークアップのように <div> DOM 要 素 を 追 加 します <div id="calendar"> ここで wijcalendar ウィジェットを 初 期 化 する 必 要 があります これを 行 うには 次 のスクリプトを.cshtml ファイルに 追 加 でき ます <script type="text/javascript"> $(document).ready(function () { $("#calendar").wijcalendar({ easing: "easeoutexpo", monthcols: 2, </script> ここでは wijcalendar の easing と monthcols オプションを 使 用 し それぞれ 月 を 変 更 するときのイージング 効 果 を 設 定 し ウィジェットに 表 示 する 月 の 数 を 指 定 しました MVC アプリケーションを 実 行 すると wijcalendar は 次 のような 表 示 になります 関 連 項 目 : 149 Copyright GrapeCity inc. All rights reserved.

151 wijcalendar の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください wijcalendar Wijcalendar チュートリアル 以 下 のチュートリアルでは X と Y 軸 のテキスト 設 定 グラフへのヘッダー 要 素 の 追 加 グラフ 凡 例 へのラベルテキストの 追 加 グラフへのデータ 移 植 の 手 順 について 説 明 します このトピックでは ASP.NET MVC 4 Wijmo アプリケーションを 作 成 済 みであることが 前 提 となります 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では マークアップを 追 加 し コンテンツを 折 れ 線 グラフに 追 加 します 以 下 を 実 行 します 1. Microsoft Visual Studio の[ファイル]メニューから [ 新 しいプロジェクト]を 選 択 します [ 新 しいプロジェクト]ダイアロ グボックスが 開 きます 2. テンプレートの[Visual Basic]または[Visual C#]より[Web]を 選 択 します 3. 右 ペインから[ASP.NET MVC 4 Wijmo アプリケーション]を 選 択 します 4. [ 名 前 ] [ 場 所 ] [ソリューション 名 ]フィールドを 設 定 して OK をクリックします 5. 新 しい ASP.NET MVC Wijmo 4 アプリケーションが 作 成 されます Models Views および Controllers フォルダが 含 まれていることがわかります これらのフォルダは Wijmo for MVC のチュートリアルで 使 用 します 6. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックして ファイルを 開 きます 7. 次 のマークアップをページの <body> タグ 内 に 追 加 します このマークアップは カレンダーのコンテンツをページに 追 加 します <div id="calendar1"> 手 順 2:ウィジェットの 初 期 化 とカスタマイズ 前 の 手 順 では マークアップを 追 加 し カレンダーに 表 示 するコンテンツを 追 加 しました ここでは jquery スクリプトを 追 加 し ウィジェットを 初 期 化 して さらに allowpreview mindate maxdate navbuttons の 各 オプションを 設 定 して wijcalendar コ ントロールをカスタマイズできます 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 して wijcalendar ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#calendar1").wijcalendar({ mindate: new Date('2012/02/16'), maxdate: new Date('2012/02/25'), allowpreview: true, navbuttons: 'quick', quicknavstep: 6, easing: "easeinbounce", duration: 2500, titleformat: "MMM yyyy" 150 Copyright GrapeCity inc. All rights reserved.

152 </script> 手 順 3:プロジェクトの 実 行 この 手 順 では アプリケーションを 実 行 し 前 の 手 順 で 設 定 したオプションによる 以 下 のカレンダー 動 作 を 観 察 します 1. [F5] を 押 して アプリケーションを 実 行 します 2. コントロールのどちらかの 側 のインジケータ 上 にホバーし 次 または 前 のカレンダー 月 をプレビューします 3. <Quick Next> ボタンをクリックして カレンダー 月 を6カ 月 先 へジャンプします titleformat オプションを 使 用 してデフォルトタイトル 書 式 を 変 更 したため 省 略 名 のカレンダー 月 と 年 がカレンダータイ トルに 表 示 されることに 注 意 してください 4. Next/Previous 矢 印 をクリックし 別 のカレンダー 月 に 移 動 します スライドアウトするときにカレンダーがバウンスイン することに 注 意 してください easing オプションの 効 果 とアニメーションの 持 続 時 間 (ミリ 秒 )の duration を 設 定 して アニメーションを wijcalendar コントロールに 適 用 しました 151 Copyright GrapeCity inc. All rights reserved.

153 mindate と maxdate オプションを 設 定 したため 上 のカレンダーに 2012 年 2 月 16 日 ~2012 年 2 月 25 日 という 特 定 の 日 付 範 囲 が 表 示 されることに 注 意 してください Wijcalendar タスク 別 ヘルプ タスク 別 ヘルプは ASP.NET のプログラミングに 精 通 し コントロールの 一 般 的 な 使 用 方 法 を 理 解 しているユーザーを 対 象 とし ています ヘルプに 記 述 された 手 順 に 従 うことによって さまざまな C1Calendar 機 能 を 実 演 するプロジェクトを 作 成 し て C1Calendar コントロールの 用 途 を 理 解 することができます カスタム 日 付 の 作 成 カスタム 日 付 を 作 成 するには displaydate オプションと customizedate 関 数 を 次 のように 使 用 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#calendar1").wijcalendar( displaydate: new Date('2011/12/1'), customizedate: function ($daycell, date, daytype, hover, preview) { if (date.getmonth() === 11 && date.getdate() === 24) { var $img = $('<div>').width(16).height(16).css('backgroundimage', 'url(images/xmas.png)'); $daycell.attr('align', 'right').empty().append($img); if ($daycell.hasclass('ui-datepicker-current-day')) { $daycell.css('background-color', '#aaa'); else $daycell.css('background-color', hover? 'lightgray' : ''); return true; </script> return false; 152 Copyright GrapeCity inc. All rights reserved.

154 <div class="main demo"> <!-- デモマークアップの 開 始 --> <div id="calendar1"> <!-- デモマークアップの 終 了 --> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <!-- オプションマークアップの 終 了 --> このトピックの 作 業 結 果 カスタム 画 像 がカスタム 日 付 用 に 指 定 されます ポップアップカレンダーの 作 成 ポップアップカレンダーを 作 成 するには 次 のコードを 使 用 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#calendar1").wijcalendar( popupmode: true, selecteddateschanged: function () { var seldate = $(this).c1calendar("getselecteddate"); if (!!seldate) $("#popdate").val(seldate.todatestring()); $("#popdate").click(function () { $("#calendar").wijcalendar("popup", { of: $("#popdate"), offset: '0 2' ) </script> 153 Copyright GrapeCity inc. All rights reserved.

155 <h2>ポップアップ</h2> <div class="main demo"> <!-- デモマークアップの 開 始 --> <div id="calendar"> <label for="popdate"> 日 付 の 選 択 :</label> <input name="popdate" type="text" id="popdate" style="width: 180px;" /> <!-- デモマークアップの 終 了 --> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <!-- オプションマークアップの 終 了 --> このトピックの 作 業 結 果 テキストボックス 内 をクリックすると テキストボックスの 下 にポップアップカレンダーが 表 示 します カレンダーの 月 の 完 全 名 と 年 の 表 示 カレンダーの 月 の 完 全 名 と 年 を 表 示 するには 次 のように titleformat オプションを MMMM yyyy に 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#calendar1").wijcalendar( { easing: "easeoutexpo", titleformat: "MMMM yyyy" ); </script> <div class="main demo"> <!-- デモマークアップの 開 始 --> <div id="calendar1"> <!-- デモマークアップの 終 了 --> <div class="demo-options"> 154 Copyright GrapeCity inc. All rights reserved.

156 <!-- オプションマークアップの 開 始 --> <!-- オプションマークアップの 終 了 --> このトピックの 作 業 結 果 カレンダータイトルに カレンダーの 月 の 完 全 名 と 年 が 表 示 します カレンダーの 月 の 省 略 名 と 年 の 表 示 カレンダーの 月 の 省 略 名 と 年 を 表 示 するには 次 のように titleformat オプションを MMM yyyy に 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#calendar1").wijcalendar( { easing: "easeoutexpo", titleformat: " MMM yyyy" ); </script> <div class="main demo"> <!-- デモマークアップの 開 始 --> <div id="calendar1"> <!-- デモマークアップの 終 了 --> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <!-- オプションマークアップの 終 了 --> このトピックの 作 業 結 果 カレンダータイトルに カレンダーの 月 の 省 略 名 と 年 が 表 示 します 155 Copyright GrapeCity inc. All rights reserved.

157 カレンダーの 月 日 と 年 の 表 示 カレンダーの 月 日 と 年 を 表 示 するには 次 のように titleformat オプションを MM-yyyy に 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#calendar1").wijcalendar( { easing: "easeoutexpo", titleformat: "MM-yyyy" ); </script> <div class="main demo"> <!-- デモマークアップの 開 始 --> <div id="calendar1"> <!-- デモマークアップの 終 了 --> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <!-- オプションマークアップの 終 了 --> このトピックの 作 業 結 果 カレンダータイトルに カレンダーの 日 月 年 が 表 示 します 156 Copyright GrapeCity inc. All rights reserved.

158 マルチカレンダーの 表 示 monthcols または monthrows オプションのいずれかを 2 以 上 の 整 数 値 に 設 定 し 複 数 のカレンダーを 表 示 できます monthcols オプションは 月 ビューの 列 数 を 決 定 し monthrows オプションは 月 ビューの 行 数 を 決 定 します 2 行 3 列 の カレンダーを 表 示 するには 次 のコードを 使 用 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#calendar1").wijcalendar( { easing: "easeoutexpo", monthrows: 2, monthcols: 3 ); </script> <div class="main demo"> <!-- デモマークアップの 開 始 --> <div id="calendar1"> <!-- デモマークアップの 終 了 --> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <!-- オプションマークアップの 終 了 --> このトピックの 作 業 結 果 2 行 3 列 のカレンダーを 表 示 します 157 Copyright GrapeCity inc. All rights reserved.

159 外 側 のカレンダーナビゲーションボタンを 使 用 したカレンダーの 移 動 外 側 のナビゲーションボタンは 二 重 矢 印 の Previous / Next ボタンを 表 します 外 側 のナビゲーションボタンを 表 示 する には navbuttons オプションを quick に 設 定 します quicknavstep オプションは 外 側 のナビゲーションボタンに 適 用 します このプロパティのデフォルト 値 は 12 に 設 定 され Previous / Next ナビゲーションボタンをクリックすると カレンダー 月 が 12 カ 月 分 ずつ 移 動 することを 意 味 します 次 のコードでは navbuttons オプションを quick quicknavstep オプションを3に 設 定 して 外 側 のナビゲーションボタンを 有 効 にし カレンダー 月 が3カ 月 分 ずつ 移 動 できるようにします <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#calendar1").wijcalendar({ navbuttons: 'quick', quicknavstep: 3 </script> <div class="main demo"> <!-- デモマークアップの 開 始 --> <div id="calendar1"> <!-- デモマークアップの 終 了 --> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <!-- オプションマークアップの 終 了 --> このトピックの 作 業 結 果 <Quick-Next> ボタンをクリックすると 3カ 月 先 のカレンダー 月 にジャンプします 158 Copyright GrapeCity inc. All rights reserved.

160 次 のカレンダー 月 のプレビュー I 現 在 の 月 を 切 り 替 えずに 次 の 月 や 前 の 月 の 開 始 日 と 終 了 日 を 確 認 する 場 合 カレンダープレビュー 機 能 を 使 用 できます カレンダープレビューは 前 の/ 次 のカレンダービュー( 月 )のポップアップカレンダーを 表 示 するプレビュー 領 域 を 提 供 しま す この 機 能 は allowpreview オプションを True に 設 定 した 場 合 に 使 用 できます 次 のコードでは allowpreview オプションを true に 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#calendar1").wijcalendar({ allowpreview: true </script> <div class="main demo"> <!-- デモマークアップの 開 始 -->; <div id="calendar1"> <!-- デモマークアップの 終 了 --> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <!-- オプションマークアップの 終 了 --> このトピックの 作 業 結 果 プロジェクトがロードされると コントロールの 両 側 にあるインジケータの 上 にマウスポインタを 置 くことで 次 の 月 または 前 の 月 をプレビューできます 159 Copyright GrapeCity inc. All rights reserved.

161 カレンダーの 週 番 号 の 選 択 カレンダーの ShowWeekNumbers オプションが 有 効 にされた 場 合 カレンダーの 左 側 に 垂 直 方 向 に 週 番 号 が 表 示 します 週 番 号 は カレンダー 月 の 各 週 の 週 番 号 を 表 します カレンダー 年 には 合 計 52 週 あるため 週 番 号 は1~ 52 の 範 囲 となり ます selectionmode オプションで 日 と 週 番 号 の 値 を 有 効 にした 場 合 実 行 時 に 週 番 号 セレクタを 使 用 し カレンダー 内 の 週 番 号 を 選 択 できます デフォルトでは selectionmode オプションで 日 のみが 有 効 です 週 番 号 の 選 択 を 有 効 にするには 以 下 のコードを 使 用 します $("#calendar1").wijcalendar({ showweekdays: true, showweeknumbers: true, selectionmode: { weeknumber: true このトピックの 作 業 結 果 カレンダー 月 の 特 定 の 週 を 選 択 するには カーソルを 週 番 号 の 上 に 移 動 します 160 Copyright GrapeCity inc. All rights reserved.

162 カレンダー 月 の 選 択 カレンダー 月 の 選 択 を 有 効 にするには 次 のように selectionmode オプションで month 値 を true に 設 定 し ShowWeekNumbers オプションを true に 設 定 します このトピックの 作 業 結 果 月 ビューの 左 上 端 に MonthSelectorImage が 表 示 します 月 セレクタは マウスカーソルがその 上 に 置 かれたときに 月 の すべての 日 付 を 選 択 します カレンダーの 曜 日 の 選 択 曜 日 セレクタは カレンダータイトルの 下 (またはカレンダーにヘッダがあるときはヘッダの 下 )に 表 示 します 日 曜 日 ~ 土 曜 日 の 曜 日 名 を 表 し カレンダー 日 の 上 に 水 平 方 向 に 表 示 します selectionmode オプションで 日 と 曜 日 の 値 を 有 効 にした 場 合 実 行 時 に 曜 日 セレクタを 使 用 し カレンダー 内 の 曜 日 を 選 択 で きます $("#calendar1").wijcalendar({ selectionmode: { day: true, weekday: true このトピックの 作 業 結 果 日 または 月 などの 曜 日 名 を 表 し カレンダー 日 の 上 に 水 平 方 向 に 表 示 します 161 Copyright GrapeCity inc. All rights reserved.

163 最 小 および 最 大 日 付 範 囲 の 設 定 次 のコードは mindate オプションと maxdate オプションを 設 定 して 特 定 の 日 付 範 囲 を 表 示 する 方 法 を 示 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#calendar1").wijcalendar({ displaydate: new Date('2012/01/1'), mindate: new Date('2012/01/16'), maxdate: new Date('2012/01/25') </script> このトピックの 作 業 結 果 次 のカレンダーは 特 定 の 日 付 範 囲 (2012 年 1 月 16 日 ~ 2012 年 1 月 25 日 )を 表 示 します アニメーションオプションの 指 定 次 のコードは カレンダー 月 を 移 動 するときに EaseInBounce などの 特 定 のアニメーションを 指 定 するイージングオプションお よびアニメーションが 存 続 する 時 間 を 指 定 する 持 続 時 間 オプションを 設 定 する 方 法 を 示 します この 例 では 持 続 時 間 オプ ションは 2500 ミリ 秒 に 設 定 します 162 Copyright GrapeCity inc. All rights reserved.

164 <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#calendar1").wijcalendar({ easing: "easeinbounce", duration: 2500 </script> <div class="main demo"> <!-- デモマークアップの 開 始 --> <div id="calendar1"> <!-- デモマークアップの 終 了 --> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <!-- オプションマークアップの 終 了 --> このトピックの 作 業 結 果 Next または Previous 矢 印 をクリックして 別 のカレンダー 月 に 移 動 し カレンダーがスライドインするとバウンドインし スライ ドアウトするとバウンドアウトすることを 確 認 します Wijcarousel wijcarousel ウィジェットでは 仮 想 化 カルーセルに 画 像 のリストを 表 示 できます wijcarousel ウィジェットは jquery.wijmo.wijcarousel.js ライブラリによって 作 成 されます 次 の 例 のように 画 像 をウィジェットに 組 み 込 むことができます <div> <div id="wijcarousel0"> <ul> <li> 163 Copyright GrapeCity inc. All rights reserved.

165 <img alt="1" src=" title="word" /><span> キャプション 1</span> <li> <img alt="2" src=" title="word2" /><span> キャプション 2</span> <li> <img alt="3" src=" title="word3" /><span> キャプション 3</span> <li> <img alt="4" src=" title="word4" /><span> キャプション 4</span> <li> <img alt="5" src=" title="word5" /><span> キャプション 5</span> <li> <img alt="6" src=" title="word" /><span> キャプション 6</span> <li> <img alt="7" src=" title="word2" /><span> キャプション 7</span> <li> <img alt="8" src=" title="word3" /><span> キャプション 8</span> <li> <img alt="9" src=" title="word4" /><span> キャプション 9</span> <li> <img alt="10" src=" title="word5" /> 次 のスクリプトを 使 用 し これらの DOM 要 素 構 造 体 のいずれかを 初 期 化 できます <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijcarousel0").wijcarousel({ display: 3, step: 2, orientation: "horizontal" </script> CSS スタイルを 追 加 します: <style type="text/css"> #wijcarousel0 { width: 1050px; height: 300px; </style> 164 Copyright GrapeCity inc. All rights reserved.

166 ここで 取 り 上 げたマークアップとスクリプトは 同 様 なカルーセルになります 関 連 項 目 : wijcarousel の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください wijcarousel Wijcarousel チュートリアル 以 下 のチュートリアルでは 複 数 の 画 像 を 表 示 するカルーセルを 含 む MVC プロジェクトの 作 成 手 順 について 説 明 します 注 意 :: このチュートリアルでは MVC Classicバープロジェクトを 作 成 済 みであることを 前 提 にしています 詳 細 について は MVC Classic プロジェクトの 作 成 MVC Classic プロジェクトの 作 成 トピックを 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では 最 初 にビューを 設 定 します コンテンツをカルーセルに 追 加 します 注 意 :: この 手 順 では MVC Classicバープロジェクトを 作 成 済 みであることを 前 提 にしています 詳 細 については MVC Classic プロジェクトの 作 成 トピックを 参 照 してください 以 下 の 手 順 を 実 行 します 1. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 2. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="wijcarousel0"> <ul> <li><img src=" alt="スポーツ 1" /> <span>キャプション 1</span> <li><img src=" alt="スポーツ 2" /> <span>キャプション 2</span> <li><img src=" alt="スポーツ 3" /> <span>キャプション 3</span> <li><img src=" alt="スポーツ 4" /> <span>キャプション 4</span> <li><img src=" alt="スポーツ 5" /> <span>キャプション 5</span> <li><img src=" alt="スポーツ 6" /> <span>キャプション 6</span> 165 Copyright GrapeCity inc. All rights reserved.

167 <li><img src=" alt="スポーツ 7" /> <span>キャプション 7</span> <li><img src=" alt="スポーツ 8" /> <span>キャプション 8</span> </ul> このマークアップはカルーセルのコンテンツをページに 追 加 します この 手 順 では ビューを 作 成 しました 次 の 手 順 手 順 2:ウィジェットの 初 期 化 では スクリプトを 追 加 し ウィジェットを 初 期 化 します 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では マークアップを 追 加 し カルーセルに 表 示 するコンテンツを 追 加 しました この 手 順 では ウィジェットを 初 期 化 するために 必 要 な jquery スクリプトを 追 加 します 以 下 の 手 順 を 実 行 します 1. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijcarousel ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijcarousel0").wijcarousel( { display: 1, showtimer: true, showpager: true, loop: true, pagertype: "dots", showcontorlsonhover: false ); </script> このスクリプトはウィジェットを 初 期 化 します 2. 前 の 手 順 で 追 加 した 終 了 の </script> タグの 後 に 以 下 のマークアップを 追 加 して wijcarousel ウィジェットをスタイ リングします <style type="text/css"> #wijcarousel0 { width: 750px; height: 300px; </style> このマークアップはウィジェットをスタイリングします 166 Copyright GrapeCity inc. All rights reserved.

168 アプリケーションを 作 成 して wijcarousel ウィジェットを 追 加 して 初 期 化 しました 次 の 手 順 手 順 3:プロジェクトの 実 行 で は ウィジェットの 実 行 時 のインタラクティブ 操 作 を 表 示 します 手 順 3:プロジェクトの 実 行 前 の 手 順 では アプリケーションを 作 成 し wijcarousel ウィジェットを 追 加 して 初 期 化 しました この 手 順 では ウィジェットの 実 行 時 のインタラクティブ 操 作 を 確 認 します 以 下 の 手 順 を 実 行 します 1. [F5 を 押 して アプリケーションを 実 行 します アプリケーションと wijcarousel は 次 のように 表 示 されます 2. 画 像 とキャプションの 下 のドットの1つを 押 して 別 の 画 像 に 移 動 します 3. 左 右 の 矢 印 を 押 して 前 または 次 の 画 像 に 移 動 します 4. 右 上 隅 の Play ボタンを 押 して 画 像 をスライドショーで 再 生 します このチュートリアルでは wijcarousel ウィジェットをアプリケーションに 追 加 して 実 行 時 のウィジェットを 観 察 しました カルーセルへのアニメーションの 適 用 wijcarousel ウィジェットはアニメーションをサポートします この 機 能 を 利 用 するには 単 に animated オプションを 設 定 しま す Web サイト ( にアクセスし MVC コント ロールエクスプローラの Carousel > Animation サンプルのライブデモをご 覧 ください. 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="wijcarousel0" class=""> <ul class=""> <li class=""><img alt="1" src=" title="word" /><span>キャプション 1</span> <li class=""><img alt="2" src=" title="word2" /><span>キャプション 2</span> <li class=""><img alt="3" src=" title="word3" /><span>キャプション 3</span> <li class=""><img alt="4" src=" title="word4" /><span>キャプション 4</span> 167 Copyright GrapeCity inc. All rights reserved.

169 <li class=""><img alt="5" src=" title="word5" /><span>キャプション 5</span> <li class=""><img alt="1" src=" title="word" /><span>キャプション 1</span> <li class=""><img alt="2" src=" title="word2" /><span>キャプション 2</span> <li class=""><img alt="3" src=" title="word3" /><span>キャプション 3</span> <li class=""><img alt="4" src=" title="word4" /><span>キャプション 4</span> <li class=""><img alt="5" src=" title="word5" /><span>キャプション 5</span> </ul> このマークアップは カルーセルウィジェットのコンテンツをページに 追 加 します 次 の 手 順 では カルーセルのアニ メーションを 設 定 します 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 のマークアップを 追 加 して animated オプションを 設 定 します <div><input id="chkqueue" type="checkbox" /> <div><label for="chkqueue"> Animation Settings: Queue </label> <div><label for="seleasing">easing:</label><div> <select id="seleasing"> <option value="easeinquad">easeinquad</option> <option value="easeoutquad">easeoutquad</option> <option value="easeinoutquad">easeinoutquad</option> <option value="easeincubic">easeincubic</option> <option value="easeoutcubic">easeoutcubic</option> <option value="easeinoutcubic">easeinoutcubic</option> <option value="easeinquart">easeinquart</option> <option value="easeoutquart">easeoutquart</option> <option value="easeinoutquart">easeinoutquart</option> <option value="easeinquint">easeinquint</option> <option value="easeoutquint">easeoutquint</option> <option value="easeinoutquint">easeinoutquint</option> <option value="easeinsine">easeinsine</option> <option value="easeoutsine">easeoutsine</option> <option value="easeinoutsine">easeinoutsine</option> <option value="easeinexpo">easeinexpo</option> <option value="easeoutexpo">easeoutexpo</option> <option value="easeinoutexpo">easeinoutexpo</option> <option value="easeincirc">easeincirc</option> <option value="easeoutcirc">easeoutcirc</option> <option value="easeinoutcirc">easeinoutcirc</option> <option value="easeinelastic">easeinelastic</option> <option value="easeoutelastic">easeoutelastic</option> <option value="easeinoutelastic">easeinoutelastic</option> <option value="easeinback">easeinback</option> <option value="easeoutback">easeoutback</option> <option value="easeinoutback">easeinoutback</option> <option value="easeinbounce">easeinbounce</option> 168 Copyright GrapeCity inc. All rights reserved.

170 <option value="easeoutbounce">easeoutbounce</option> </select> <div><input type="button" value=" 適 用 " onclick="changeproperties()" /> これにより wijcarousel のアニメーションをカスタマイズする 要 素 が 追 加 されます 実 行 時 に イージングスタイルを 選 択 できます 適 用 ボタンをクリックして 選 択 したスタイルを 適 用 します スタイルを 適 用 すると Previous または Next ボタンを 使 用 して 画 像 をナビゲートし 選 択 したアニメーションを 表 示 できます 5. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 のマークアップを 追 加 してスタイルのオプションを 設 定 します <style type="text/css"> #wijcarousel0 { width:750px; height:300px; </style> これにより wijcarousel ウィジェットのサイズが 設 定 されます 6. 前 の 手 順 で 追 加 した </style> 終 了 タグの 後 に 以 下 の jquery スクリプトを 追 加 して wijcarousel ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijcarousel0").wijcarousel({ display: 1, showtimer: false function changeproperties() { var animationoptions = { queue: $('#chkqueue').val(), easing: $('#seleasing').val() ; $('#wijcarousel0').wijcarousel({ animation: animationoptions </script> これによりカルーセルが 初 期 化 され アニメーションが 追 加 されます このトピックの 作 業 結 果 [F5] を 押 してアプリケーションを 実 行 し チェックボックスを ON にしてイージングスタイルを 選 択 し 適 用 ボタンをクリックし て 選 択 したスタイルを 適 用 します スタイルを 適 用 すると Previous または Next ボタンを 使 用 して 画 像 をナビゲートし 選 択 したアニメーションを 表 示 できます 169 Copyright GrapeCity inc. All rights reserved.

171 カルーセルの 向 きの 設 定 wijcarousel ウィジェットでは ユーザーは 水 平 または 垂 直 方 向 の 向 きを 設 定 できます この 機 能 を 利 用 するには 単 に orientation オプションを 設 定 します 例 については Web サイト ( にアクセスし MVC コントロールエクスプ ローラの Carousel > Orientation サンプルのライブデモをご 覧 ください 拡 張 方 向 を 設 定 するには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 依 存 関 係 をチェックして プロジェクトが Wijmo の 最 新 バージョンを 参 照 していることを 確 認 します これらはページの <head> タグ 内 に 配 置 されている 必 要 があります Wijmo の 最 新 バージョンの 依 存 関 係 は で 確 認 できます 4. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="wijcarousel0"> <ul> <li> <img alt="1" src=" title="word" /> <span>キャプション 1</span> <li> <img alt="2" src=" title="word2" /> <span>キャプション 2</span> <li> <img alt="3" src=" title="word3" /> <span>キャプション 3</span> <li> <img alt="4" src=" title="word4" /> <span>キャプション 4</span> <li> <img alt="5" src=" title="word5" /> <span>キャプション 5</span> <li> <img alt="6" src=" title="word6" /> <span>キャプション 6</span> <li> <img alt="7" src=" title="word7" /> <span>キャプション 7</span> <li> <img alt="8" src=" title="word8" /> <span>キャプション 8</span> <li> <img alt="9" src=" title="word9" /> <span>キャプション 9</span> <li> <img alt="10" src=" title="word10" /><span>キャプション 10</span> </ul> <div id="wijcarousel1"> <ul> 170 Copyright GrapeCity inc. All rights reserved.

172 <li> <img alt="1" src=" title="word" /><span>キャプション 1</span> <li> <img alt="2" src=" title="word2" /><span>キャプション 2</span> <li> <img alt="3" src=" title="word3" /><span>キャプション 3</span> <li> <img alt="4" src=" title="word4" /><span>キャプション 4</span> <li> <img alt="5" src=" title="word5" /><span>キャプション 5</span> <li> <img alt="6" src=" title="word6" /><span>キャプション 6</span> <li> <img alt="7" src=" title="word7" /><span>キャプション 7</span> <li> <img alt="8" src=" title="word8" /><span>キャプション 8</span> <li> <img alt="9" src=" title="word9" /><span>キャプション 9</span> <li> <img alt="10" src=" title="word10" /><span>キャプション 10</span> </ul> このマークアップは 2つのカルーセルウィジェットのコンテンツをページに 追 加 します 次 の 手 順 では カルーセルの 向 きを 設 定 します 5. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijcarousel ウィジェットを 初 期 化 し orientation オプションを 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijcarousel0").wijcarousel({ display: 3, step: 2, orientation: "horizontal" $("#wijcarousel1").wijcarousel({ display: 3, step: 2, orientation: "vertical" </script> 171 Copyright GrapeCity inc. All rights reserved.

173 <style type="text/css"> #wijcarousel0 { width: 390px; height: 90px; margin-bottom: 1em; #wijcarousel1 { width: 120px; height: 300px; margin-bottom: 1em; </style> 1つのカルーセルが 縦 向 きに 表 示 され もう1つのカルーセルが 横 向 きに 表 示 されます(デフォルト) このトピックの 作 業 結 果 [F5] を 押 してアプリケーションを 実 行 し 1つのカルーセルが 縦 向 きに 表 示 され もう1つのカルーセルが 横 向 きに 表 示 される ことを 確 認 します カルーセルのページャスタイルの 設 定 wijcarousel ウィジェットのページャスタイルを 変 更 できます この 機 能 を 利 用 するには 単 に pagertype オプションと pagerposition オプションを 設 定 します 例 については Web サイト ( にアクセスし MVC コントロールエクスプロー ラの Carousel > Paging サンプルのライブデモをご 覧 ください ページャタイプを 設 定 するには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <h3> 数 字 </h3> <br /> <div id="wijcarousel0"> <ul class=""> <li class=""><img alt="1" src=" title="word" /><span>キャプション 1</span> <li class=""><img alt="2" src=" title="word2" /><span>キャプション 2</span> <li class=""><img alt="3" src=" title="word3" /><span>キャプション 3</span> <li class=""><img alt="4" src=" title="word4" /><span>キャプション 4</span> <li class=""><img alt="5" src=" title="word5" /><span>キャプション 5</span> </ul> <br /> <h3>ドット</h3> 172 Copyright GrapeCity inc. All rights reserved.

174 <br /> <div id="wijcarousel1" class=""> <ul class=""> <li class=""><img alt="1" src=" title="word" /><span>キャプション 1</span> <li class=""><img alt="2" src=" title="word2" /><span>キャプション 2</span> <li class=""><img alt="3" src=" title="word3" /><span>キャプション 3</span> <li class=""><img alt="4" src=" title="word4" /><span>キャプション 4</span> <li class=""><img alt="5" src=" title="word5" /><span>キャプション 5</span> </ul> <br /> <h3>スライダー</h3> <br /> <div id="wijcarousel2" class=""> <ul class=""> <li class=""><img alt="1" src=" title="word" /><span>キャプション 1</span> <li class=""><img alt="2" src=" title="word2" /><span>キャプション 2</span> <li class=""><img alt="3" src=" title="word3" /><span>キャプション 3</span> <li class=""><img alt="4" src=" title="word4" /><span>キャプション 4</span> <li class=""><img alt="5" src=" title="word5" /><span>キャプション 5</span> </ul> このマークアップは 3つのカルーセルウィジェットのコンテンツをページに 追 加 します 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijcarousel ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { var options = { display: 1, showtimer: false, showpager: true, buttonoffset: 16, pagertype: "numbers" ; $("#wijcarousel0").wijcarousel(options); $("#wijcarousel1").wijcarousel($.extend(options, { pagertype: "dots", pagerposition: { my: "center top", 173 Copyright GrapeCity inc. All rights reserved.

175 at: "center bottom", offset: "0 5", start: 2 )); $("#wijcarousel2").wijcarousel($.extend(options, { pagertype: "slider", loop: false, pagerposition: { my: "center top", at: "center bottom", start: 3 )); </script> <style type="text/css"> #wijcarousel0, #wijcarousel1, #wijcarousel2 { width: 750px; height: 300px; </style> 3つのカルーセルのそれぞれが 異 なるページャスタイルを 使 用 します このトピックの 作 業 結 果 [F5] を 押 してアプリケーションを 実 行 し 3つのカルーセルのそれぞれが numbers dots および slider の 異 なるページャスタ イルを 使 用 していることを 確 認 します カルーセルへのビデオコンテンツの 取 り 込 み wijcarousel ウィジェットでは ユーザーはビデオコンテンツを 表 示 できます 例 については Web サイト ( にアクセスし MVC コントロールエクスプロー ラの Carousel > Videos サンプルのライブデモをご 覧 ください ビデオコンテンツを 取 り 込 むには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="wijcarousel0" class="ui-corner-all ui-widget-content"> <ul><li> <iframe src=" byline=0&portrait=0&color=ffffff" frameborder="0"></iframe> <li> <iframe src=" byline=0&portrait=0&color=ffffff" frameborder="0"></iframe> 174 Copyright GrapeCity inc. All rights reserved.

176 <li> <iframe src=" byline=0&portrait=0&color=ffffff" frameborder="0"></iframe> <li> <iframe src=" byline=0&portrait=0&color=ffffff" frameborder="0"></iframe> <li> <iframe src=" byline=0&portrait=0&color=ffffff" frameborder="0"></iframe> </ul> このマークアップは 5 種 類 のビデオを 含 む1つのカルーセルウィジェットをページに 追 加 します 次 の 手 順 では カ ルーセルを 初 期 化 します 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijcarousel ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijcarousel0").wijcarousel({ showcontorlsonhover: true </script> <style type="text/css"> #wijcarousel0 { width: 600px; height: 338px; </style> 上 記 のスクリプトとマークアップはカルーセルを 初 期 化 します このトピックの 作 業 結 果 [F5] を 押 してアプリケーションを 実 行 し カルーセルウィジェットにビデオが 表 示 されることを 確 認 します 現 在 表 示 されている ビデオを 変 更 するには Previous または Next ボタンを 押 します カルーセルコンテンツのプレビュー wijcarousel ウィジェットでは ユーザーは 前 および 次 のコンテンツ 要 素 をプレビューできます この 機 能 を 利 用 するには 単 に preview オプションを 設 定 します 例 については Web サイト ( にアクセスし MVC コントロールエクスプロー ラの Carousel > Preview サンプルのライブデモをご 覧 ください カルーセルコンテンツをプレビューするには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし 175 Copyright GrapeCity inc. All rights reserved.

177 てファイルを 開 きます 3. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="wijcarousel0"> <ul> <li> <img src=" alt="スポーツ 1" /> <span>キャプション 1</span> <li> <img src=" alt="スポーツ 2" /> <span>キャプション 2</span> <li> <img src=" alt="スポーツ 3" /> <span>キャプション 3</span> <li> <img src=" alt="スポーツ 4" /> <span>キャプション 4</span> <li> <img src=" alt="スポーツ 5" /> <span>キャプション 5</span> <li> <img src=" alt="スポーツ 6" /> <span>キャプション 6</span> <li> <img src=" alt="スポーツ 7" /> <span>キャプション 7</span> <li> <img src=" alt="スポーツ 8" /> <span>キャプション 8</span> </ul> このマークアップは 1つのカルーセルウィジェットをページに 追 加 します 次 の 手 順 では カルーセルを 初 期 化 しま す 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijcarousel ウィジェットを 初 期 化 し preview オプションを 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijcarousel0").wijcarousel({ display: 1, showtimer: false, showpager: false, loop: false, showcontorlsonhover: false, preview: true $("#Button1").click(function () { $("#div1").css({ opacity: "" 176 Copyright GrapeCity inc. All rights reserved.

178 </script> <style type="text/css"> #wijcarousel0 { width: 500px; height: 300px; </style> 上 記 のスクリプトとマークアップはカルーセルを 初 期 化 し カルーセルのプレビューとスタイルを 設 定 します このトピックの 作 業 結 果 [F5] を 押 してアプリケーションを 実 行 し カルーセル 内 の 前 と 次 の 要 素 がカルーセルウィジェットでプレビューされることを 確 認 します 現 在 およびプレビューされている 画 像 を 変 更 するには Previous または Next ボタンを 押 します Wijcombobox この 使 いやすいコンボボックスウィジェットは サイズ 変 更 や 編 集 が 可 能 なテキストボックスとドロップダウンリストを HTML ページに 表 示 します wijcombobox ウィジェットは Microsoft Windows フォームの ComboBox コントロールをエミュレートし ています <input id="combobox" /> あるいは <select id="combobox"> <option value="c++">c++</option> <option value="java">java</option> <option value="php">php</option> <option value="coldfusion">coldfusion</option> </select> ここで wijdialog ウィジェットを 初 期 化 する 必 要 があります これを 行 うには 次 のスクリプトを.cshtml ファイルに 追 加 できま す <script type="text/javascript"> $(document).ready(function () { $("#combobox").wijcombobox(); ; </script> プログラムを 実 行 すると wijcombobox が.cshtml ページに 表 示 されます wijcombobox ボタン 上 のドロップダウンボタンを クリックすると コンボボックスに 追 加 した4つの 選 択 が 表 示 されます 177 Copyright GrapeCity inc. All rights reserved.

179 関 連 項 目 : wijcombobox の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijcombobox Wijcombobox チュートリアル 以 下 のチュートリアルでは ASP.NET MVC 4 Wijmo アプリケーションの 作 成 手 順 について 説 明 し ページへのコンボボックス のコンテンツの 追 加 コンボボックスへのデータ 移 植 アニメーションの 追 加 およびコンボボックスのリンクを 行 います 手 順 1:ビューの 設 定 この 手 順 では マークアップを 追 加 し コンテンツをコンボボックスに 追 加 します 以 下 を 実 行 します 1. Microsoft Visual Studio の[ファイル]メニューから [ 新 しいプロジェクト]を 選 択 します [ 新 しいプロジェクト]ダイアロ グボックスが 開 きます 2. テンプレートの[Visual Basic]または[Visual C#]より[Web]を 選 択 します. 3. 右 ペインから[ASP.NET MVC 4 Wijmo アプリケーション]を 選 択 します 4. [ 名 前 ] [ 場 所 ] [ソリューション 名 ]フィールドを 設 定 して OK をクリックします 5. 新 しい ASP.NET MVC Wijmo 4 アプリケーションが 作 成 されます Models Views および Controllers フォルダが 含 まれていることがわかります これらのフォルダは Wijmo for MVC のチュートリアルで 使 用 します 6. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックして ファイルを 開 きます 7. 次 のマークアップをページの <body> タグ 内 に 追 加 します このマークアップはボタンのコンテンツをページに 追 加 しま す <div> <label> HTML 入 力 要 素 </label> <input id="tagsinput" /> <div> <label> HTML 選 択 要 素 </label> <select id="tags"> <option value="c++">c++</option> <option value="java">java</option> <option value="php">php</option> <option value="coldfusion">coldfusion</option> <option value="javascript">javascript</option> <option value="asp">asp</option> 178 Copyright GrapeCity inc. All rights reserved.

180 <option value="ruby">ruby</option> <option value="python">python</option> <option value="c">c</option> <option value="scala">scala</option> <option value="groovy">groovy</option> <option value="haskell">haskell</option> <option value="perl">perl</option> </select> <!-- デモマークアップの 終 了 --> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <button value="" id="show"> 元 の 選 択 要 素 の 表 示 </button> <!-- オプションマークアップの 終 了 --> 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では マークアップを 追 加 し コンボボックスに 表 示 するコンテンツを 追 加 しました ここでは jquery スクリプトを 追 加 し ウィジェットを 初 期 化 できます 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 して wijcombobox ウィジェットを 初 期 化 しま す <script id="scriptinit" type="text/javascript"> $(document).ready(function () { // 適 切 なすべての jquery 機 能 をここに 設 定 します $("#tagsinput").wijcombobox( { showinganimation: { effect: "blind", hidinganimation: { effect: "blind", data: [ { label: 'c++', value: 'c++', { label: 'java', value: 'java', { label: 'php', value: 'php', { label: 'coldfusion', value: 'coldfusion', { label: 'javascript', 179 Copyright GrapeCity inc. All rights reserved.

181 value: 'javascript', { label: 'asp', value: 'asp', { label: 'ruby', value: 'ruby', { label: 'python', value: 'python', { label: 'c', value: 'c', { label: 'scala', value: 'scala', { label: 'groovy', value: 'groovy', { label: 'haskell', value: 'haskell', { label: 'perl', value: 'perl' ] ); $("#tags").wijcombobox( { showinganimation: { effect: "blind", hidinganimation: { effect: "blind" ); $('#show').click(function () { $("#tags").show(); ) </script> 手 順 3:プロジェクトの 実 行 180 Copyright GrapeCity inc. All rights reserved.

182 この 手 順 では アプリケーションを 実 行 し 新 しいデータやグラフ 要 素 (Y 軸 のタイトル グラフヘッダー グラフラベルなど)を 観 察 します 1. [F5] を 押 して アプリケーションを 実 行 します 2. 以 下 を 観 察 します コンボボックスのドロップダウン 矢 印 をクリックします コンボボックスの 項 目 が 下 方 向 に 移 動 するとアニメーショ ンが 表 示 されることに 注 意 してください アニメーションは 次 のコードを 使 用 したときに 表 示 されます showinganimation: { effect: "blind", duration: 2500, hidinganimation: { effect: "blind", 元 の 選 択 要 素 の 表 示 ボタンをクリックします 別 のコンボボックスが 次 のように 表 示 されることに 注 意 してくだ さい 次 のコードを 使 用 すると データがコンボボックスの 項 目 に 表 示 されることに 注 意 してください $(document).ready(function () { $("#tagsinput").wijcombobox( { data: [ { label: 'c++', value: 'c++', { label: 'java', value: 'java', { label: 'php', value: 'php', { label: 'coldfusion', value: 'coldfusion', { label: 'javascript', value: 'javascript', { label: 'asp', value: 'asp', 181 Copyright GrapeCity inc. All rights reserved.

183 ); ] {, {, {, {, {, {, { label: 'ruby', value: 'ruby' label: 'python', value: 'python' label: 'c', value: 'c' label: 'scala', value: 'scala' label: 'groovy', value: 'groovy' label: 'haskell', value: 'haskell' label: 'perl', value: 'perl' Wijcombobox タスク 別 ヘルプ タスク 別 ヘルプは ASP.NET のプログラミングに 精 通 し コントロールの 一 般 的 な 使 用 方 法 を 理 解 しているユーザーを 対 象 とし ています ヘルプに 記 述 された 手 順 に 従 うことによって さまざまな wijcombobox 機 能 を 実 演 するプロジェクトを 作 成 し て wijcombobox の 用 途 を 理 解 することができます ComboBox の 幅 の 変 更 <style type="text/css" >.wijmo-wijcombobox { position: relative; width:250px!important;.wijmo-wijcombobox-input { 182 Copyright GrapeCity inc. All rights reserved.

184 width:216px!important; </style> ドロップダウンリストの 位 置 の 変 更 wijcombobox のドロップダウンリストの 位 置 を 変 更 するには 次 のように dropdownlistposition オプションを 使 用 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { var testarray = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; var myreader = new wijarrayreader([{ name: 'label', { name: 'value', { name: 'selected', defaultvalue: false]); var datasourceoptions = { reader: myreader, data: testarray ; var datasource = new wijdatasource({ reader: myreader, data: testarray $("#tags").wijcombobox({ data: datasource, width: 150 $('.position').bind('change', changed); function changed() { $("#tags").wijcombobox('option', 'dropdownlistposition', { my: $('#my_horizontal').val() + ' ' + $('#my_vertical').val(), at: $('#at_horizontal').val() + ' ' + $('#at_vertical').val(), offset: $('#offset').val(), collision: $("#collision_horizontal").val() + ' ' + $("#collision_vertical").val() </script> <div class="main demo"> <!-- デモマークアップの 開 始 --> <div> <input id="tags" /> <!-- デモマークアップの 終 了 --> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <div class="option-row"> <label for="my_horizontal"> Dropdown list:</label> 183 Copyright GrapeCity inc. All rights reserved.

185 <select id="my_horizontal" class="position"> <option value="left">left</option> <option value="center">center</option> <option value="right">right</option> </select> <select id="my_vertical" class="position"> <option value="top">top</option> <option value="middle">center</option> <option value="bottom">bottom</option> </select> <div class="option-row"> <label for="at_horizontal"> Aligns to textbox:</label> <select id="at_horizontal" class="position"> <option value="left">left</option> <option value="center">center</option> <option value="right">right</option> </select> <select id="at_vertical" class="position"> <option value="top">top</option> <option value="middle">center</option> <option value="bottom">bottom</option> </select> <div class="option-row"> <label for="offset"> With offset:</label> <input onblur="changed()" id="offset" type="text" size="15" /> <div class="option-row"> <label for="collision_horizontal"> Horizontal collision detection:</label> <select id="collision_horizontal"> <option value="flip">flip</option> <option value="fit">fit</option> <option value="none">none</option> </select> <label for="collision_vertical"> Vertical collision detection:</label> <select id="collision_vertical"> <option value="flip">flip</option> <option value="fit">fit</option> <option value="none">none</option> </select> <!-- オプションマークアップの 終 了 --> 184 Copyright GrapeCity inc. All rights reserved.

186 search メソッドを 使 用 してテキストボックスに 入 力 した 文 字 を 検 索 す る 次 のコードは search メソッドを 使 用 して wijcombobox のテキストボックスに 入 力 した 4 つの 値 を 使 用 して 都 市 名 を 検 索 する 方 法 を 示 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { var proxy = new wijhttpproxy({ url: " datatype: "jsonp", data: { featureclass: "P", style: "full", maxrows: 12, key: 'geonames' var myreader = new wijarrayreader([{ name: 'label', mapping: function (item) { return item.name + (item.adminname1? ", " + item.adminname1 : "") + ", " + item.countryname, { name: 'value', mapping: 'name', { name: 'selected', defaultvalue: false ]); var datasource = new wijdatasource({ reader: myreader, proxy: proxy $("#tags").wijcombobox({ data: datasource, showtrigger: false, search: function (e, obj) { obj.datasrc.proxy.options.data.name_startswith = obj.term.value;, select: function (e, item) { $('#output').html(' 出 身 地 : ' + item.label); </script> <div class="main demo"> 185 Copyright GrapeCity inc. All rights reserved.

187 <!-- デモマークアップの 開 始 --> <label for="tags"> 都 市 を 検 索 する4 文 字 を 入 力 します</label> <input id="tags" style="width: 300px" /> <p> <label id="output"> </label> </p> <!-- デモマークアップの 終 了 --> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <!-- オプションマークアップの 終 了 --> select イベントを 使 用 してコンボボックスで 選 択 した 項 目 をトリガー する 次 のコードは select イベントを 使 用 してコンボボックスで 選 択 した 項 目 をトリガーする 方 法 を 示 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#tags").wijcombobox(); $("#states").wijcombobox(); </script> <h2> 選 択 </h2> <div class="main demo"> <!-- デモマークアップの 開 始 --> <div> <select id="states" onchange="$('#output').html(' 現 在 地 :' + this.value)"> <option value="al">alabama</option> <option value="ak">alaska</option> <option value="az">arizona</option> <option value="ar">arkansas</option> <option value="ca">california</option> <option value="co">colorado</option> <option value="ct">connecticut</option> <option value="de">delaware</option> <option value="fl">florida</option> <option value="ga">georgia</option> <option value="hi">hawaii</option> <option value="id">idaho</option> <option value="il">illinois</option> <option value="in">indiana</option> <option value="ia">iowa</option> <option value="ks">kansas</option> <option value="ky">kentucky</option> 186 Copyright GrapeCity inc. All rights reserved.

188 <option value="la">louisiana</option> <option value="me">maine</option> <option value="md">maryland</option> <option value="ma">massachusetts</option> <option value="mi">michigan</option> <option value="mn">minnesota</option> <option value="ms">mississippi</option> <option value="mo">missouri</option> <option value="mt">montana</option> <option value="ne">nebraska</option> <option value="nv">nevada</option> <option value="nh">new Hampshire</option> <option value="nj">new Jersey</option> <option value="nm">new Mexico</option> <option value="ny">new York</option> <option value="nc">north Carolina</option> <option value="nd">north Dakota</option> <option value="oh" selected="selected">ohio</option> <option value="ok">oklahoma</option> <option value="or">oregon</option> <option value="pa">pennsylvania</option> <option value="ri">rhode Island</option> <option value="sc">south Carolina</option> <option value="sd">south Dakota</option> <option value="tn">tennessee</option> <option value="tx">texas</option> <option value="ut">utah</option> <option value="vt">vermont</option> <option value="va">virginia</option> <option value="wa">washington</option> <option value="wv">west Virginia</option> <option value="wi">wisconsin</option> <option value="wy">wyoming</option> </select> <p> <label id="output"> 選 択 してください</label></p> <!-- デモマークアップの 終 了 --> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <!-- オプションマークアップの 終 了 --> Wijdatepager wijdatepager ウィジェットは 特 定 の 時 間 間 隔 ビュー( 日 / 週 または 月 )を 使 用 してユーザーが 日 付 をすばやく 選 択 できる 水 平 UI コントロールです デフォルトでは wijdatepager は 現 在 の 日 付 を 選 択 された 日 付 として 使 用 して 日 ビューを 表 示 しま す wijdatepager ウィジェットは jquery.wijmo.wijdatepager.js ライブラリによって 作 成 されます 次 の 例 のように wijdatepager にはコンテンツが 含 まれます 187 Copyright GrapeCity inc. All rights reserved.

189 <div id="datepager" style="margin-top:20px"> 次 のようなスクリプトで wijdatepager を 初 期 化 できます <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#datepager").wijdatepager(); </script> 関 連 項 目 : wijdatepager の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください wijdatepager Wijdatepager チュートリアル 以 下 のチュートリアルでは datepager ウィジェットを 含 む MVC プロジェクトの 作 成 手 順 について 説 明 します. 注 意 :: このチュートリアルでは MVC Classicバープロジェクトを 作 成 済 みであることを 前 提 にしています 詳 細 について は MVC Classic プロジェクトの 作 成 トピックを 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では 最 初 にビューを 設 定 します コンテンツを 日 付 ページャに 追 加 します 注 意 :: この 手 順 では MVC Classicバープロジェクトを 作 成 済 みであることを 前 提 にしています 詳 細 については MVC Classic プロジェクトの 作 成 トピックを 参 照 してください 以 下 の 手 順 を 実 行 します 1. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 2. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="datepager1" class="ui-corner-all"> このマークアップは datepager のコンテンツをページに 追 加 します この 手 順 では ビューを 作 成 しました 次 の 手 順 手 順 2:ウィジェットの 初 期 化 では スクリプトを 追 加 し ウィジェットを 初 期 化 します 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では マークアップを 追 加 し datepager に 表 示 するコンテンツを 追 加 しました この 手 順 では ウィジェットを 初 期 化 するために 必 要 な jquery スクリプトを 追 加 します 188 Copyright GrapeCity inc. All rights reserved.

190 以 下 の 手 順 を 実 行 します 1. 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 して wijdatepager ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#datepager").wijdatepager(); </script> このスクリプトはウィジェットを 初 期 化 します アプリケーションを 作 成 し wijdatepager ウィジェットを 追 加 して 初 期 化 しました 次 の 手 順 手 順 3:プロジェクトの 実 行 で は ウィジェットの 実 行 時 のインタラクティブ 操 作 を 表 示 します 手 順 3:プロジェクトの 実 行 前 の 手 順 では アプリケーションを 作 成 し wijdatepager ウィジェットを 追 加 して 初 期 化 しました この 手 順 では ウィジェット の 実 行 時 のインタラクティブ 操 作 を 確 認 します 以 下 の 手 順 を 実 行 します 1. [F5]を 押 して アプリケーションを 実 行 します アプリケーションと wijdatepager は 次 のように 表 示 されます 2. 前 または 次 の 月 の 名 前 をクリックし 表 示 される 月 を 変 更 します 3. 日 をクリックし 選 択 された 日 付 を 変 更 します このチュートリアルでは wijdatepager ウィジェットをアプリケーションに 追 加 して 実 行 時 のウィジェットを 観 察 しました DatePager ビュータイプの 設 定 wijdatepager ウィジェットは 日 週 月 の 複 数 のビュータイプをサポートします この 機 能 を 利 用 するには viewtype オプ ションを 設 定 するだけです ビュータイプを 設 定 するには 以 下 の 手 順 を 実 行 します 1. 新 しい ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します( MVC Classic プロジェクトの 作 成 を 参 照 してくださ い) 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="datepager"> このマークアップは datepager ウィジェットのコンテンツをページに 追 加 します 次 の 手 順 では datepager を 初 期 化 し ます 4. 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 し wijdatepager ウィジェットを 初 期 化 して viewtype オプションを 設 定 します 189 Copyright GrapeCity inc. All rights reserved.

191 <script type="text/javascript"> $("#datepager").wijdatepager({ viewtype: "month" </script> 実 行 時 に 日 付 ページャに 月 ビュータイプが 表 示 されます このトピックの 作 業 結 果 [F5]を 押 して アプリケーションを 実 行 します 日 付 ページャに 月 ビュータイプが 表 示 されることに 注 意 してください 選 択 された 日 付 の 設 定 wijdatepager ウィジェットは 現 在 選 択 されている 日 付 を 強 調 表 示 します selecteddate オプションを 設 定 するだけです 選 択 された 日 付 を 設 定 するには 以 下 の 手 順 を 実 行 します 1. 新 しい ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します MVC Classic プロジェクトの 作 成 を 参 照 してくださ い 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="datepager"> このマークアップは datepager ウィジェットのコンテンツをページに 追 加 します 次 の 手 順 では datepager を 初 期 化 し ます 4. 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 し wijdatepager ウィジェットを 初 期 化 して selecteddate オプションを 設 定 します <script type="text/javascript"> $("#datepager").wijdatepager({ selecteddate: new Date(2015, 11, 21) </script> 実 行 時 に 日 付 ページャに 選 択 された 11/21/2015 が 表 示 されます このトピックの 作 業 結 果 [F5]を 押 して アプリケーションを 実 行 します 日 付 ページャに 選 択 された 11/21/2015 が 表 示 されることに 注 意 してください 週 の 最 初 の 曜 日 の 設 定 wijdatepager ウィジェットでは 週 の 最 初 の 曜 日 (0~6)を 設 定 できます たとえば 日 曜 日 は0 月 曜 日 は1のように 続 きま す デフォルトでは firstdayofweek オプションは0( 日 曜 日 )に 設 定 されます 週 の 最 初 の 曜 日 を 設 定 するには 以 下 の 手 順 を 実 行 します 1. 新 しい ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します MVC Classic プロジェクトの 作 成 を 参 照 してくださ い 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します 190 Copyright GrapeCity inc. All rights reserved.

192 <div id="datepager"> このマークアップは datepager ウィジェットのコンテンツをページに 追 加 します 次 の 手 順 では datepager を 初 期 化 し ます 4. 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 し wijdatepager ウィジェットを 初 期 化 して selecteddate オプションを 設 定 します <script type="text/javascript"> $("#datepager").wijdatepager({ firstdayofweek: 1 </script> 実 行 時 に 週 の 最 初 の 曜 日 に 月 曜 日 が 表 示 されます このトピックの 作 業 結 果 [F5]を 押 して アプリケーションを 実 行 します 週 の 最 初 の 曜 日 に 月 曜 日 が 表 示 されることに 注 意 してください Wijdatasource wijdatasource クラスを 使 用 し 表 形 式 のデータを wijwidget に 提 供 できます wijdatasource クラスを データリーダやオプ ションのプロキシと 共 に 使 用 できます jquery.wijmo.wijdatasource.js ライブラリには リーダとプロキシクラスの2つのサンプ ルが 含 まれます wijdatasource ウィジェットクラスは jquery.wijmo.wijdatasource.js ライブラリによって 作 成 されます 関 連 項 目 : wijdatasource の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください wijdatasource Wijdatasource チュートリアル 以 下 のチュートリアルでは wijdatasource とプロキシを 使 用 してリモートデータをロードするリストを 含 む MVC プロジェクトの 作 成 手 順 について 説 明 します 注 意 :: このチュートリアルでは MVC Classicバープロジェクトを 作 成 済 みであることを 前 提 にしています 詳 細 について は MVC Classic プロジェクトの 作 成 トピックを 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では 最 初 にビューを 設 定 します コンテンツをデータソースに 追 加 します 注 意 :: この 手 順 では MVC Classicバープロジェクトを 作 成 済 みであることを 前 提 にしています 詳 細 については MVC Classic プロジェクトの 作 成 トピックを 参 照 してください 以 下 の 手 順 を 実 行 します 1. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 2. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します 191 Copyright GrapeCity inc. All rights reserved.

193 <div class="ui-widget"> <input style="width: 400px" id="testinput" type="textbox" class="ui-widgetcontent ui-corner-all" /><input type="button" onclick="loadremotedata()" id="loadremote" value="load Remote Data" /> <div id="list" style="height: 300px; width: 400px;"> このマークアップはテキストボックス ボタン およびリストを 追 加 します ボタンがクリックされると リモートデータソー スからのデータがリストに 表 示 されます この 手 順 では ビューを 作 成 しました 次 の 手 順 手 順 2:ウィジェットの 初 期 化 では スクリプトを 追 加 し ウィジェットを 初 期 化 します 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では マークアップを 追 加 し データソースページに 表 示 するコンテンツを 追 加 しました この 手 順 では 必 要 な jquery スクリプトを 追 加 し ウィジェットを 初 期 化 します 以 下 の 手 順 を 実 行 します 1. 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 して wijdatasource ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { var superpanelrefreshed = false; var proxy = new wijhttpproxy({ url: " datatype: "jsonp", data: { featureclass: "P", style: "full", maxrows: 12, name_startswith: 'ab', key: 'geonames' var myreader = new wijarrayreader([{ name: 'label', mapping: function (item) { return item.name + (item.adminname1? ", " + item.adminname1 : "") + ", " + item.countryname, { name: 'value', mapping: 'name', { name: 'selected', defaultvalue: false ]); 192 Copyright GrapeCity inc. All rights reserved.

194 var list = $("#list"); var input = $('#testinput'); list.wijlist({ selected: function (event, ui) { var item = ui.item; input.val(item.value); list.wijlist('deactivate'); datasource = new wijdatasource({ reader: myreader, proxy: proxy, loading: function () { input.addclass('wijmo-wijcombobox-loading');, loaded: function (data) { list.wijlist('setitems', data.items); list.wijlist('renderlist'); list.wijlist('refreshsuperpanel'); input.removeclass('wijmo-wijcombobox-loading'); datasource.load(); input.bind("keydown.wijcombobox", function (event) { var keycode = $.ui.keycode; switch (event.keycode) { case keycode.up: list.wijlist('previous', event); // 一 部 のブラウザでテキストフィールドの 先 頭 へのカーソルの 移 動 を 禁 止 event.preventdefault(); break; case keycode.down: if (!list.is(':visible')) { list.show(); return; list.wijlist('next', event); // 一 部 のブラウザでテキストフィールドの 末 尾 へのカーソルの 移 動 を 禁 止 event.preventdefault(); break; case keycode.enter: event.preventdefault(); list.wijlist('select', event); break; case keycode.page_up: list.wijlist('previouspage'); break; case keycode.page_down: list.wijlist('nextpage'); break; default: break; 193 Copyright GrapeCity inc. All rights reserved.

195 function loadremotedata() { datasource.proxy.options.data.name_startswith = $('#testinput').val(); datasource.load(); </script> このスクリプトは リストとボタンを 初 期 化 し wijdatasource を 使 用 してリモートデータをリストにロードします Tアプリケーションを 作 成 し wijdatasource ウィジェットを 追 加 して 初 期 化 しました 次 の 手 順 手 順 3:プロジェクトの 実 行 では ウィジェットの 実 行 時 のインタラクティブ 操 作 を 表 示 します 手 順 3:プロジェクトの 実 行 前 の 手 順 では アプリケーションを 作 成 し wijdatasource ウィジェットを 追 加 して 初 期 化 しました この 手 順 では アプリケー ションの 実 行 時 のインタラクティブ 操 作 を 表 示 します 以 下 の 手 順 を 実 行 します 1. [F5] を 押 して アプリケーションを 実 行 します 初 期 にデータがリストに 表 示 されます 2. ボタンをクリックします 新 しいデータがリストにロードされます このチュートリアルでは wijdatasource クラスを 使 用 し データをリストにロードしました ローカルデータの 読 み 込 み 次 のスクリプトを 使 用 し ローカルデータを 読 み 込 むことができます // 読 み 込 む 配 列 var testarray = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; // 配 列 のデータリーダを 作 成 します var myreader = new wijarrayreader([{ name: 'label', {name: 'value', {name: 'selected',defaultvalue: false]); // データソースを 作 成 します var datasource = new wijdatasource({ reader: myreader, data: testarray, loaded: function (data){ // data.items で 項 目 を 取 得 します var items = data.items; // データソースをロードします ロード 後 にロードしたイベントが 発 生 します datasource.load(); プロキシでリモートデータを 読 み 込 む 次 のコードで プロキシを 使 用 してリモートデータを 読 み 込 むことができます 194 Copyright GrapeCity inc. All rights reserved.

196 // プロキシを 定 義 します var proxy = new wijhttpproxy({ url: " datatype: "jsonp", data: { featureclass: "P", style: "full", maxrows: 12, name_startswith: 'ab', key: 'geonames' // リーダを 定 義 します var myreader = new wijarrayreader([ { name: 'label', mapping: function (item){ return item.name + (item.adminname1? ", " + item.adminname1 : "") + ", " + item.countryname, {name: 'value',mapping: 'name']); // データソースを 作 成 します var datasource = new wijdatasource({ reader: myreader, proxy: proxy, loaded: function (data){ // 項 目 を 読 み 込 ます var items = data.items; // ロードをトリガーします datasource.load(); Wijdialog wijdialog ウィジェットは 情 報 の 表 示 に 便 利 なモーダルまたはモードレスダイアログボックスを 作 成 可 能 な UI で す wijdialog ウィジェットは アニメーション 外 部 コンテンツの 表 示 およびアラートウィンドウとしての wijdialog ウィジェット の 使 用 をサポートします wijdialog ウィジェットでユーザーは 移 動 したり サイズ 変 更 したり インタラクティブ 操 作 を 行 うこと ができます メニューを 表 示 するビューの.cshtml ファイルを 開 きます 次 のマークアップを 使 用 し ダイアログボックスを 作 成 します <div id="dialog" title="ダイアログ"> <p> これは 既 定 のダイアログです </p> リストを 作 成 したら wijdialog ウィジェットを 初 期 化 する 必 要 があります これを 行 うには リストを 含 む.cshtml ファイルに 次 195 Copyright GrapeCity inc. All rights reserved.

197 のスクリプトを 追 加 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { // デバッガ // $(":wijmo-wijdialog").wijdialog("destroy").remove(); $('#dialog').wijdialog({ autoopen: true, captionbuttons: { refresh: { visible: false </script> プロジェクトを 実 行 すると 基 本 の wijdialog は 次 のような 表 示 になります 関 連 項 目 : wijdialog の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijdialog Wijdialog チュートリアル このセクションでは 指 定 されたコンテンツを 表 示 するダイアログボックスを 備 えた MVC プロジェクトの 作 成 手 順 について 説 明 します このトピックでは ASP.NET MVC 4 Wijmo アプリケーションを 作 成 済 みであることが 前 提 となります 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください. 手 順 1:ビューの 設 定 この 手 順 では マークアップを 追 加 し コンテンツをダイアログボックスに 追 加 します 1. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックして ファイルを 開 きます 2. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します このマークアップはダイアログボックスをページに 追 加 します 196 Copyright GrapeCity inc. All rights reserved.

198 <div id="dialog" title="lorem Ipsum"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/> Pellentesque gravida, justo in fringilla cursus,<br/> dui orci ornare augue, at placerat odio lectus vitae lorem.<br/> Duis consequat mauris erat, vel vulputate velit.;<br/> </p> 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では wijdialog ウィジェットを 作 成 し マークアップを 使 用 してそのコンテンツを 指 定 しました この 手 順 では jquery スクリプトを 追 加 し ウィジェットを 初 期 化 します 終 了 の <div> タグの 後 に 次 のスクリプトを 追 加 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { // デバッガ // $(":wijmo-wijdialog").wijdialog("destroy").remove(); $('#dialog').wijdialog({ autoopen: true, captionbuttons: { refresh: { visible: false </script> 手 順 3:プロジェクトの 実 行 この 手 順 では アプリケーションを 実 行 し 指 定 されたコンテンツを 表 示 します [F5]を 押 して プロジェクトを 実 行 します wijdialog ウィジェットは 次 のような 表 示 になります 197 Copyright GrapeCity inc. All rights reserved.

199 外 部 コンテンツの 設 定 wijdialog ウィジェットは 同 じプロジェクトの 別 のページまたは 外 部 Web サイトからの 外 部 コンテンツの 表 示 をサポートしま す Web サイト( MVC コント ロールエクスプローラの Dialog > External Content サンプルのライブデモをご 覧 ください 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 依 存 関 係 をチェックして プロジェクトが Wijmo の 最 新 バージョンを 参 照 していることを 確 認 します これらはページの <head> タグ 内 に 配 置 されている 必 要 があります Wijmo の 最 新 バージョンの 依 存 関 係 は で 確 認 できます 4. 以 下 のマークアップをページの <body> タグ 内 に 追 加 して ダイアログウィンドウを 作 成 します <div id="dialog" title="search!"> 5. 以 下 のスクリプトを 追 加 して ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(function () { // $(":wijmo-wijdialog").wijdialog("destroy").remove(); $("#dialog").wijdialog({ width: 840, height: 640, contenturl: ' autoopen: true </script> 6. アプリケーションを 実 行 して 外 部 コンテンツを 表 示 します カスタム HTML コンテンツの 作 成 wijdialog ウィジェットはカスタム HTML コンテンツをサポートします 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 198 Copyright GrapeCity inc. All rights reserved.

200 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 依 存 関 係 をチェックして プロジェクトが Wijmo の 最 新 バージョンを 参 照 していることを 確 認 します これらはページの <head> タグ 内 に 配 置 されている 必 要 があります Wijmo の 最 新 バージョンの 依 存 関 係 は で 確 認 できます 4. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div> <div id="dialog" title="custom HTML"> <h2>html コンテンツ</h2><p> カスタムの HTML コンテンツを 追 加 することができます <br /> ここにテキストを 入 力 します <input type="text" id="input1" /> <br/> 以 下 のボタンをクリックします <input type="button" value="show" onclick="alert(document.getelementbyid('input1').value)" /> 5. 以 下 のスクリプトを 追 加 して ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { // デバッガ // $(":wijmo-wijdialog").wijdialog("destroy").remove(); $('#dialog').wijdialog({ autoopen: true, captionbuttons: { refresh: { visible: false </script> 6. アプリケーションを 実 行 します テキストを 入 力 して 表 示 をクリックします ポップアップは 次 の 図 のようになります モーダルダイアログオプションの 使 用 このセクションでは wijdialog ウィジェットをモーダルダイアログウィンドウとして 設 定 する 方 法 を 学 びます Web サイト ( コントロールエクスプローラ の Dialog > Modal サンプルのライブデモをご 覧 ください 199 Copyright GrapeCity inc. All rights reserved.

201 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div> <div> <input type="button" value="show Dialog" onclick="$('#dialogmodal').wijdialog('open')" /> <div id="dialog-modal" title="モーダルダイアログ"> <p> モーダルオーバーレイ 画 面 を 追 加 すると ページのコンテンツを 暗 くしてダイアログを 目 立 た せることができます </p> 4. 以 下 のスクリプトを 挿 入 して ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { // $(":wijmo-wijdialog").wijdialog("destroy").remove(); $("#dialog-modal").wijdialog({ autoopen: true, height: 180, width: 400, modal: true </script> 5. アプリケーションを 実 行 して モーダルダイアログウィンドウを 表 示 します モーダルダイアログウィンドウは 次 のよう な 図 になります アラートダイアログの 作 成 wijdialog ウィジェットでは モーダルアラートウィンドウを 簡 単 に 作 成 できます Web サイト ( にアクセスし コントロールエクスプローラ の Dialog > Alert Dialog サンプルのライブデモをご 覧 ください 200 Copyright GrapeCity inc. All rights reserved.

202 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div> <div id="dialog-message" title="アップロード 完 了 "> <p> <span class="ui-icon ui-icon-circle-check"></span>ファイルは 正 常 に アップロードされました! </p> 4. 以 下 のスクリプトを 挿 入 して ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { // $(":wijmo-wijdialog").wijdialog("destroy").remove(); $("#dialog-message").wijdialog({ autoopen: true, height: 180, width: 400, modal: true, buttons: { Ok: function () { $(this).wijdialog("close");, captionbuttons: { pin: { visible: false, refresh: { visible: false, toggle: { visible: false, minimize: { visible: false, maximize: { visible: false </script> 5. アプリケーションを 実 行 してアラートウィンドウを 表 示 します <p></p> タグの 間 にあるテキストを 変 更 してアラートを カスタマイズできます アラートウィンドウは 次 の 図 のようになるはずです 201 Copyright GrapeCity inc. All rights reserved.

203 確 認 ダイアログの 作 成 wijdialog ウィジェットでは ファイルの 削 除 やごみ 箱 を 空 にするなどのイベントを 確 認 する 確 認 ダイアログを 作 成 できます Web サイト にアクセスし コントロー ルエクスプローラの Dialog > Confirm Dialog サンプルのライブデモをご 覧 ください. 1. ASP.NET MVC Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダをクリックし _Layout.cshtml ファイルをダブルクリックして それを 開 きます 3. ソリューションエクスプローラで Views Home フォルダをクリックし Index.cshtml ファイルをダブルクリックしてそれ を 開 きます 4. 以 下 のマークアップを 追 加 して ボタン 付 きのダイアログウィンドウを 作 成 します <div> <input type="button" value=" 確 認 " onclick="$('#dialogconfirm').wijdialog('open')" /> <div id="dialog-confirm" title="ごみ 箱 を 空 にする"> <p> <span class="ui-icon ui-icon-alert"></span>これらの 項 目 を 完 全 に 削 除 し ますか? 5. 以 下 のスクリプトを 挿 入 して ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { /$(":wijmo-wijdialog").wijdialog("destroy").remove(); $("#dialog-confirm").wijdialog({ autoopen: true, resizable: false, height: 180, width: 400, modal: true, buttons: { " 削 除 ": function () { $(this).wijdialog("close"); 202 Copyright GrapeCity inc. All rights reserved.

204 </script>, キャンセル: function () { $(this).wijdialog("close"); 6. アプリケーションを 実 行 して 確 認 ウィンドウを 表 示 します <p></p> タグの 間 にあるテキストを 変 更 して 確 認 ダイアロ グウィンドウをカスタマイズできます 確 認 ダイアログは 次 の 図 のようになるはずです wijdialog のアニメーション 化 wijdialog ウィジェットはアニメーションをサポートします Web サイト ( にアクセスし コントロールエクスプローラの Dialog > Animation サンプルのライブデモをご 覧 ください 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div> <div id="dialog" title="ダイアログ"> <p> ほら すごいでしょう!</p> 4. 以 下 のスクリプトを 追 加 して ウィジェットを 初 期 化 し アニメーションを 追 加 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { // $(":wijmo-wijdialog").wijdialog("destroy").remove(); $('#dialog').wijdialog({ autoopen: true, show: 'blind', hide: 'explode', collapsinganimation: { animated: "puff", duration: 300, easing: 203 Copyright GrapeCity inc. All rights reserved.

205 "easeoutexpo", expandinganimation: { animated: "bounce", duration: 300, easing: "easeoutexpo", width: 500 $('#expandeffecttypes').change(function () { var ee = $("#expandeffecttypes option:selected").val(); $("#dialog").wijdialog("option", "expandinganimation", { effect: ee, duration: 500 $('#collapseeffecttypes').change(function () { var ce = $("#collapseeffecttypes option:selected").val(); $("#dialog").wijdialog("option", "collapsinganimation", { effect: ce, duration: 500 ) $('#showeffecttypes').change(function () { var ee = $("#showeffecttypes option:selected").val(); $("#dialog").wijdialog("option", "show", ee); $('#hideeffecttypes').change(function () { var ce = $("#hideeffecttypes option:selected").val(); $("#dialog").wijdialog("option", "hide", ce); ) </script> 5. アプリケーションを 実 行 してアニメーション 効 果 を 表 示 します Wijeditor wijeditor ウィジェットを 使 用 すると 任 意 の Web ページ 上 の HTML コンテンツをオーサリングおよび 管 理 できます この 直 感 的 な Microsoft Word スタイルのエディタでは デザイン ソースコード または 分 割 ビューの 希 望 するスタイルで 編 集 できま す wijeditor ウィジェットは jquery.wijmo.wijeditor.js ライブラリによって 作 成 されます エディタを 表 示 するビューの.cshtml ファイルを 開 きます 次 のマークアップのように <textarea> 要 素 を 追 加 します <textarea id="wijeditor" style="width: 756px; height: 475px;"> <h1>componentone Studioでできること</h1> <h2>あらゆるプラットフォーム 要 件 に 応 えたい</h2> <p>componentone StudioはWindowsフォーム ASP.NET WPF Silverlight Windows Phoneの 各 プラットフォーム 向 けのコンポーネントを 収 録 しています どのプラットフォームにも 業 務 アプリケーションで 要 求 さ れる 機 能 を 満 たすコンポーネントをバランスよく 揃 えているので デスクトップアプリケーションからWebアプリケーション さら にモバイル 開 発 まで 高 度 な 機 能 を 持 った 業 務 アプリケーションを 開 発 できます </p> </textarea> ここで wijeditor ウィジェットを 初 期 化 する 必 要 があります これを 行 うには 次 のスクリプトを.cshtml ファイルに 追 加 できま す <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijeditor").wijeditor(); 204 Copyright GrapeCity inc. All rights reserved.

206 </script> プロジェクトを 実 行 すると エディタはこのような 表 示 になります 関 連 項 目 : wijeditor の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijeditor Wijeditor チュートリアル 以 下 のチュートリアルでは エディタや 編 集 するテキストを 含 む MVC 4 Wijmo プロジェクトの 作 成 手 順 について 説 明 します このトピックでは ASP.NET MVC 4 Wijmo アプリケーションを 作 成 済 みであることが 前 提 となります 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では マークアップを 追 加 し ページをレンダリングして エディタ 内 に 表 示 されるテキストを 追 加 します 以 下 を 実 行 し ます 1. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックして ファイルを 開 きます 2. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します このマークアップはエディタのコンテンツを 追 加 します 205 Copyright GrapeCity inc. All rights reserved.

207 <div class="page"> <div id="header"> <div id="title"> <h2> 概 要 </h2> <div class="main demo"> <!-- デモマークアップの 開 始 --> <textarea id="wijeditor" style="width: 756px; height: 475px;"> <h1>componentone Studioでできること</h1> <h2>あらゆるプラットフォーム 要 件 に 応 えたい</h2> <p> ComponentOne StudioはWindowsフォーム ASP.NET WPF Silverlight Windows Phoneの 各 プラットフォーム 向 けのコンポーネントを 収 録 しています どのプラットフォームにも 業 務 アプリ ケーションで 要 求 される 機 能 を 満 たすコンポーネントをバランスよく 揃 えているので デスクトップアプリケーションから Webアプリケーション さらにモバイル 開 発 まで 高 度 な 機 能 を 持 った 業 務 アプリケーションを 開 発 できます </p> </textarea> <!-- デモマークアップの 終 了 --> 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では マークアップを 追 加 し エディタに 表 示 されるコンテンツを 追 加 しました ここでは jquery スクリプトを 追 加 し wijeditor ウィジェットを 使 用 して テキストを 表 示 および 編 集 できます 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 して wijeditor ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijeditor").wijeditor(); </script> 手 順 3:プロジェクトの 実 行 [F5]を 押 して アプリケーションを 実 行 します 追 加 したテキストが wijeditor に 表 示 されます 206 Copyright GrapeCity inc. All rights reserved.

208 何 かテキストを 選 択 し エディタリボンにあるボタンをクリックしてフォーマットします この 例 では フォントが 変 更 され 背 景 色 が 追 加 されて 箇 条 書 きリストが 作 成 されました 207 Copyright GrapeCity inc. All rights reserved.

209 簡 単 なエディタツールバーの 使 用 wijeditor ウィジェットは 次 のボタンを 備 える 編 集 ツールバーの 簡 略 版 をサポートします 太 字 斜 体 リンク ブロッ ク 引 用 取 り 消 し 線 日 付 と 時 刻 画 像 の 参 照 番 号 付 きリスト 箇 条 書 きリスト および コードの 挿 入 Web サイト ( )にアクセスし MVC コントロールエクスプ ローラの Editor > Simple サンプルのライブデモをご 覧 ください この 機 能 を 利 用 するには 単 にスクリプトで mode オプションを "simple" に 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijeditor").wijeditor({ mode: "simple" </script> 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラで View Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <body> <div class="demo"> <textarea id="wijeditor" style="width: 400px; height: 400px;"> <h1>windows フォームから Silverlight 開 発 まで 活 用 できるオールインワンパッケージ</h1> <p>componentone Studio EnterpriseはWindowsフォーム ASP.NET WPF Silverlight Windows Phone 向 けのコンポーネントを 収 録 したスイート 製 品 です プラットフォームごとにデータグリッドやチャート 帳 票 に 加 え コンテナやナビゲーションといったユーザーインタフェース PDFやExcelファイルへの 出 力 機 能 を 提 供 してい ます Windows フォームはもちろんのこと WPFででも 対 話 性 の 高 いユーザーインタフェースの 業 務 システムを 開 発 することが でき さらには SilverlightやAjax 対 応 ASP.NETでリッチなWebアプリケーション 開 発 も 可 能 です また モバイルデバ イス 向 けの 開 発 にも 活 躍 します スマートフォンなどでの 閲 覧 に 適 したWebサイトやASP.NETアプリケーション 制 作 にも 対 応 できるうえ Windows Phoneのネイティブアプリ 開 発 のためのコンポーネントも 収 録 しています 各 コンポーネントは 用 途 に 適 した 機 能 が 充 実 小 規 模 なWebフォームから 大 規 模 エンタープライズシステムまで あらゆるニーズに 柔 軟 に 対 応 し 開 発 生 産 性 を 大 幅 に 向 上 させます </p> </textarea> 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijeditor ウィジェットを 初 期 化 し ます 208 Copyright GrapeCity inc. All rights reserved.

210 <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijeditor").wijeditor({ mode: "simple" </script> 5. [F5]を 押 して アプリケーションを 実 行 します 簡 単 なツールバーを 使 用 して テキストと 書 式 を 選 択 します WijEditor での BBCode の 使 用 wijeditor ウィジェットは メッセージボード 内 のポストの 書 式 設 定 に 使 用 するマークアップ 言 語 である BBCode(Bulletin Board Code の 略 )をサポートします この 機 能 を 利 用 するには 単 にスクリプトで mode オプションを 設 定 します Web サイ ト ( )にアクセスし MVC コントロールエクスプ ローラの Editor > BBCode サンプルのライブデモをご 覧 ください <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijeditor").wijeditor({ mode: "bbcode", editormode: "split" </script> 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラで View Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <body> <div class="demo"> 209 Copyright GrapeCity inc. All rights reserved.

211 <textarea id="wijeditor" style="width: 450px; height: 200px;"> [B]サンプルテキスト[/B] [URL= Web サイト [/URL] をご 参 照 ください </textarea> 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijeditor ウィジェットを 初 期 化 し ます <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijeditor").wijeditor({ mode: "bbcode", editormode: "split" </script> 5. [F5]を 押 して アプリケーションを 実 行 します Wijeventscalendar wijeventscalendar ウィジェットは ユーザーによる 予 定 の 追 加 編 集 および 管 理 が 可 能 なフル 機 能 のスケジュールです wijeventscalendar を 表 示 するビューの.cshtml ファイルを 開 きます 次 のマークアップのように DOM 要 素 を 追 加 します <div id="eventscalendar"> ここで ウィジェットを 初 期 化 する 必 要 があります これを 行 うには 次 のスクリプトを.cshtml ファイルに 追 加 できます <script type="text/javascript"> $(document).ready(function () { $("#eventscalendar").wijevcal(); </script> プロジェクトを 実 行 すると カレンダーはこのような 表 示 になります 210 Copyright GrapeCity inc. All rights reserved.

212 Wijeventscalendar チュートリアル 以 下 のチュートリアルでは イベントカレンダーを 含 む MVC プロジェクトの 作 成 手 順 について 説 明 します このトピックでは ASP.NET MVC 4 Wijmo アプリケーションを 作 成 済 みであることが 前 提 となります 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では マークアップを 追 加 し コンテンツをアコーディオンのペインに 追 加 します 以 下 を 実 行 します 1. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックして ファイルを 開 きます 2. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します このマークアップはイベントカレンダーをページに 追 加 し ます <div id="eventscalendar"> 手 順 2:ウィジェットの 初 期 化 とカスタマイズ 前 の 手 順 では イベントカレンダーのプレースホルダーのマークアップを 追 加 しました ここでは jquery スクリプトを 追 加 し ウィジェットを 初 期 化 できます その 後 一 部 のオプションを 追 加 し イベントカレンダーをカスタマイズします 1. 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 して wijeventscalendar ウィジェット を 初 期 化 します <script type="text/javascript"> $(document).ready(function () { $("#eventscalendar").wijevcal(); </script> 211 Copyright GrapeCity inc. All rights reserved.

213 2. 表 示 される 時 間 間 隔 を 決 定 するオプションを 設 定 し wijeventscalendar をカスタマイズします 設 定 するオプションは 下 表 のとおりです オプション 値 説 明 timeinterval 60 このオプションは 日 ビューの 時 間 間 隔 ( 分 単 位 )を 指 定 します timeintervalheight 25 このオプションは 日 ビューの 時 間 間 隔 行 の 高 さ(ピクセル 単 位 )を 指 定 しま す timerulerinterval 120 このオプションは 日 ビューのタイムルーラ 間 隔 ( 分 単 位 )を 指 定 します これらのオプションをスクリプトに 追 加 します 次 のようになります <script type="text/javascript"> $(document).ready(function () { $("#eventscalendar").wijevcal({ timeinterval: 60, timeintervalheight: 25, timerulerinterval: 120 </script> 下 図 は 時 間 間 隔 オプションどうしの 違 いを 示 します 手 順 3:プロジェクトの 実 行 この 手 順 では アプリケーションを 実 行 し イベントカレンダーを 表 示 します [F5]を 押 して アプリケーションを 実 行 します 指 定 した 時 間 間 隔 に 注 意 してください 212 Copyright GrapeCity inc. All rights reserved.

214 C1EventsCalendar での 開 始 日 の 変 更 デフォルトでは イベントカレンダーの DayView は 現 在 の 日 付 から 始 まります selecteddate オプションを 使 用 して 日 付 を 変 更 できます 1. 以 下 の jquery スクリプトを 入 力 し selecteddate オプションを 設 定 します <script type="text/javascript"> $(document).ready(function () { $("#eventscalendar").wijevcal({ selecteddate: new Date(2015, 12, 20) </script> 2. アプリケーションを 実 行 すると イベントカレンダーは 次 のように 表 示 されます 213 Copyright GrapeCity inc. All rights reserved.

215 C1EventsCalendar のカルチャの 変 更 各 カルチャには 日 付 時 刻 数 値 およびその 他 の 情 報 を 表 示 するためのさまざまな 表 記 規 則 と 書 式 があります このトピッ クでは culture オプションを 使 用 してイベントカレンダーのカルチャを 設 定 する 方 法 について 説 明 します 1. 参 照 内 の </script> 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 し selecteddate オプションを 設 定 します <script type="text/javascript"> $(document).ready(function () { $("#eventscalendar").wijevcal({ culture: "ja-jp" </script> 2. アプリケーションを 実 行 すると イベントカレンダーは 日 本 語 で 表 示 されます ヘッダーバーの 非 表 示 化 デフォルトで イベントカレンダーは コントロールの 最 上 部 にヘッダーバーを 表 示 します ヘッダーバーには 実 行 時 に 現 在 のビューを 変 更 できるカレンダービューのタブが 含 まれています headerbarvisible オプションを False に 設 定 して ヘッ ダーバーを 無 効 にできます 1. 参 照 内 の </script> 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 し headerbarvisible オプションを 設 定 しま す <script type="text/javascript"> $(document).ready(function () { $("#eventscalendar").wijevcal({ headerbarvisible: false 214 Copyright GrapeCity inc. All rights reserved.

216 </script> 2. アプリケーションを 実 行 すると イベントカレンダーは 次 のように 表 示 されます ヘッダーバーが 欠 落 していることに 注 意 してください ナビゲーションバーの 非 表 示 化 デフォルトで イベントカレンダーは コントロールの 最 上 部 にナビゲーションバーを 表 示 します ナビゲーションバーは 選 択 し た 日 付 を 表 示 し ユーザーが 実 行 時 に 前 の 日 付 または 月 あるいは 次 の 日 付 または 月 に 移 動 できるようにします navigationbarvisible オプションを False に 設 定 して ヘッダーバーを 無 効 にできます 1. 参 照 内 の </script> 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 し navigationbarvisible オプションを 設 定 します <script type="text/javascript"> $(document).ready(function () { $("#eventscalendar").wijevcal({ navigationbarvisible: false </script> 2. アプリケーションを 実 行 すると イベントカレンダーは 次 のように 表 示 されます ナビゲーションバーが 欠 落 していること に 注 意 してください 215 Copyright GrapeCity inc. All rights reserved.

217 Wijexpander wijexpander ウィジェットでは さまざまなアニメーション 効 果 を 使 用 して 展 開 したパネル 内 の 埋 め 込 みや 外 部 コンテンツを 表 示 または 非 表 示 にできます 実 行 時 にエキスパンダのヘッダーをクリックすると 展 開 したコンテンツを 表 示 または 非 表 示 にで きます wijexpander ウィジェットは jquery.wijmo.wijexpander.js ライブラリによって 作 成 されます 次 の 例 のように <h1> と <div> タグの 組 み 合 わせを 使 用 して コンテンツとヘッダーを 作 成 できます <div id="expander"> <h1> ヘッダー </h1> <div> コンテンツ 次 のスクリプトを 使 用 し これらの DOM 要 素 構 造 体 のいずれかを 初 期 化 できます <script type="text/javascript"> $(document).ready(function() { $("#expander").wijexpander(); </script> プロジェクトを 実 行 すると エキスパンダはデフォルトの 縮 小 位 置 になります 216 Copyright GrapeCity inc. All rights reserved.

218 その 展 開 位 置 では このような 表 示 になります 関 連 項 目 : wijexpander の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijexpander Wijexpander チュートリアル 以 下 のチュートリアルでは クリックすると 展 開 して 指 定 されたコンテンツを 表 示 するペイン 構 成 のエキスパンダを 含 む MVC プ ロジェクトの 作 成 手 順 について 説 明 します 注 意 : このチュートリアルでは MVC Classicバープロジェクトを 作 成 済 みであることを 前 提 にしています 詳 細 について は MVC Classic プロジェクトの 作 成 トピックを 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では 最 初 にビューを 設 定 します ウィジェットが 展 開 されたときに 表 示 されるコンテンツをエキスパンダに 追 加 しま す 注 意 : この 手 順 では MVC Classicバープロジェクトを 作 成 済 みであることを 前 提 にしています 詳 細 については MVC Classic プロジェクトの 作 成 トピックを 参 照 してください 以 下 の 手 順 を 実 行 します 1. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 2. 次 のマークアップをページの <body> タグ 内 のすぐ 後 に 追 加 します <div id="expander"> <h2>ヘッダー</h2> <div> Vestibulum ut eros non enim commodo hendrerit. Donec porttitor tellus non magna. Nam ligula elit, pretium et, rutrum non, hendrerit id, ante. Nunc mauris sapien, cursus in. このマークアップは エキスパンダのコンテンツをページに 追 加 します この 手 順 では ビューを 作 成 しました 次 の 手 順 手 順 2:ウィジェットの 初 期 化 では スクリプトを 追 加 し ウィジェットを 初 期 化 します 217 Copyright GrapeCity inc. All rights reserved.

219 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では マークアップを 追 加 し エキスパンダに 表 示 されるコンテンツを 追 加 しました この 手 順 では ウィジェットを 初 期 化 するために 必 要 な jquery スクリプトを 追 加 します 以 下 の 手 順 を 実 行 します 1. 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 して wijexpander ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#expander").wijexpander(); </script> このスクリプトはウィジェットを 初 期 化 します アプリケーションを 作 成 し wijexpander ウィジェットを 追 加 して 初 期 化 しました 次 の 手 順 手 順 3:プロジェクトの 実 行 で は ウィジェットの 実 行 時 のインタラクティブ 操 作 を 表 示 します 手 順 3:プロジェクトの 実 行 前 の 手 順 では アプリケーションを 作 成 し wijexpander ウィジェットを 追 加 して 初 期 化 しました この 手 順 では ウィジェットの 実 行 時 のインタラクティブ 操 作 を 表 示 します 以 下 の 手 順 を 実 行 します 1. [F5]を 押 して アプリケーションを 実 行 します アプリケーションが 表 示 されます 初 期 に wijexpander は 展 開 状 態 で 表 示 されます 2. wijexpander のヘッダーを1 回 クリックすると エキスパンダが 縮 小 します このチュートリアルでは wijexpander ウィジェットをアプリケーションに 追 加 し ウィジェットを 初 期 化 して 実 行 時 のウィジェッ トを 観 察 しました エクスパンダへのアニメーションの 適 用 wijexpander ウィジェットはアニメーションをサポートします この 機 能 を 利 用 するには 単 に animated オプションを 設 定 しま す Web サイト( MVC コント ロールエクスプローラの Expander > Animation サンプルのライブデモをご 覧 ください 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 218 Copyright GrapeCity inc. All rights reserved.

220 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="expander1"> <h3>ヘッダー</h3> <div> Vestibulum ut eros non enim commodo hendrerit.donec porttitor tellus non magna.nam ligula elit, pretium et, rutrum non, hendrerit id, ante.nunc mauris sapien, cursus in. <div id="expander2"> <h3>ヘッダー</h3> <div> Vestibulum ut eros non enim commodo hendrerit.donec porttitor tellus non magna.nam ligula elit, pretium et, rutrum non, hendrerit id, ante.nunc mauris sapien, cursus in. このマークアップは 4つのエクスパンダウィジェットのコンテンツをページに 追 加 します 次 の 手 順 では エクスパンダ のアニメーションを 設 定 します 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 し wijexpander ウィジェットを 初 期 化 して animated オプションを 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#expander").wijexpander(); $("#expander2").wijexpander({ animated:"custom1", expanded:false $("#expander3").wijexpander({ animated:"custom2" $("#expander4").wijexpander({ animated:false jquery.wijmo.wijexpander.animations.custom1 = function (options) { this.slide(options, { easing:"easeoutexpo", duration: 900 jquery.wijmo.wijexpander.animations.custom2 = function (options) { if (options.expand) options.content.show("puff", options, 300); else options.content.hide("explode", options, 300); </script> 219 Copyright GrapeCity inc. All rights reserved.

221 これによりエクスパンダが 初 期 化 され アニメーションが 追 加 されます このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し 各 エクスパンダのヘッダーをクリックして 設 定 したアニメーションを 表 示 します 最 初 の エクスパンダはデフォルトのアニメーションを 表 示 し 2 番 目 と3 番 目 のエクスパンダはカスタムアニメーションを 表 示 し 4 番 目 のエクスパンダは 無 効 になっています 拡 張 方 向 の 変 更 wijexpander ウィジェットでは ユーザーは 上 下 左 または 右 からペインのコンテンツを 拡 張 できます この 機 能 を 利 用 す るには 単 に expanddirection オプションを 設 定 します 例 については Web サイト( MVC コントロールエ クスプローラの Expander > ExpandDirection サンプルのライブデモをご 覧 ください 拡 張 方 向 を 設 定 するには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="expander"> <h3>ヘッダー</h3> <div> Vestibulum ut eros non enim commodo hendrerit.donec porttitor tellus non magna.nam ligula elit, pretium et, rutrum non, hendrerit id, ante.nunc mauris sapien, cursus in. このマークアップは 1つのエクスパンダウィジェットのコンテンツをページに 追 加 します 次 の 手 順 では エクスパンダ の 拡 張 方 向 を 設 定 します 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 し wijexpander ウィジェットを 初 期 化 して expanddirection オプションを 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#expander").wijexpander({ expanddirection: "top" </script> <div style="clear:both;float:none;"> <div> <label for="seleasing2">easing:</label> <select id="expanddirection" onchange="applyoptions()" onclick="applyoptions()"> <option value="top" selected="selected"> 上 </option> <option value="right"> 右 </option> <option value="bottom"> 下 </option> 220 Copyright GrapeCity inc. All rights reserved.

222 <option value="left"> 左 </option> </select> <script type="text/javascript" language="javascript"> function applyoptions() { $("#expander").wijexpander("option", "expanddirection", $("#expanddirection").get(0).value); </script> これにより 4つの 値 を 持 つドロップダウンボックスが 追 加 されます 実 行 時 に ドロップダウンボックスから 方 向 を 選 択 し wijexpander ウィジェットの 拡 張 方 向 を 変 更 します このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し ドロップダウンボックスから 方 向 を 選 択 します それに 応 じて wijexpander ウィジェッ トの 拡 張 方 向 が 変 わります 外 部 コンテンツの 表 示 wijexpander ウィジェットに 外 部 コンテンツを 表 示 できます この 機 能 を 利 用 するには 単 に contenturl オプションを 設 定 し ます 例 については Web サイト( クセスし MVC コントロールエクスプローラの Expander > ContentUrl サンプルのライブデモをご 覧 ください 拡 張 方 向 を 設 定 するには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="expandercontenturl1"> <h3>componentone.com(クリックして 縮 小 / 拡 張 )</h3> <div style="height:400px;overflow:hidden;"> このマークアップは 1つのエクスパンダウィジェットのコンテンツをページに 追 加 します 次 の 手 順 では エクスパンダ のコンテンツを 設 定 します 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 し wijexpander ウィジェットを 初 期 化 して contenturl オプションを 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#expandercontenturl1").wijexpander({ contenturl: " expanded:true </script> これにより ComponentOne Web サイトがエクスパンダに 表 示 されます このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し ComponentOne Web サイトがウィジェットに 表 示 されることを 確 認 します リンクをク 221 Copyright GrapeCity inc. All rights reserved.

223 リックして エクスパンダ 内 で Web サイトを 操 作 できることを 確 認 します Wijgallery wijgallery ウィジェットでは 仮 想 化 ギャラリーに 画 像 のリストを 表 示 できます wijgallery ウィジェットは jquery.wijmo.wijgallery.js ライブラリによって 作 成 されます 次 の 例 のように wijgallery はグラフィック 画 像 のリストで 構 成 されます <div id="wijgallery" class=""> <ul class=""> <li class=""><a href=" <img alt="1" src=" title="キャプション 1" /></a> <li class=""><a href=" <img alt="2" src=" title="キャプション 2" /></a> <li class=""><a href=" <img alt="3" src=" title="キャプション 3" /></a> <li class=""><a href=" <img alt="4" src=" title="キャプション 4" /></a> <li class=""><a href=" <img alt="5" src=" title="キャプション 5" /></a> </ul> 次 のスクリプトは wijgallery ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijgallery").wijgallery({ showcontrolsonhover: true, thumbsdisplay: 4, thumbslength: 150, showpager: false $("#btn1").click(function () { $("#wijgallery").wijgallery("option", "disabled", false); </script>h ここで 取 り 上 げたマークアップとスクリプトは 次 のような 結 果 になります 222 Copyright GrapeCity inc. All rights reserved.

224 関 連 項 目 : wijgallery の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください wijgallery Wijgallery チュートリアル 以 下 のチュートリアルでは 複 数 の 画 像 を 表 示 するギャラリーを 含 む MVC プロジェクトの 作 成 手 順 について 説 明 します 注 意 : このチュートリアルでは MVC Classicバープロジェクトを 作 成 済 みであることを 前 提 にしています 詳 細 について は MVC Classic プロジェクトの 作 成 トピックを 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では 最 初 にビューを 設 定 します コンテンツをギャラリーに 追 加 します 注 意 : この 手 順 では MVC Classicバープロジェクトを 作 成 済 みであることを 前 提 にしています 詳 細 については MVC Classic プロジェクトの 作 成 トピックを 参 照 してください 以 下 の 手 順 を 実 行 します 1. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 2. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="wijgallery"> <ul> <li><img src=" alt="スポーツ 1" /> <span>キャプション 1</span> <li><img src=" alt="スポーツ 2" /> <span>キャプション 2</span> <li><img src=" alt="スポーツ 3" /> 223 Copyright GrapeCity inc. All rights reserved.

225 <span>キャプション 3</span> <li><img src=" alt="スポーツ 4" /> <span>キャプション 4</span> <li><img src=" alt="スポーツ 5" /> <span>キャプション 5</span> <li><img src=" alt="スポーツ 6" /> <span>キャプション 6</span> <li><img src=" alt="スポーツ 7" /> <span>キャプション 7</span> <li><img src=" alt="スポーツ 8" /> <span>キャプション 8</span> </ul> このマークアップはギャラリーのコンテンツをページに 追 加 します この 手 順 では ビューを 作 成 しました 次 の 手 順 手 順 2:ウィジェットの 初 期 化 では スクリプトを 追 加 し ウィジェットを 初 期 化 します 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では マークアップを 追 加 し ギャラリーに 表 示 されるコンテンツを 追 加 しました この 手 順 では ウィジェットを 初 期 化 するために 必 要 な jquery スクリプトを 追 加 します 以 下 の 手 順 を 実 行 します 1. 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 して wijgallery ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijgallery").wijgallery({ showcontrolsonhover: true, thumbsdisplay: 4, thumbslength: 150, showpager: false $("#btn1").click(function () { $("#wijgallery").wijgallery("option", "disabled", false); </script> このスクリプトはウィジェットを 初 期 化 します 2. 前 の 手 順 で 追 加 した 終 了 の </script> タグの 後 に 次 のマークアップを 追 加 して wijgallery ウィジェットをスタイリン グします <style type="text/css"> #wijgallery { width: 750px; 224 Copyright GrapeCity inc. All rights reserved.

226 </style> このマークアップはウィジェットをスタイリングします アプリケーションを 作 成 し wijgallery ウィジェットを 追 加 して 初 期 化 しました 次 の 手 順 手 順 3:プロジェクトの 実 行 では ウィジェットの 実 行 時 のインタラクティブ 操 作 を 表 示 します. 手 順 3:プロジェクトの 実 行 前 の 手 順 では アプリケーションを 作 成 し wijgallery ウィジェットを 追 加 して 初 期 化 しました この 手 順 では ウィジェットの 実 行 時 のインタラクティブ 操 作 を 確 認 します 以 下 の 手 順 を 実 行 します 1. [F5]を 押 して アプリケーションを 実 行 します アプリケーションと wijgallery は 次 のように 表 示 されます 2. メイン 画 像 の 下 にあるサムネイル 画 像 の1つを 押 して 別 の 画 像 に 移 動 します 3. 左 右 の 矢 印 を 押 して 前 または 次 の 画 像 に 移 動 します 4. 右 上 隅 の Play ボタンを 押 して 画 像 をスライドショーで 再 生 します このチュートリアルでは wijgallery ウィジェットをアプリケーションに 追 加 し ウィジェットを 初 期 化 して 実 行 時 のウィジェットを 観 察 しました ギャラリーへのアニメーションの 適 用 wijgallery ウィジェットはアニメーションをサポートします この 機 能 を 利 用 するには 単 に animated オプションを 設 定 しま す Web サイト( MVC コント ロールエクスプローラの Gallery > Animation サンプルのライブデモをご 覧 ください 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します 225 Copyright GrapeCity inc. All rights reserved.

227 <div id="wijgallery" class=""> <ul class=""> <li class=""><a href=" <img alt="1" src=" title="キャプション1" /> </a> <li class=""><a href=" <img alt="2" src=" title="キャプション 2" /> </a> <li class=""><a href=" <img alt="3" src=" title="キャプション 3" /> </a> <li class=""><a href=" <img alt="4" src=" title="キャプション 4" /> </a> <li class=""><a href=" <img alt="5" src=" title="キャプション 5" /> </a> <li class=""><a href=" <img alt="6" src=" title="キャプション 6" /> </a> <li class=""><a href=" <img alt="7" src=" title="キャプション7" /> </a> <li class=""><a href=" <img alt="8" src=" title="キャプション8" /> </a> <li class=""><a href=" <img alt="9" src=" title="キャプション9" /> </a> <li class=""><a href=" <img alt="10" src=" title="キャプション 10" /> </a> </ul> このマークアップは ギャラリーウィジェットのコンテンツをページに 追 加 します 次 の 手 順 では ギャラリーのアニメー ションを 設 定 します 226 Copyright GrapeCity inc. All rights reserved.

228 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 のマークアップを 追 加 して animated オプションを 設 定 します <div class="option-row"> <label for="showingeffecttypes"> Transition </label> <select id="showeffecttypes" name="effects"> <option value="blind">blind</option> <option value="clip">clip</option> <option value="drop">drop</option> <option value="explode">explode</option> <option value="fade">fade</option> <option value="fold">fold</option> <option value="highlight">highlight</option> <option value="puff">puff</option> <option value="scale">scale</option> <option value="size">size</option> <option value="slide">slide</option> </select> これにより wijgallery のアニメーションをカスタマイズする 要 素 が 追 加 されます 実 行 時 に アニメーションスタイルを 選 択 できます スタイルを 適 用 すると 前 へ または 次 へ ボタンを 使 用 して 画 像 をナビゲートし 選 択 したアニメー ションを 表 示 できます 5. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 のマークアップを 追 加 してスタイルのオプションを 設 定 します <style type="text/css">.wijmo-wijcarousel-text span { padding:5px; #wijgallery { width:750px; </style> これにより wijgallery ウィジェットのサイズが 設 定 されます 6. 前 の 手 順 で 追 加 した </style> 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijgallery ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijgallery").wijgallery({ thumbslength: 120 var transitions = { animated:"fade", duration: 1000, 227 Copyright GrapeCity inc. All rights reserved.

229 easing:null $('#showeffecttypes').change(function () { var ee = $("#showeffecttypes option:selected").val(); $.extend(transitions, { animated:ee $("#wijgallery").wijgallery("option", "transitions", transitions); </script> これによりギャラリーが 初 期 化 され アニメーションが 追 加 されます このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し ドロップダウンボックスからアニメーションスタイルを 選 択 します スタイルを 適 用 する と 前 へ または 次 へ ボタンを 使 用 して 画 像 をナビゲートし 選 択 したアニメーションを 表 示 できます ギャラリーの 向 きの 設 定 wijgallery ウィジェットは 水 平 および 垂 直 方 向 の 両 方 の 向 きをサポートします この 機 能 を 利 用 するには 単 に orientation オプションを 設 定 します 例 については Web サイト ( MVC コントロールエクスプ ローラの Gallery > Orientation サンプルのライブデモをご 覧 ください ギャラリーの 向 きを 設 定 するには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div> <h3> 向 きは "vertical" 左 側 </h3> <div id="wijgallery" class=""> <ul class=""> <li class=""><a href=" <img alt="1" src=" title="キャ プション 1" /> </a> <li class=""><a href=" <img alt="2" src=" title="キャ プション 2" /> </a> <li class=""><a href=" <img alt="3" src=" title="キャ プション 3" /> </a> <li class=""><a href=" <img alt="4" src=" title="キャ プション 4" /> </a> <li class=""><a href=" 228 Copyright GrapeCity inc. All rights reserved.

230 <img alt="5" src=" title="キャ プション 5" /> </a> <li class=""><a href=" <img alt="6" src=" title="キャ プション 6" /> </a> </ul> <br /> <h3> 向 きは "vertical" 右 側 </h3> <br /> <div id="wijgallery1" class=""> <ul class=""> <li class=""><a href=" <img alt="1" src=" title="キャプ ション 1" /> </a> <li class=""><a href=" <img alt="2" src=" title="キャプ ション 2" /> </a> <li class=""><a href=" <img alt="3" src=" title="キャプ ション 3" /> </a> <li class=""><a href=" <img alt="4" src=" title="キャプ ション 4" /> </a> <li class=""><a href=" <img alt="5" src=" title="キャプ ション 5" /> </a> <li class=""><a href=" <img alt="6" src=" title="キャプ ション 6" /> </a> </ul> <br /> <h3> 向 きは"horizontal" 上 部 </h3> <br /> <div id="wijgallery3" class=""> <ul class=""> <li class=""><a href=" <img alt="1" src=" title="キャ プション 1" /> </a> <li class=""><a href=" <img alt="2" src=" title="キャ プション 2" /> </a> 229 Copyright GrapeCity inc. All rights reserved.

231 <li class=""><a href=" <img alt="3" src=" title="キャ プション 3" /> </a> <li class=""><a href=" <img alt="4" src=" title="キャ プション 4" /> </a> <li class=""><a href=" <img alt="5" src=" title="キャ プション 5" /> </a> <li class=""><a href=" <img alt="6" src=" title="キャ プション 6" /> </a> </ul> このマークアップは 3つのギャラリーウィジェットのコンテンツをページに 追 加 します 次 の 手 順 では ギャラリーの 向 き を 設 定 します 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 し wijgallery ウィジェットを 初 期 化 し て orientation オプションを 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijgallery").wijgallery({ thumbnailorientation:"vertical", thumbnaildirection:"before", thumbsdisplay: 3, thumbslength: 150, showcounter:false, showtimer:false, $("#wijgallery1").wijgallery({ thumbnailorientation:"vertical", thumbsdisplay: 3, showcounter:false, thumbslength: 150, showtimer:false $("#wijgallery3").wijgallery({ thumbnaildirection:"before", showcounter:false, showtimer:false </script> <style type="text/css"> wijmo-wijcarousel-text span 230 Copyright GrapeCity inc. All rights reserved.

232 { padding:5px; #wijgallery, #wijgallery1 { width:750px; height:240px; #wijgallery3 { width:750px; height:411px; </style> 2つのギャラリーが 縦 向 きに 表 示 され 1つのギャラリーが 横 向 きに 表 示 されます(デフォルト) このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し 2つのギャラリーが 縦 向 きに(1つがサムネイル 画 像 付 きで 左 側 に 1つがサムネイル 画 像 付 きで 右 側 に) 表 示 され 1つのギャラリーが 横 向 きに 表 示 されることを 確 認 します ギャラリーのページャの 設 定 ページャを 追 加 し wijgallery ウィジェットのページャスタイルを 変 更 できます この 機 能 を 利 用 するには 単 に pagertype オ プションと pagerposition オプションを 設 定 します 例 については Web サイト ( MVC コントロールエクスプローラ の Gallery > Paging サンプルのライブデモをご 覧 ください ページャタイプを 設 定 するには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div> <div id="wijgallery" class=""> <ul class=""> <li class=""><a href=" <img alt="1" src=" title="キャプション 1" /> </a> <li class=""><a href=" <img alt="2" src=" title="キャプション 2" /> </a> <li class=""><a href=" <img alt="3" src=" title="キャプション 3" /> </a> <li class=""><a href=" <img alt="4" src=" 231 Copyright GrapeCity inc. All rights reserved.

233 title="キャプション 4" /> </a> <li class=""><a href=" <img alt="5" src=" title="キャプション 5" /> </a> <li class=""><a href=" <img alt="6" src=" title="キャプション 6" /> </a> <li class=""><a href=" <img alt="7" src=" title="キャプション 7" /> </a> <li class=""><a href=" <img alt="8" src=" title="キャプション 8" /> </a> <li class=""><a href=" <img alt="9" src=" title="キャプション 9" /> </a> <li class=""><a href=" <img alt="10" src=" title="キャプション 10" /> </a> </ul> このマークアップは ギャラリーウィジェットのコンテンツをページに 追 加 します 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijgallery ウィジェットを 初 期 化 し ます <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijgallery").wijgallery({ showpager:true, showcounter:false </script> <style type="text/css">.wijmo-wijcarousel-text span { padding:5px; #wijgallery { width:750px; height:300px; 232 Copyright GrapeCity inc. All rights reserved.

234 </style> ギャラリーは 数 値 ページャスタイルを 使 用 します このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し ギャラリーは 数 値 ページャスタイルを 使 用 することを 確 認 します ギャラリーへのビデオコンテンツの 取 り 込 み wijgallery ウィジェットでは ユーザーはビデオコンテンツを 表 示 できます 例 については Web サイト ( MVC コントロールエクスプ ローラの Gallery > Videos サンプルのライブデモをご 覧 ください ビデオコンテンツを 取 り 込 むには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="wijgallery" class=""> <ul class=""> <li class=""> <a href=" <img src=" title="キー ボードに 触 る 猫 " alt="キーボードに 触 る 猫 " /></a> <li class=""> <a href=" <img src=" title="くしゃみをするパ ンダ" alt="くしゃみをするパンダ" /></a> <li class=""> <a href=" <img src=" title=" 会 話 をす る 猫 " alt=" 会 話 をする 猫 " /></a> </ul> このマークアップは 3 種 類 のビデオを 含 む1つのギャラリーウィジェットをページに 追 加 します 次 の 手 順 では ギャラ リーを 初 期 化 します 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijgallery ウィジェットを 初 期 化 し ます <script id="scriptinit" type="text/javascript"< $(document).ready(function () { $("#wijgallery").wijgallery({ showcontrolsonhover:false, 233 Copyright GrapeCity inc. All rights reserved.

235 thumbsdisplay: 4, thumbslength: 100, mode:"iframe", showcaption:false, showtimer:false </script< <style type="text/css"< #wijgallery { width:750px; height:500px; </style< 上 記 のスクリプトとマークアップはギャラリーを 初 期 化 します このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し ギャラリーウィジェットにビデオが 表 示 されることを 確 認 します 現 在 表 示 されているビ デオを 変 更 するには 次 へ または 前 へ ボタンを 押 します 外 部 ギャラリーコンテンツの 表 示 wijgallery ウィジェットでは ユーザーは 外 部 ソースからコンテンツを 表 示 できます これには ギャラリーインタフェース 内 で インタラクティブ 操 作 できる Web ページの 表 示 が 含 まれます 例 については Web サイト ( MVC コントロールエクスプ ローラの Gallery> frame サンプルのライブデモをご 覧 ください 外 部 コンテンツを 表 示 するには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="wijgallery" class=""> <ul class=""> <li class=""><a href=" src=" title="yahoo" alt="yahool" /> </a> <li class=""><a href=" src=" title="componentone" alt="componentone" /></a> <li class=""><a href=" src=" title="microsoft" alt="microsoft" /></a> </ul> このマークアップは Web サイトのコンテンツを 含 むページに1つのギャラリーウィジェットを 追 加 します 次 の 手 順 で は ギャラリーを 初 期 化 します 234 Copyright GrapeCity inc. All rights reserved.

236 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijgallery ウィジェットを 初 期 化 し ます <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#wijgallery,#wijgallery2").wijgallery({ showcontrolsonhover:false, thumbsdisplay: 4, thumbslength: 100, mode:"iframe", showcaption:false, showtimer:false </script> <style type="text/css"> #wijgallery { width:750px; height:500px; </style> 上 記 のスクリプトとマークアップはギャラリーを 初 期 化 し ギャラリーのスタイルを 設 定 します このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し ギャラリーに Web サイトのコンテンツが 含 まれていることを 確 認 します 現 在 表 示 さ れている Web サイトを 変 更 するには 次 へ または 前 へ ボタンを 押 します Wijgrid wijgrid ウィジェットは ユーザーによるデータの 選 択 編 集 ソート スクロール フィルタリング およびグループ 化 のインタラ クティブ 操 作 が 可 能 な 表 形 式 のデータグリッドです 高 度 にカスタマイズ 可 能 なグリッドを 使 用 すると データをより 理 解 しやす くし より 効 果 的 に 視 覚 化 できます wijgrid は テーブル DOM 要 素 を 使 用 します wijgrid ウィジェットの 作 成 に 使 用 されるマークアップは 次 のようになります <table></table> wijgrid がテーブル 自 身 をデータソースとして 使 用 する 場 合 テーブルにデータ 行 と オプションで 列 ヘッダーを 格 納 する <thead> セクションが 含 まれている 必 要 があります たとえば 次 のようになります wijgrid <table class = "table1"> <thead> <tr> <th> 列 0</th> <th> 列 1</th> <th> 列 N</th> 235 Copyright GrapeCity inc. All rights reserved.

237 </tr> </thead> <tbody> <tr> <td>セル00</td> <td>セル01</td> <td>セル0n</td> </tr> <tr> <td>セル10</td> <td>セルn0</td> <td>セルnn</td> </tr> </tbody> </table> セルは colspan および/または rowspan 属 性 を 含 むことができないため セルと 行 の 属 性 とスタイルは 無 視 されます 上 でテーブルを 追 加 し 次 のコードで グリッドを 表 示 する ビューの.cshtml ファイル 内 で wijgrid を 初 期 化 できます $("#table-element").wijgrid({ data: [[0, "a"], [1, "b"], [2, "c"]] ここで wijgrid の allowpaging と allowsorting オプションを 使 用 し ページングと 列 ソートを 許 可 します <script type="text/javascript"> $(document).ready(function () { $(".table1").wijgrid({ allowpaging: true, allowsorting: true </script> MVC アプリケーションを 実 行 すると wijgrid はこのような 表 示 になります 関 連 項 目 : wijgrid の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijgrid Wijgrid チュートリアル 236 Copyright GrapeCity inc. All rights reserved.

238 このチュートリアルでは MVC 4 wijgrid のモデル ビュー コントローラーの 作 成 方 法 について 学 びます 以 下 のトピックで は MVC プロジェクトを 作 成 した 後 ComponentOne wijgrid ウィジェットで Razor 構 文 を 使 用 してテーブルにバインドデータ を 移 植 し テーブルを 書 式 設 定 されたグリッドに 変 換 します 注 意 : このチュートリアルでは MVC Classicバープロジェクトを 作 成 済 みであることを 前 提 にしています 詳 細 について は MVC Classic プロジェクトの 作 成 トピックを 参 照 してください 手 順 1:モデルの 作 成 Model には すべてのデータベースアクセス ビジネス 検 出 ロジックが 含 まれます この 例 では ADO.NET エンティティ データモデル(.edmx)を NORTHWND.MDF データベースの[ 商 品 ]テーブルから 生 成 します 注 意 : この 手 順 では MVC Classicバープロジェクトを 作 成 済 みであることを 前 提 にしています 詳 細 については MVC Classic プロジェクトの 作 成 トピックを 参 照 してください 以 下 の 手 順 を 実 行 します 1. ソリューションエクスプローラ で App_Data フォルダを 右 クリックし [ 追 加 既 存 の 項 目 ]を 選 択 します 2. [ 既 存 項 目 の 追 加 ]ダイアログボックスで NORTHWND.MDF ファイルを 探 して 選 択 し 追 加 をクリックします 3. Models フォルダを 右 クリックし [ 追 加 新 しい 項 目 ]を 選 択 します 4. [ 新 しい 項 目 の 追 加 ]ダイアログボックスで 選 択 されたプログラミング 言 語 の 下 の[Data]を 選 択 します 5. [ADO.NET エンティティデータモデル]を 選 択 し [ 名 前 ]フィールドに 名 前 (MyNorthWindEDM.edmx など)を 入 力 し て 追 加 をクリックします [Entity Data Model ウィザード]が 表 示 されます 6. [データベースから 生 成 ]が 選 択 されていることを 確 認 し 次 へ をクリックします 7. [データ 接 続 の 選 択 ] 画 面 で 新 しい 接 続 をクリックします [データソースの 選 択 ]ダイアログボックスが 表 示 されます 8. [Microsoft SQL Server データベースファイル]を 選 択 し 続 行 をクリックします 9. 参 照 ボタンをクリックし プロジェクトの App_Data フォルダ 内 の NORTHWND.MDF ファイルを 指 定 して 開 く を クリックします 10. 選 択 する 場 合 接 続 テスト ボタンをクリックします OK をクリックし [ 接 続 のプロパティ]ダイアログボックスを 閉 じ ます 11. [エンティティ 接 続 設 定 に 名 前 を 付 けて Web.Config に 保 存 :]に NORTHWNDEntities が 選 択 されていることを 確 認 し 次 へ をクリックします 12. [データベースオブジェクトの 選 択 ] 画 面 で Tables ノードを 展 開 し [ 商 品 ]を 選 択 して 完 了 をクリックします モデル(ここでは MyNorthWindEDM.edmx)が 作 成 されてプロジェクトの Models フォルダに 追 加 されます 前 の 手 順 では モデルを 作 成 しました 次 の 手 順 手 順 2:コントローラーの 作 成 では モデルからのデータを 格 納 する ビューを 返 して ユーザーアクションを 処 理 するコントローラーを 作 成 します 手 順 2:コントローラーの 作 成 前 の 手 順 では モデルを 作 成 しました この 手 順 では コントローラー コントローラーを 作 成 して モデルからの[ 商 品 ]テーブル 内 の 項 目 を 返 します 以 下 の 手 順 を 実 行 します 1. ソリューションエクスプローラで Controllers ノードを 展 開 し HomeController をダブルクリックします 2. 次 のインポートステートメントをディレクティブのリストに 追 加 します( PROJECTNAME は 各 自 のプロジェクト 名 に 置 き 換 えます) Visual Basic コードの 書 き 方 Visual Basic Imports [PROJECTNAME] 237 Copyright GrapeCity inc. All rights reserved.

239 C# コードの 書 き 方 C# using [PROJECTNAME].Models; 3. HomeController クラスの 既 存 のコードを 次 のコードに 置 き 換 えます Visual Basic コードの 書 き 方 Visual Basic Public Class HomeController Inherits System.Web.Mvc.Controller Dim northwind As New NORTHWNDEntities() Function Index() As ActionResult ViewBag.Message = "Products" Dim products = northwind.products.tolist() Return View(products) End Function Function About() As ActionResult Return View() End Function End Class C# コードの 書 き 方 C# public class HomeController : Controller { NORTHWNDEntities northwind = new NORTHWNDEntities(); public ActionResult Index() { ViewBag.Message = "Products"; var products = northwind.products.tolist(); return View(products); public ActionResult About() { return View(); このコードは グリッドへのデータ 移 植 に 使 用 されるモデルと データ 移 植 に 応 答 してレンダリングされるビューを 指 定 し ます モデルとコントローラーを 作 成 したら 手 順 3:ビューの 作 成 で プロジェクトのホームページ 上 に 表 示 される テーブル 構 成 のビューを 作 成 できます 手 順 3:ビューの 作 成 前 の 手 順 では モデルとコントローラーを 作 成 しました この 手 順 では プロジェクトのホームページ 上 にテーブルを 表 示 す るビューを 作 成 します Razor 構 文 を 使 用 し モデルからの 商 品 ごとに ProductName と UnitPrice を 取 得 するループを 作 成 します 238 Copyright GrapeCity inc. All rights reserved.

240 以 下 の 手 順 を 実 行 します 1. ソリューションエクスプローラで Views を 展 開 した 後 Home を 展 開 します 2. Index をダブルクリックして ファイルを 開 きます 既 存 の <p></p> タグの 間 に 次 のマークアップを 追 加 し 商 品 の テーブルを 作 成 します <table class="productgrid"> <thead> <tr> <th>name</th> <th>price</th> </tr> </thead> <tbody> </tbody> </table> 3. 次 の Razor 構 文 を <tbody> タグ 内 に 追 加 します Visual Basic コードの 書 き 方 Visual Each p In Next C# コードの 書 き 方 (var p in Model) { <tr> <td>@p.productname</td> <td>@p.unitprice</td> </tr> 4. [F5]を 押 して プロジェクトを 実 行 します ホームページは 次 のような 表 示 になります 239 Copyright GrapeCity inc. All rights reserved.

241 この 手 順 では テーブルを 表 示 するビューを 作 成 しました しかし コーディングせずに 書 式 設 定 されたグリッドを 作 成 する 場 合 はどうすればよいでしょうか?Wijmo を 使 用 できます 手 順 4:MVC プロジェクトへの Wijmo の 追 加 の 手 順 に 従 うだけで す 手 順 4:MVC プロジェクトへの Wijmo の 追 加 Wijmo を 使 用 すると 前 の 手 順 でデータ 移 植 したテーブルを 書 式 設 定 されたグリッドに 簡 単 に 変 換 できます 次 の 例 では (Wijmo.css と.js ファイルへの)CDN リンクを _Layout.cshtml ファイルに 追 加 します その 後 数 行 の jquery を Index.cshtml に 追 加 して 適 切 に 書 式 設 定 された wijgrid を 作 成 します 以 下 の 手 順 を 実 行 します 1. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 2. 依 存 関 係 をチェックし プロジェクトが 最 新 バージョンの Wijmo を 参 照 していることを 確 認 します Wijmo の 最 新 バー ジョンの 依 存 関 係 は で 確 認 できます 3. ソリューションエクスプローラで Views Home を 展 開 し Index をダブルクリックして ファイルを 開 きます 4. 終 了 の </table> タグの 後 に 次 の jquery スクリプトを 入 力 します <script type="text/javascript"> $(document).ready(function () { $(".productgrid").wijgrid({ 240 Copyright GrapeCity inc. All rights reserved.

242 allowsorting: true, allowpaging: true, columns: [ {, { datatype: "currency" ] </script> 5. [F5]を 押 して プロジェクトを 実 行 します テーブルは 価 格 が 通 貨 として 書 式 設 定 されたグリッドになりました 次 のよ うな 表 示 になります このチュートリアルでは クライアント 側 でテーブルを 使 用 して wijgrid ウィジェットを 作 成 しました サーバー 側 wijgrid を 動 的 に 作 成 する 場 合 の 詳 細 については サーバーでの Wijgrid の 作 成 トピックを 参 照 してください 動 的 データロードの 有 効 化 wijgrid の 動 的 データロード 機 能 を 使 用 して 以 下 を 実 行 できます 現 在 のページに 表 示 されているデータのみロード(ページングが 有 効 の 場 合 ) サーバー 上 でのフィルタリング ソート ページングの 操 作 このモードを 有 効 にするには 次 に 示 すように wijdatasource の dynamic オプションを 設 定 します $("#demo").wijgrid({ $("#demo").wijgrid({... data:new wijdatasource({... dynamic:true... )... 動 的 データロード 機 能 を 使 用 する 場 合 のデータ 書 式 -)クライアント サーバー wijgrid は 次 の 構 造 を $.ajax() パラメータでサーバーに 渡 します 241 Copyright GrapeCity inc. All rights reserved.

243 { filtering:array of { datakey, filteroperator, filtervalue, paging:{ pageindex, pagesize, sorting:array of { datakey, sortdirection -)サーバー サーバー クライアント wijgrid は wijdatasource.data オプションとして) 次 の 構 造 を 想 定 しています { rows:array, totalrows:int サーバーでの Wijgrid の 作 成 このトピックでは より 高 度 な wijgrid の 例 を 提 供 し サーバー 側 コードを 使 用 して Web ページ 上 に wijgrid ウィジェットを 作 成 する 方 法 を 説 明 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. Northwind データベースに 基 づくモデルをプロジェクトに 追 加 します NORTHWND.MDF データベースから ADO.NET Entity Data Model(.edmx)を 生 成 し このプロジェクトの App_Data フォルダに 置 きます a. ソリューションエクスプローラ で App Data を 右 クリックし [ 追 加 ] [ 既 存 項 目 ]を 選 択 します b. [ 既 存 項 目 の 追 加 ]ダイアログボックスで NORTHWND.MDF ファイルを 選 択 し 追 加 をクリックします c. Models フォルダを 右 クリックし [ 追 加 ] [ 新 しい 項 目 の 追 加 ]ダイアログボックスで 選 択 したプログラミング 言 語 の 下 にある[データ]を 選 択 します d. [ADO.NET Entity Data Model]を 選 択 し [ 名 前 ]フィールドに 名 前 (MyNorthWindEDM.edmx など)を 入 力 して 追 加 をクリックします [Entity Data Model ウイザード]が 表 示 されます e. [データベースから 生 成 ]が 選 択 されていることを 確 認 して 次 へ をクリックします f. [データ 接 続 の 選 択 ]ダイアログボックスで 新 しい 接 続 をクリックします [データソースの 選 択 ]ダイアログ ボックスが 表 示 されます g. [Microsoft SQL Server のデータベースファイル]を 選 択 し 続 行 をクリックします h. 参 照 ボタンをクリックくし プロジェクトの App_Data フォルダで NORTHWND.MDF ファイルを 指 定 して 開 く をクリックします i. 選 択 したら テスト 接 続 ボタンをクリックします OK をクリックして [Connection プロパティ]ダイアログ ボックスを 閉 じます j. [Web.Config でエンティティ 接 続 設 定 を NORTHWNDEntities として 保 存 ]が 選 択 されていることを 確 認 し 次 へ をクリックします k. データベースオブジェクトの 選 択 ウィンドウで [テーブル]チェックボックスを ON にして 完 了 をクリックしま す モデル(ここでは MyNorthWindEDM.edmx)が 作 成 され プロジェクトの Models フォルダに 追 加 されま す 3. Controllers フォルダに ProductsContoller.cs を 追 加 します a. ソリューションエクスプローラ で Controllers フォルダを 右 クリックし [ 追 加 ] [コントローラー コントローラー]を 選 択 します b. コントローラーに ProductsController という 名 前 を 付 けて 追 加 をクリックします 4. ProductsController.cs で プロジェクトの Models フォルダ 内 のモデルにアクセスできるようにする 指 示 文 を 追 加 し ます この 例 では MyNorthWindEDM.edmx モデルのみ 使 用 しています using PROJECTNAME.Models; 242 Copyright GrapeCity inc. All rights reserved.

244 5. 以 下 のコードを 追 加 して JSON 書 式 設 定 された ソート 済 みのページャブルグリッドを 返 すようサーバーに 要 求 し Northwind データベースから products テーブルを 表 示 します public class ProductsController :Controller { NORTHWNDEntities northwind = new NORTHWNDEntities(); public ActionResult Index() { ViewBag.Message = "Products"; var products = northwind.products.tolist(); return View(products); public ActionResult Grid() { return View(); public JsonResult GetRows() { //ページング string spagesize = Request["paging[pageSize]"]; int pagesize = -1; if (!string.isnullorempty(spagesize)) { pagesize = int.parse(spagesize); string spageindex = Request["paging[pageIndex]"]; int pageindex = -1; if (!string.isnullorempty(spageindex)) { pageindex = int.parse(spageindex); <//ソート var sort = ""; var sortdir = ""; if (Request["sorting[0][dataKey]"]!= null && Request["sorting[0] [datakey]"]!= "") { sort = Request["sorting[0][dataKey]"]; if (Request["sorting[0][sortDirection]"]!= null && Request["sorting[0][sortDirection]"]!= "") { sortdir = Request["sorting[0][sortDirection]"]; if (sortdir.tolower() == "ascending") { sort = "it."+ sort + " asc"; else if (sortdir.tolower() == "descending") { sort = "it."+ sort + " desc"; 243 Copyright GrapeCity inc. All rights reserved.

245 IEnumerable products; if (sort!= "") { products = from p in northwind.products.orderby(sort).skip(pageindex * pagesize).take(pagesize) select new ProductModel() { ProductID = p.productid, ProductName = p.productname, UnitPrice = p.unitprice.value ; else { products = from p in northwind.products.orderby("it.productid").skip(pageindex * pagesize).take(pagesize) select new ProductModel() { ProductID = p.productid, ProductName = p.productname, UnitPrice = p.unitprice.value ; int totalcount = northwind.products.count(); var result = new { TotalRowCount = totalcount, Items = products ; return Json(result, JsonRequestBehavior.AllowGet); 6. ビューを 書 式 設 定 し Wijmo ウィジェットを 作 成 するために 使 用 される JavaScript 依 存 関 係 と Wijmo スタイルシートが 含 まれるコンテンツ 配 信 ネットワーク(CDN)へリンクを 追 加 します a. ソリューションエクスプローラで View Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファ イルを 開 きます b. <head> タグ 内 の 既 存 のマークアップを 次 のマークアップに 置 き 換 えます <head> <title>@viewbag.title</title> <link href="@url.content("~/content/site.css")" rel="stylesheet" type="text/css" /> <script src="@url.content("~/scripts/jquery min.js")" type="text/javascript"></script> <link href="@url.content("~/content/site.css")" rel="stylesheet" type="text/css" /> <link href=" rel="stylesheet" type="text/css" /> <link href=" rel="stylesheet" type="text/css" /> <link href=" rel="stylesheet" type="text/css" /> <script src=" min.js" type="text/javascript"></script> <script src=" type="text/javascript"></script> <script src=" pre.js" type="text/javascript"></script> <script src=" type="text/javascript"></script> <script src=" type="text/javascript"></script> <script src=" type="text/javascript"></script> 244 Copyright GrapeCity inc. All rights reserved.

246 <script src=" type="text/javascript"></script> <script src=" type="text/javascript"></script> <script src=" type="text/javascript"></script> </head> 注 意 :CDNにリンクする 場 合 は で 最 新 バー ジョンの 依 存 関 係 を 使 用 していることを 確 認 してください CDN リンクは 頻 繁 に 更 新 されており このマ ニュアルに 示 されているものより 新 しいバージョンが 存 在 する 場 合 があります 7. これでマークアップが 追 加 され wijgrid を 作 成 できるようになりました ソリューションエクスプローラで View フォルダ を 展 開 し Index.cshtml をダブルクリックして 開 きます 8. 次 の jquery を 追 加 します このマークアップは ProductID ProductName および UnitPrice を 含 む wijgrid を 作 成 します また 今 作 成 した ProductsController.cs から GetRows メソッドも 呼 び 出 しま す <table class="productgrid"> </table> <script type="text/javascript"> $(document).ready(function () { var editarray = []; $(".productgrid").wijgrid({ datakey:"productid", allowpaging:true, allowsorting:true, pagesize: 10, columns: [ { datatype:"number", dataformatstring: "n:0", width:"80px", {, { datatype:"currency", width:"120px" ], data:new wijdatasource({ dynamic:true, proxy:new wijhttpproxy({ url:"../../products/getrows", type:"post", datatype:"json" ), reader: { read:function (datasource) { var count = datasource.data.totalrowcount; datasource.data = datasource.data.items; datasource.data.totalrows = count; new wijarrayreader([ { name:"productid", mapping: "ProductID", { name: "ProductName", mapping: "ProductName", { name:"unitprice", mapping: "UnitPrice" ]).read(datasource); ) 245 Copyright GrapeCity inc. All rights reserved.

247 </script> 9. [F5]を 押 して プロジェクトを 実 行 します グリッドは 次 のように 表 示 されます 列 の 日 付 型 の 設 定 wijgrid ウィジェットでデータを 表 示 する 方 法 を 簡 単 にカスタマイズできます たとえば 値 を 通 貨 やパーセンテージとして 表 示 できま す 例 については Web サイト( MVC コ ントロールエクスプローラの grid > DataTypes サンプルのライブデモをご 覧 ください 日 付 型 を 設 定 するには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックしてファ イルを 開 きます 3. 依 存 関 係 をチェックして プロジェクトが Wijmo の 最 新 バージョンを 参 照 していることを 確 認 します これらはページの <head> タグ 内 に 配 置 されている 必 要 があります Wijmo の 最 新 バージョンの 依 存 関 係 は で 確 認 できます 4. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <table id="demo"> <thead> <tr> <th> 製 品 コード</th><th> 単 価 </th><th> 数 量 </th><th> 割 引 </th><th> 割 引 済 み</th> </tr> </thead> <tbody> <tr> <td>11</td><td>14</td><td>12</td><td>0</td><td>false</td> </tr><tr> <td>42</td><td>9.8</td><td>10</td><td>0</td><td>false</td> </tr><tr> 246 Copyright GrapeCity inc. All rights reserved.

248 <td>72</td><td>34.8</td><td>5</td><td>0</td><td>false</td> </tr><tr> <td>14</td><td>18.6</td><td>9</td><td>0</td><td>false</td> </tr><tr> <td>35</td><td>12.1</td><td>5</td><td>0.5</td><td>true</td> </tr> </tbody> </table> <h4> 元 のデータ</h4> <table id="demo1"> <thead> <tr> <th> 製 品 コード</th><th> 単 価 </th><th> 数 量 </th><th> 割 引 </th><th> 割 引 済 み</th> </tr> </thead> <tbody> <tr> <td>11</td><td>14</td><td>12</td><td>0</td><td>false</td> </tr><tr> <td>42</td><td>9.8</td><td>10</td><td>0</td><td>false</td> </tr><tr> <td>72</td><td>34.8</td><td>5</td><td>0</td><td>false</td> </tr><tr> <td>14</td><td>18.6</td><td>9</td><td>0</td><td>false</td> </tr><tr> <td>35</td><td>12.1</td><td>5</td><td>0.5</td><td>true</td> </tr> </tbody> </table> このマークアップは2つのテーブル 用 のコンテンツを 追 加 します 1つはグリッドに 使 用 され 設 定 したデータ 型 を 表 示 し もう 1つは 元 のデータを 表 示 します 5. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 し wijgrid ウィジェットを 初 期 化 してグリッド のデータ 型 を 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#demo").wijgrid( { allowsorting:true, columns: [ {, { datatype:"currency", { datatype:"number", { datatype:"number", dataformatstring: "p0", { datatype:"boolean" 247 Copyright GrapeCity inc. All rights reserved.

249 ] </script> これにより 各 グリッド 列 のデータ 型 が 設 定 されます このトピックの 作 業 結 果 [F5]キーを 押 してアプリケーションを 実 行 し 上 記 のスクリプトで 設 定 したデータ 型 がグリッドテーブルに 反 映 されていることを 確 認 します 2 番 目 のテーブルでは 書 式 設 定 されていないデータがどのように 表 示 されるかがわかります たとえば 単 価 列 を 通 貨 のように 書 式 設 定 する 方 法 に 注 意 してください グリッドへのデータのロード 複 数 の 異 なるデータソースから wijgrid ウィジェットにデータを 簡 単 にロードできます たとえば DOM テーブル 配 列 ハッ シュ またはリモートデータソースを 利 用 できます 例 については Web サイト ( MVC コントロールエクスプ ローラの grid > DataSources サンプルのライブデモをご 覧 ください 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 依 存 関 係 をチェックして プロジェクトが Wijmo の 最 新 バージョンを 参 照 していることを 確 認 します これらはページの <head> タグ 内 に 配 置 されている 必 要 があります Wijmo の 最 新 バージョンの 依 存 関 係 は で 確 認 できます 4. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div class="main demo"> <p>dom テーブル:</p> <table id="demo-dom"> <thead> <tr> <th>id</th><th>company</th><th>name</th> </tr> </thead> <tbody> <tr> <td>anatr</td><td>ana Trujillo Emparedados y helados</td><td>ana Trujillo</td> 248 Copyright GrapeCity inc. All rights reserved.

250 </tr> <tr> <td>anton</td><td>antonio Moreno Taqueria</td><td>Antonio Moreno</td> </tr> <tr> <td>arout</td><td>around the Horn</td><td>Thomas Hardy</td> </tr> <tr> <td>bergs</td><td>berglunds snabbkop</td><td>christina Berglund</td> </tr> </tbody> </table> <p> 配 列 :</p> <table id="demo-array"> </table> <p>ハッシュ:</p> <table id="demo-hash"> </table> <p>リモート:</p> <table id="demo-remote"> </table> このマークアップは4つのテーブル 用 のコンテンツを 追 加 します それぞれがグリッドの 作 成 に 使 用 されます 5. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijgrid ウィジェットを 初 期 化 しま す <script id="scriptinit" type="text/javascript"> $(document).ready(function () { // DOM $("#demo-dom").wijgrid(); // 配 列 $("#demo-array").wijgrid({ data: [ ["ANATR", "Ana Trujillo Emparedados y helados", "Ana Trujillo"], ["ANTON", "Antonio Moreno Taqueria", "Antonio Moreno"], ["AROUT", "Around the Horn", "Thomas Hardy"], ["BERGS", "Berglunds snabbkop", "Christina Berglund"] ], columns: [ { headertext:"id", { headertext:"company", { headertext:"name" ] // ハッシュ $("#demo-hash").wijgrid({ data: [ { ID:"ANATR", Company:"Ana Trujillo Emparedados y helados", Name:"Ana Trujillo", 249 Copyright GrapeCity inc. All rights reserved.

251 { ID:"ANTON", Company:"Antonio Moreno Taqueria", Name:"Antonio Moreno", { ID:"AROUT", Company:"Around the Horn", Name: "Thomas Hardy", { ID:"BERGS", Company:"Berglunds snabbkop", Name:"Christina Berglund" ] // リモート $("#demo-remote").wijgrid({ data:new wijdatasource({ proxy:new wijhttpproxy({ url:" datatype:"jsonp", data: { featureclass:"p", style:"full", maxrows: 5, name_startswith:"ab", key:"geonames" ), reader:new wijarrayreader([ { name:"label", mapping:function (item) { return item.name + (item.adminname1?", " + item.adminname1 : "") + ", " + item.countryname, { name:"name", mapping:"name", { name:"countrycode", mapping: "countrycode", { name:"continentcode", mapping: "continentcode" ]) ) </script> これにより 各 グリッドのデータソースが 設 定 されます このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し 各 グリッドウィジェットが 異 なるタイプのデータソースにリンクしていることを 確 認 しま す これらのデータソースには DOM テーブル 配 列 ハッシュ およびリモートデータソースが 含 まれます カスタムデータパーサー データを 解 析 するために wijgrid ウィジェットにカスタムデータパーサーを 簡 単 に 追 加 できます 例 については Web サイト ( MVC コントロールエク スプローラの grid > CustomDataParsers サンプルのライブデモをご 覧 ください 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 依 存 関 係 をチェックして プロジェクトが Wijmo の 最 新 バージョンを 参 照 していることを 確 認 します これらはページの <head> タグ 内 に 配 置 されている 必 要 があります Wijmo の 最 新 バージョンの 依 存 関 係 は で 確 認 できます Copyright GrapeCity inc. All rights reserved.

252 4. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div class="main demo"> <table id="demo"> <thead> <tr> <th>boolean</th><th>boolean Parsed</th><th>Number</th><th>Number Parsed</th> </tr> </thead> <tbody> <tr> <td>off</td><td>off</td><td>1</td><td>1</td> </tr> <tr> <td>on</td><td>on</td><td>2</td><td>2</td> </tr> <tr> <td>off</td><td>off</td><td>1993</td><td>1993</td> </tr> <tr> <td>off</td><td>off</td><td>2015</td><td>2015</td> </tr> <tr> <td>on</td><td>on</td><td>100</td><td>100</td> </tr> </tbody> </table> このマークアップは1つのテーブル 用 のコンテンツを 追 加 します 5. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijgrid ウィジェットを 初 期 化 しま す <script id="scriptinit" type="text/javascript"> $(document).ready(function () { var customboolparser = { // DOM ブール parsedom:function (value, culture, format, nullstring) { return this.parse(value, culture, format, nullstring);, // 文 字 列 /ブール ブール parse:function (value, culture, format, nullstring) { if (typeof (value) === "boolean") { return value; if (typeof (value) === "string") { value = $.trim(value); if (!value value === " " value === nullstring) { 251 Copyright GrapeCity inc. All rights reserved.

253 return null; switch ($.trim(value.tolowercase())) { case "off":return false; case "on":return true; return NaN;, // ブール 文 字 列 tostr:function (value, culture, format, nullstring) { return value?"on" :"off"; ; $("#demo").wijgrid({ allowsorting:true, columns: [ {, { datatype: "boolean", dataparser: customboolparser, { datatype: "number", dataformatstring: "n0", { datatype: "number", dataparser: customromanparser ] function customromanparser() { // DOM 数 値 this.parsedom = function (value, culture, format, nullstring) { return this.parse(value.innerhtml);, // 文 字 列 / 数 値 数 値 this.parse = function (value, culture, format, nullstring) { if (typeof (value) === "number" && (value === 0 isnan(value))) { return NaN; if (!value (value === " ") (value === nullstring)) { return null; if (!isnan(value)) { return parseint(value); value = roman(value); return!value?nan :value;, // 数 値 文 字 列 this.tostr = function (value, culture, format, nullstring) { if (value === null) { return nullstring; return roman(value); ; var arab_nums = [1, 4, 5, 9, 10, 40, 50, 90, 100, 400, 500, 900, 1000]; var roman_nums = ['I', 'IV', 'V', 'IX', 'X', 'XL', 'L', 'XC', 'C', 252 Copyright GrapeCity inc. All rights reserved.

254 'CD', 'D', 'CM', 'M']; function roman(value) { if (typeof (value) === "number") { return (function (arab) { var roman = ""; for (var i = 12; arab > 0; ) { if (arab >= arab_nums[i]) { roman += roman_nums[i]; arab -= arab_nums[i]; else { i--; return roman; )(value); else { return (function (roman) { roman = roman.touppercase(); var arab = 0; for (var i = 12, pos = 0, len = roman.length; i >= 0 && pos < len; ) { if (roman.substr(pos, roman_nums[i].length) === roman_nums[i]) { arab += arab_nums[i]; pos += roman_nums[i].length; else { i--; return arab; )(value); </script> これにより グリッドにデータパーサーが 設 定 されます このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し グリッドの2 列 目 と4 列 目 にデータパーサーが 適 用 されていることを 確 認 します 列 バンドの 追 加 列 バンドの 追 加 カスタムヘッダー 列 バンドを wijgrid ウィジェットに 簡 単 に 追 加 できます バンドを 使 用 してグリッド 内 の 類 似 した 列 をグループ 化 できます バンドを 作 成 して 複 数 レベルの 列 ヘッダーを 実 装 する 階 層 構 造 に 列 を 編 成 できます headertext オ プションを 使 用 すると 各 バンドにテキストが 割 り 当 てられます 例 については Web サイト ( MVC コントロールエクスプロー ラの grid > Bands サンプルのライブデモをご 覧 ください 以 下 の 手 順 を 実 行 します 253 Copyright GrapeCity inc. All rights reserved.

255 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックして ファイルを 開 きます 3. 依 存 関 係 をチェックして プロジェクトが Wijmo の 最 新 バージョンを 参 照 していることを 確 認 します これらはページの <head> タグ 内 に 配 置 されている 必 要 があります Wijmo の 最 新 バージョンの 依 存 関 係 は で 確 認 できます 4. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div class="main demo"> <table id="demo"> <thead> <tr> <th>id</th><th>company</th><th>name</th><th>title</th> <th>address</th><th>city</th><th>country</th><th>phone</th><th>fax</th> </tr> </thead> <tbody> <tr> <td>alfki</td><td>alfreds Futterkiste</td><td>Maria Anders</td> <td>sales Representative</td><td>Obere Str. 57</td><td>Berlin</td> <td>germany</td><td> </td><td> </td> </tr> <tr> <td>anatr</td><td>ana Trujillo Emparedados y helados</td><td>ana Trujillo</td><td>Owner</td><td>Avda. de la Constitucion 2222</td><td>Mexico D.F. </td><td>mexico</td><td>(5) </td><td>(5) </td> </tr> <tr> <td>anton</td><td>antonio Moreno Taqueria</td><td>Antonio Moreno</td><td>Owner</td><td>Mataderos 2312</td><td>Mexico D.F.</td> <td>mexico</td><td>(5) </td><td> </td> </tr> <tr> <td>arout</td><td>around the Horn</td><td>Thomas Hardy</td> <td>sales Representative</td><td>120 Hanover Sq.</td><td>London</td><td>UK</td> <td>(171) </td><td>(171) </td> </tr> <tr> <td>bergs</td><td>berglunds snabbkop</td><td>christina Berglund</td><td>Order Administrator</td><td>Berguvsvagen 8</td><td>Lulea</td> <td>sweden</td><td> </td><td> </td> </tr> </tbody> </table> このマークアップは1つのテーブル 用 のコンテンツを 追 加 します 5. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijgrid ウィジェットを 初 期 化 しま す <script id="scriptinit" type="text/javascript"> 254 Copyright GrapeCity inc. All rights reserved.

256 $(document).ready(function () { $("#demo").wijgrid({ allowsorting:true, selectionmode:"singlecell", columns: [ {, // ID {, // 会 社 { headertext:"additional information", columns: [ { headertext:"contact", columns: [ {, // 名 前 { // 肩 書 き ], { headertext: "Regional information", columns: [ { headertext:"address information", columns: [ {, // 住 所 {, // 都 市 { // 国 ], { headertext: "Communication", columns: [ {, // 電 話 { // ファックス ] ] ] ] </script> これにより 連 絡 先 と 地 域 情 報 をグループ 化 する 列 データバンドが 設 定 されます このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し 列 がヘッダーの 列 バンドでグループ 化 されることを 確 認 します たとえば 住 所 情 報 が グループ 化 されます ページ 付 けされたグリッドの 作 成 255 Copyright GrapeCity inc. All rights reserved.

257 ページングナビゲーションを wijgrid ウィジェットに 簡 単 に 追 加 できます この 例 では allowpaging pagesize および pagersettings オプションを 設 定 して ページャブルグリッドを 作 成 する 方 法 を 説 明 します 例 については Web サイト ( MVC コントロールエクスプローラの grid > Paging サンプルのライブデモをご 覧 ください 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 依 存 関 係 をチェックして プロジェクトが Wijmo の 最 新 バージョンを 参 照 していることを 確 認 します これらはページの <head> タグ 内 に 配 置 されている 必 要 があります Wijmo の 最 新 バージョンの 依 存 関 係 は で 確 認 できます 4. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div class="main demo"> <table id="demo"></table> <div class="demo-options"> <div class="option-row"> <label for="pagerposition"> 位 置 </label> <select id="pagerposition"> <option> 下 </option> <option> 上 </option> <option selected="selected"> 上 下 </option> </select> <div class="option-row"> <label for="pagermode"> モード</label> <select id="pagermode"> <option>nextprevious</option> <option>nextpreviousfirstlast</option> <option>numeric</option> <option>numericfirstlast</option> </select> <div class="option-row"> <label for="pagesize"> ページのサイズ</label> <select id="pagesize"> <option>1</option> <option>2</option> <option>2</option> <option>4</option> <option selected="selected">5</option> <option>10</option> <option>25</option> <option>50</option> <option>100</option> </select> 256 Copyright GrapeCity inc. All rights reserved.

258 このマークアップは1つのテーブル 用 のコンテンツを 追 加 します 5. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijgrid ウィジェットを 初 期 化 しま す <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#demo").wijgrid({ allowpaging:true, pagesize: 5, pagersettings:{ position:"topandbottom", data: [ [27, 'Canada', 'Adams, Craig', 'RW', 'R', 32, 2009, 'Seria, Brunei'], [43, 'Canada', 'Boucher, Philippe', 'D', 'R', 36, 2008, 'Saint-Apollinaire, Quebec'], [24, 'Canada', 'Cooke, Matt', 'LW', 'L', 30, 2008, 'Belleville, Ontario'], [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L', 21, 2005, 'Cole Harbour, Nova Scotia'], [1, 'United States', 'Curry, John', 'G', 'L', 25, 2007, 'Shorewood, Minnesota'], [9, 'Canada', 'Dupuis, Pascal', 'W', 'L', 30, 2008, 'Laval, Quebec'], [7, 'United States', 'Eaton, Mark', 'D', 'L', 32, 2006, 'Wilmington, Delaware'], [26, 'Ukraine', 'Fedotenko, Ruslan', 'LW', 'L', 30, 2008, 'Kiev, U.S.S.R.'], [29, 'Canada', 'Fleury, Marc-Andre', 'G', 'L', 24, 2003, 'Sorel, Quebec'], [32, 'Canada', 'Garon, Mathieu', 'G', 'R', 31, 2009, 'Chandler, Quebec'], [2, 'United States', 'Gill, Hal', 'D', 'L', 34, 2008, 'Concord, Massachusetts'], [28, 'Canada', 'Godard, Eric', 'RW', 'R', 29, 2008, 'Vernon, British Columbia'], [3, 'United States', 'Goligoski, Alex', 'D', 'L', 23, 2004, 'Grand Rapids, Minnesota'], [55, 'Russia', 'Gonchar, Sergei (A)', 'D', 'L', 35, 2005, 'Chelyabinsk, U.S.S.R.'], [13, 'United States', 'Guerin, Bill', 'RW', 'R', 38, 2009, 'Worcester, Massachusetts'], [42, 'Canada', 'Jeffrey, Dustin', 'C', 'L', 21, 2007, 'Sarnia, Ontario'], [48, 'Canada', 'Kennedy, Tyler', 'C', 'R', 22, 2004, 'Sault Ste.Marie, Ontario'], [14, 'Canada', 'Kunitz, Chris', 'LW', 'L', 29, 2009, 'Regina, Saskatchewan'], [58, 'Canada', 'Letang, Kristopher', 'D', 'R', 22, 2005, 'Montreal, Quebec'], [65, 'United States', 'Lovejoy, Ben', 'D', 'R', 25, 2008, 'Canaan, New Hampshire'], 257 Copyright GrapeCity inc. All rights reserved.

259 [71, 'Russia', 'Malkin, Evgeni (A)', 'C', 'L', 22, 2004, 'Magnitogorsk, U.S.S.R.'], [14, 'Canada', 'Minard, Chris', 'C', 'L', 27, 2007, 'Owen Sound, Ontario'], [44, 'United States', 'Orpik, Brooks', 'D', 'L', 28, 2001, 'San Francisco, California'], [81, 'Slovakia', 'Satan, Miroslav', 'RW', 'L', 34, 2008, 'Jacovce, Czechoslovakia'], [4, 'United States', 'Scuderi, Rob', 'D', 'L', 30, 1998, 'Syosset, New York'], [11, 'Canada', 'Staal, Jordan', 'C', 'L', 20, 2006, 'Thunder Bay, Ontario'], [17, 'Czech Republic', 'Sykora, Petr', 'RW', 'L', 32, 2007, 'Plzen, Czechoslovakia'], [22, 'United States', 'Taffe, Jeff', 'LW', 'L', 28, 2007, 'Hastings, Minnesota'], [25, 'Canada', 'Talbot, Maxime', 'C', 'L', 25, 2002, 'LeMoyne, Quebec'], [15, 'Canada', 'Zigomanis, Michael', 'C', 'R', 28, 2008, 'Toronto, Ontario'] ], columns: [ { headertext:"number", { headertext: "Nationality", { headertext:"player", { headertext: "Position", { headertext:"handedness", { headertext: "Age", { headertext:"acquired", { headertext:"birthplace" ] $("#pagerposition").change(function (e) { var pagersettings = $.extend({, $("#demo").wijgrid("option", "pagersettings")); pagersettings.position = $(e.target).val(); $("#demo").wijgrid("option", "pagersettings", pagersettings); $("#pagermode").bind("change", function (e) { var pagersettings = $.extend({, $("#demo").wijgrid("option", "pagersettings")); pagersettings.mode = $(e.target).val(); $("#demo").wijgrid("option", "pagersettings", pagersettings); $("#pagesize").bind("change", function (e) { $("#demo").wijgrid("option", "pagesize", parseint($(e.target).val())); </script> これは グリッドを 初 期 化 し ページャを 設 定 します このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し グリッドでページングが 行 えることを 確 認 します ページングの 表 示 方 法 を 変 更 するに は [ 位 置 ] [モード] および[ページサイズ]ドロップダウンボックスで 別 の 値 を 選 択 します 258 Copyright GrapeCity inc. All rights reserved.

260 グリッド 選 択 モードの 設 定 wijgrid ウィジェットは 複 数 の 選 択 モードをサポートしています 実 行 時 に ユーザーは1つまたは 複 数 のセル 列 行 または 範 囲 を 選 択 できます 例 については Web サイト ( MVC コントロールエクスプローラ の grid > Selection サンプルのライブデモをご 覧 ください 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 依 存 関 係 をチェックして プロジェクトが Wijmo の 最 新 バージョンを 参 照 していることを 確 認 します これらはページの <head> タグ 内 に 配 置 されている 必 要 があります Wijmo の 最 新 バージョンの 依 存 関 係 は で 確 認 できます 4. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div class="main demo"> <table class="demotable"> <tr> <td> <table id="demo"> <thead> <tr> <th>productid</th><th>unitprice</th><th>quantity</th> <th>discount</th> </tr> </thead> <tbody> <tr> <td>11</td><td>14</td><td>12</td><td>0</td> </tr> <tr> <td>42</td><td>9,8</td><td>10</td><td>0</td> </tr> <tr> <td>72</td><td>34,8</td><td>5</td><td>0</td> </tr> <tr> <td>14</td><td>18.6</td><td>9</td><td>0</td> </tr> <tr> <td>51</td><td>42.4</td><td>40</td><td>0</td> </tr> <tr> 259 Copyright GrapeCity inc. All rights reserved.

261 <td>41</td><td>7.7</td><td>10</td><td>0</td> </tr> <tr> <td>51</td><td>42.4</td><td>35</td><td>0.15</td> </tr> <tr> <td>65</td><td>16.8</td><td>15</td><td>0.15</td> </tr> <tr> <td>22</td><td>16.8</td><td>6</td><td>0.05</td> </tr> <tr> <td>57</td><td>15.6</td><td>15</td><td>0.05</td> </tr> <tr> <td>65</td><td>16.8</td><td>20</td><td>0</td> </tr> <tr> <td>20</td><td>64.8</td><td>40</td><td>0.05</td> </tr> <tr> <td>33</td><td>2</td><td>25</td><td>0.05</td> </tr> </tbody> </table> </td> <td> <table class="ui-widget ui-widget-content" rules="all" id="demologtable"> <caption class="ui-widget-header">selection log</caption> <tbody> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> 260 Copyright GrapeCity inc. All rights reserved.

262 <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> </tbody> </table> </td> </tr> </table> <div class="demo-options"> <div class="option-row"> <label for="selectionmode">selection mode</label> <select id="selectionmode"> <option>singlecell</option> <option>singlerow</option> <option>singlecolumn</option> <option>singlerange</option> <option>multicolumn</option> <option>multirow</option> <option>multirange</option> </select> 261 Copyright GrapeCity inc. All rights reserved.

263 <style type="text/css">.demotable > tbody > tr > td { vertical-align:top; width:400px; #demologtable { table-layout:fixed; margin-left:20px; width: 100%; </style> このマークアップは 2つのテーブル 用 のコンテンツと 選 択 ドロップダウンボックスを 追 加 します 1つのテーブルはデー タが 表 示 されるグリッドに 使 用 し もう 一 つのテーブルはグリッドで 選 択 が 行 われた 項 目 を 表 示 します 5. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijgrid ウィジェットを 初 期 化 しま す <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#demo").wijgrid({ selectionmode:"singlecell", columns: [ { datatype:"number", sortdirection: "ascending", dataformatstring:"n0", { datatype:"currency", { datatype: "number", dataformatstring: "n0", { datatype: "number", dataformatstring: "p0" ], selectionchanged:onselectionchanged function onselectionchanged() { var sc = $("#demo").wijgrid("selection").selectedcells(); var log = $("#demologtable"); log.find("td").removeclass("ui-state-highlight").html("<span> </span>"); for (var i = 0, len = sc.length(); i < len; i++) { var cellinfo = sc.item(i); var logcell = $(log[0].tbodies[0].rows[cellinfo.rowindex()].cells[cellinfo.cellindex()]); logcell.addclass("ui-state-highlight").text(cellinfo.value().tostring()); $("#selectionmode").change(function (e) { $("#demo").wijgrid("option", "selectionmode", $(e.target).val()); </script> 262 Copyright GrapeCity inc. All rights reserved.

264 これは グリッドとドロップダウンボックスを 初 期 化 します このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し ドロップダウンボックスから 選 択 メソッドを 選 択 して グリッドでセルを 選 択 します 選 択 がテーブルに 反 映 されていることを 確 認 します グルーピングと 集 計 のカスタマイズ カスタマイズされたグルーピングを wijgrid ウィジェットに 簡 単 に 追 加 できます 例 については Web サイト ( MVC コントロー ルエクスプローラの grid > GroupingAndAggregates サンプルのライブデモをご 覧 ください 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 依 存 関 係 をチェックして プロジェクトが Wijmo の 最 新 バージョンを 参 照 していることを 確 認 します これらはページの <head> タグ 内 に 配 置 されている 必 要 があります Wijmo の 最 新 バージョンの 依 存 関 係 は で 確 認 できます 4. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div class="main demo"> <table id="demo"> <thead> <tr> <th>orderid</th><th>productid</th><th>unitprice</th><th>quantity</th> </tr> </thead> <tbody> <tr> <td>10248</td><td>11</td><td>14</td><td>12</td> </tr><tr> <td>10248</td><td>42</td><td>9.8</td><td>10</td> </tr><tr> <td>10248</td><td>72</td><td>34.8</td><td>5</td> </tr><tr> <td>10249</td><td>14</td><td>18.6</td><td>9</td> </tr><tr> <td>10249</td><td>51</td><td>42.4</td><td>40</td> </tr><tr> <td>10250</td><td>41</td><td>7.7</td><td>10</td> </tr><tr> <td>10250</td><td>51</td><td>42.4</td><td>35</td> </tr><tr> <td>10250</td><td>65</td><td>16.8</td><td>15</td> </tr><tr> <td>10251</td><td>22</td><td>16.8</td><td>6</td> </tr><tr> <td>10251</td><td>57</td><td>15.6</td><td>15</td> 263 Copyright GrapeCity inc. All rights reserved.

265 </tr><tr> <td>10251</td><td>65</td><td>16.8</td><td>20</td> </tr><tr> <td>10252</td><td>20</td><td>64.8</td><td>40</td> </tr><tr> <td>10252</td><td>33</td><td>2</td><td>25</td> </tr><tr> <td>10252</td><td>60</td><td>27.2</td><td>40</td> </tr><tr> <td>10253</td><td>31</td><td>10</td><td>20</td> </tr><tr> <td>10253</td><td>39</td><td>14.4</td><td>42</td> </tr><tr> <td>10253</td><td>49</td><td>16</td><td>40</td> </tr> </tbody> </table> このマークアップは1つのテーブル 用 のコンテンツを 追 加 します 5. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijgrid ウィジェットを 初 期 化 しま す <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#demo").wijgrid({ allowsorting:true, columns: [ { sortdirection:"ascending", aggregate:"count", groupinfo: { position:"header", outlinemode:"startcollapsed", headertext:"{1:{0, Count={2", {, { datatype:"currency", aggregate:"sum", { datatype:"number", dataformatstring:"n0", aggregate:"sum" ] </script> このスクリプトは グリッドを 初 期 化 し 集 計 およびグルーピングオプションを 設 定 します このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し 当 初 縮 小 されているグループがグリッドに 含 まれていることを 確 認 します 各 グループ の 横 にある 三 角 形 のアイコンをクリックして グループを 拡 張 / 縮 小 します 264 Copyright GrapeCity inc. All rights reserved.

266 Wijlightbox wijlightbox ウィジェットでは 画 像 を 現 在 のページ 上 にオーバーレイできます これは 画 像 を 強 調 表 示 したり 画 像 にフォーカ スを 移 動 するための 簡 単 な 方 法 です wijlightbox をカスタマイズすると 画 像 の 自 動 再 生 フラッシュビデオの 再 生 アニメー ション 化 した 遷 移 の 表 示 などが 可 能 です wijlightbox は 次 のように 1つ 以 上 の 画 像 で 起 動 できます <div id="lightbox"> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title="スポーツ1" alt="lorem ipsum dolor sit amet, consectetur adipiscing elit." /></a> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title="スポーツ2" alt="lorem ipsum dolor sit amet, consectetur adipiscing elit." /></a> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title="スポーツ3" alt="lorem ipsum dolor sit amet, consectetur adipiscing elit." /></a> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title="スポーツ4" alt="lorem ipsum dolor sit amet, consectetur adipiscing elit. " /></a> 次 のスクリプトは wijlightbox ウィジェットを 初 期 化 します <script type="text/javascript"> $(function () { $("#lightbox").wijlightbox({modal: true </script> ここで 取 り 上 げたマークアップとスクリプトは 次 のような 結 果 になります 265 Copyright GrapeCity inc. All rights reserved.

267 関 連 項 目 : wijlightbox の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください wijlightbox Wijlightbox チュートリアル 以 下 のチュートリアルでは 複 数 の 画 像 を 表 示 するライトボックスを 含 む MVC プロジェクトの 作 成 手 順 について 説 明 します 注 意 : このチュートリアルでは MVC Classicバープロジェクトを 作 成 済 みであることを 前 提 にしています 詳 細 について は MVC Classic プロジェクトの 作 成 トピックを 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では 最 初 にビューを 設 定 します コンテンツをライトボックスに 追 加 します 注 意 : この 手 順 では MVC Classicバープロジェクトを 作 成 済 みであることを 前 提 にしています 詳 細 については MVC Classic プロジェクトの 作 成 トピックを 参 照 してください 以 下 の 手 順 を 実 行 します 1. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 2. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="lightbox"> <a href=" 266 Copyright GrapeCity inc. All rights reserved.

268 rel="wijlightbox[stock];player=img"> <img src=" title="sports 1" alt="lorem ipsum dolor sit amet, consectetur adipiscing elit." /></a> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title="sports 2" alt="lorem ipsum dolor sit amet, consectetur adipiscing elit." /></a> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title="sports 3" alt="lorem ipsum dolor sit amet, consectetur adipiscing elit." /></a> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title="sports 4" alt="lorem ipsum dolor sit amet, consectetur adipiscing elit. " /></a> このマークアップはライトボックスのコンテンツをページに 追 加 します この 手 順 では ビューを 作 成 しました 次 の 手 順 手 順 2:ウィジェットの 初 期 化 では ウィジェットを 初 期 化 するスクリプトを 追 加 します 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では ライトボックスに 表 示 されるコンテンツを 追 加 するマークアップを 追 加 しました この 手 順 では ウィジェットを 初 期 化 するために 必 要 な jquery スクリプトを 追 加 します 以 下 の 手 順 を 実 行 します 1. 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 し wijlightbox ウィジェットを 初 期 化 します <script type="text/javascript"> $(function () { $("#lightbox").wijlightbox({modal: true </script> このスクリプトはウィジェットを 初 期 化 します 2. 前 の 手 順 で 追 加 した 終 了 の </script> タグの 後 に 次 のマークアップを 追 加 し wijlightbox ウィジェットをスタイリン グします <style type="text/css"> #wijlightbox { width: 750px; </style> このマークアップはウィジェットをスタイリングします アプリケーションを 作 成 し wijlightbox ウィジェットを 追 加 および 初 期 化 しました 次 の 手 順 手 順 3:プロジェクトの 実 行 で 267 Copyright GrapeCity inc. All rights reserved.

269 は ウィジェットの 実 行 時 のインタラクティブ 操 作 を 表 示 します 手 順 3:プロジェクトの 実 行 前 の 手 順 では アプリケーションを 作 成 し wijlightbox ウィジェットを 追 加 および 初 期 化 しました この 手 順 では ウィジェット の 実 行 時 のインタラクティブ 操 作 を 確 認 します 以 下 の 手 順 を 実 行 します 1. [F5]を 押 して アプリケーションを 実 行 します アプリケーションと wijlightbox は 次 のように 表 示 されます 2. サムネイル 画 像 の1つをクリックすると 画 像 の 大 きいバージョンが 開 きます 3. 左 右 の 矢 印 を 押 して 前 または 次 の 画 像 に 移 動 します 4. 右 上 隅 の 閉 じる ボタンをクリックすると 画 像 が 閉 じます このチュートリアルでは wijlightbox ウィジェットをアプリケーションに 追 加 し ウィジェットを 初 期 化 した 後 実 行 時 のウィ ジェットを 観 察 しました Lightbox のオートプレイ wijlightbox ウィジェットはオートプレイをサポートします この 機 能 を 利 用 するには 単 に autoplay オプションを 設 定 します 268 Copyright GrapeCity inc. All rights reserved.

270 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="lightbox"> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title="スポーツ1" alt="スポーツ1" /></a> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title="スポーツ2" alt="スポーツ2" /></a> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title="スポーツ3" alt="スポーツ3" /></a> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title="スポーツ4" alt="スポーツ4" /></a> このマークアップは ライトボックスウィジェットのコンテンツをページに 追 加 します 次 の 手 順 では ライトボックスを 初 期 化 します 4. 前 の 手 順 で 追 加 した </style> 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijlightbox ウィジェットを 初 期 化 します <script type="text/javascript"> $(function () { $("#lightbox").wijlightbox({ shownavbuttons:false, autoplay:true </script> これによりライトボックスが 初 期 化 され 実 行 時 にライトボックスのオートプレイが 行 われます このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し サムネイル 画 像 をクリックしてより 大 きな 画 像 を 表 示 します 画 像 の 再 生 が 自 動 的 に 開 始 されます サイズ 変 更 アニメーションの 設 定 wijlightbox ウィジェットは さまざまなサイズの 画 像 を ある 画 像 から 次 の 画 像 に 移 動 するときのさまざまな 遷 移 効 果 を 表 示 できます 269 Copyright GrapeCity inc. All rights reserved.

271 ライトボックスのサイズ 変 更 アニメーションを 設 定 するには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="lightbox"> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title="スポーツ1" alt="スポーツ1" /></a> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title="スポーツ2" alt="スポーツ2" /></a> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title="スポーツ3" alt="スポーツ3" /></a> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title="スポーツ4" alt="スポーツ4" /></a> <div class="demo-options"> <br /><label>アニメーション</label><br /><select id="animation" class='option'> <option value="sync" selected='true'>sync</option> <option value="wh">width To Height</option> <option value="hw">height To Width</option> <option value="none">none</option> </select> このマークアップは 4つの 画 像 を 含 むライトボックスウィジェットと4つのオプションをもつドロップダウンボックスをペー ジに 追 加 します 次 の 手 順 では ライトボックスを 初 期 化 して 設 定 します 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 し wijlightbox ウィジェットを 初 期 化 して resizeanimation オプションを 設 定 します <script type="text/javascript"> $(function () { $("#lightbox").wijlightbox({ textposition:'titleoverlay', autosize:true, keynav:true, transanimation:{ animated:'fade' $('.option').change(function () { $("#lightbox").wijlightbox('option', { resizeanimation:{ animated: $('#animation').val() 270 Copyright GrapeCity inc. All rights reserved.

272 </script> 実 行 時 に ドロップダウンボックスから 選 択 したオプションによって wijlightbox ウィジェットのサイズ 変 更 アニメーショ ンが 設 定 されます このトピックの 作 業 結 果 [F5]を 押 して アプリケーションを 実 行 し サムネイル 画 像 をクリックします 画 像 がライトボックスに 表 示 されます 選 択 した 画 像 はサイズが 異 なるので 次 へ または 前 へ ボタンをクリックするとサイズ 変 更 アニメーションの 効 果 がわかります ドロッ プダウンリストから 別 の 項 目 を 選 択 して 効 果 を 変 更 してください ライトボックスでの 外 部 コンテンツとビデオの 表 示 wijlightbox ウィジェットは ビデオ Flash ファイル および iframe 内 の 外 部 Web サイトなどの 複 数 のタイプのコンテンツを 表 示 できます この 例 では wijlightbox ウィジェットに 表 示 する 各 タイプのコンテンツを 追 加 します 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラで Scripts フォルダを 右 クリックし [ 追 加 ] [ 既 存 の 項 目 ]を 選 択 し ダイアログボックス で swfobject.js ファイルを 特 定 して 追 加 します 使 用 可 能 なファイルがない 場 合 MVC コントロールエクスプローラのサンプル 内 で 見 つけることができます 3. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 4. ページの <head> タグに swfobject.js ファイルへの 参 照 を 追 加 します <script src="../../scripts/swfobject.js" type="text/javascript"></script> これは Flash ファイル 用 に 必 要 です 5. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <a href=" rel="wijlightbox[stock];width=400;height=300"> <img src=" title=" 幸 せな 少 女 " alt=" 幸 せな 少 女 " /></a> <a href=" rel="wijlightbox[stock]"> <img src=" alt="componentone" /></a> <a href=" rel="wijlightbox[stock]"> <img src=" alt="microsoft" /> </a> <a title="mindrelic - 夏 のタイムラプス 動 画 /2009 年 秋 " href=" rel="wijlightbox;player=iframe"> <img class="border" alt="" src=" <a title="ニューヨーク 州 ロチェスターのタイムラプス 動 画 " href=" rel="wijlightbox;player=iframe"> <img class="border" alt="" src=" 271 Copyright GrapeCity inc. All rights reserved.

273 <a title="キーボードに 触 る 猫 " href=" rel="wijlightbox;player=swf"><img class="border" alt="" src=" <a title="くしゃみをするパンダ" href=" rel="wijlightbox;player=swf"><img class="border" alt="" src=" <a title=" 会 話 をする 猫 " href=" rel="wijlightbox;player=swf"><img class="border" alt="" src=" このマークアップは ライトボックスウィジェットのコンテンツをページに 追 加 します 6. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijlightbox ウィジェットを 初 期 化 します <script type="text/javascript"> $(function () { $("#lightbox").wijlightbox({ controlsposition:'outside', textposition:'outside' </script> このスクリプトはライトボックスウィジェットを 初 期 化 します このトピックの 作 業 結 果 [F5]を 押 して アプリケーションを 実 行 します Flash ファイルのサムネイル 画 像 クリックすると iframe に 表 示 される2 種 類 の Web サイト 5 種 類 のビデオ(このうち2 種 類 はクリックすると iframe に 表 示 される)がライトボックスに 含 まれていることを 確 認 します ライトボックスでのキーボードによるナビゲーションの 追 加 キーボードによるナビゲーションを 有 効 にして wijlightbox ウィジェットのアクセシビリティを 向 上 させることができます キー ボードによるナビゲーションは keynav オプションを 使 用 して 有 効 にできます キーボードによるナビゲーションを 有 効 にするには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="lightbox"> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title=" 草 原 " alt=" 背 景 に 乗 用 車 が ある 草 原 " /></a> <a href=" rel="wijlightbox[stock];player=img"> 272 Copyright GrapeCity inc. All rights reserved.

274 <img src=" title=" 山 " alt=" 山 と 曇 った 青 空 " /></a> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title=" 橋 " alt=" 山 のある 橋 " /> </a> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title=" 建 物 " alt=" 面 白 い 建 築 様 式 の 建 物 " /></a> このマークアップは 4 種 類 の 画 像 を 含 む1つのライトボックスウィジェットをページに 追 加 します 次 の 手 順 では ライト ボックスを 初 期 化 します 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijlightbox ウィジェットを 初 期 化 します <script type="text/javascript"> $(function () { $("#lightbox").wijlightbox({ textposition:'titleoverlay', keynav:true ).focus(); </script> </head> 上 記 のスクリプトはライトボックスを 初 期 化 し キーボードによるナビゲーションを 有 効 にします このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し サムネイル 画 像 をクリックしてフルサイズの 画 像 を 表 示 します 左 右 上 下 矢 印 キーおよび[Home] [ 次 へ]キーをクリックして 画 像 をナビゲートします ライトボックスへの Play および および Pause ボタンの ボタンの 追 加 再 生 および 一 時 停 止 機 能 を wijlightbox ウィジェットに 追 加 できます ctrlbuttons オプションを 使 用 して 一 時 停 止 および 再 生 ボタンを 有 効 にできます 一 時 停 止 および 再 生 機 能 を 有 効 にするには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 以 下 のすぐ 後 のページの <body< タグ 内 に 追 加 します <div id="lightbox"> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title="スポーツ1" alt="スポーツ1" /></a> 273 Copyright GrapeCity inc. All rights reserved.

275 <a href=" rel="wijlightbox[stock];player=img"< <img src=" title="スポーツ2" alt="スポーツ2" /></a> <a href=" rel="wijlightbox[stock];player=img"< <img src=" title="スポーツ3" alt="スポーツ3" /></a> <a href=" rel="wijlightbox[stock];player=img"< <img src=" title="スポーツ4" alt="スポーツ4" /></a> このマークアップは 4 種 類 の 画 像 を 含 む1つのライトボックスウィジェットをページに 追 加 します 次 の 手 順 では ライト ボックスを 初 期 化 します 4. 前 の 手 順 で 追 加 した </div< 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijlightbox ウィジェットを 初 期 化 します <script type="text/javascript"> $(function () { $("#lightbox").wijlightbox({ showtimer:true, ctrlbuttons:'play stop', loop:false </script> 上 記 のスクリプトはライトボックスを 初 期 化 し Play および Pause ボタンを 追 加 します このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し サムネイル 画 像 をクリックしてフルサイズの 画 像 を 表 示 します 画 像 の 自 動 再 生 が 開 始 されたら 画 像 の 右 上 端 にある Pause および Play ボタンをクリックして 画 像 全 体 に 一 時 停 止 と 再 生 を 繰 り 返 します ライトボックスでのテキスト 位 置 の 設 定 wijlightbox ウィジェットにキャプションテキストを 取 り 込 み テキストの 位 置 と 表 示 をカスタマイズできます たとえば ライト ボックス 画 像 の 内 側 外 側 または 画 像 に 重 ねてテキストを 表 示 できます あるいは テキストをまったく 表 示 しないようにでき ます 実 行 時 にテキストの 位 置 を 選 択 するには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 以 下 のすぐ 後 のページの >body< タグ 内 に 追 加 します <div id="lightbox"> <a href=" 274 Copyright GrapeCity inc. All rights reserved.

276 rel="wijlightbox[stock];player=img"> <img src=" title=" 抜 粋 1" alt=" 抜 粋 1" /> </a> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title=" 抜 粋 2" alt=" 抜 粋 2" /> </a> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title=" 抜 粋 3" alt=" 抜 粋 3" /> </a> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title=" 抜 粋 4" alt=" 抜 粋 4" /> </a> <div class="demo-options"> <h6>テキスト 位 置 :</h6> <select id="textposition"> <option value="inside" selected='true'>inside</option> <option value="outside">outside</option> <option value="overlay">overlay</option> <option value="titleoverlay">titleoverlay</option> <option value="none">none</option> </select> このマークアップは 4 種 類 の 画 像 を 含 む1つのライトボックスウィジェットをページに 追 加 すると 共 に 実 行 時 にテキス ト 位 置 を 選 択 できるようにドロップダウンリストボックスを 追 加 します 次 の 手 順 では ライトボックスを 初 期 化 します 4. 前 の 手 順 で 追 加 した >/div< 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijlightbox ウィジェットを 初 期 化 します <script type="text/javascript"> $(function () { $("#lightbox").wijlightbox(); $('#textposition').change(function () { $("#lightbox").wijlightbox('option', 'textposition', $(this).val()); </script> 上 記 のスクリプトはライトボックスを 初 期 化 します このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し サムネイル 画 像 をクリックしてフルサイズの 画 像 を 表 示 します テキストが 画 像 内 に 表 示 されることを 確 認 します テキストのドロップダウンボックスから 別 のオプションを 選 択 してサムネイル 画 像 をクリックし テキ ストがどこに 表 示 される 位 置 を 確 認 します ライトボックス 遷 移 アニメーションの 設 定 275 Copyright GrapeCity inc. All rights reserved.

277 デフォルトで wijlightbox にはある 画 像 から 次 の 画 像 に 移 動 する 際 のアニメーション 化 された 遷 移 効 果 が 組 み 込 まれていま す この 効 果 をカスタマイズできます この 例 では transanimation および slidedirection オプションを 使 用 して wijlightbox ウィジェットのページを 切 り 替 える 方 法 を 示 します ライトボックスの 遷 移 を 設 定 するには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="lightbox"> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title=" 抜 粋 1" alt=" 抜 粋 1" /> </a> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title=" 抜 粋 2" alt=" 抜 粋 2" /> </a> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title=" 抜 粋 3" alt=" 抜 粋 3" /> </a> <a href=" rel="wijlightbox[stock];player=img"> <img src=" title=" 抜 粋 4" alt=" 抜 粋 4" /> </a> <div class="demo-options"> <label>アニメーション</label> <select id="animation" class='option'> <option value="fade" selected='true'>fade</option> <option value="slide">slide</option> <option value="none">none</option> </select> <label>スライドの 向 き</label><select id="direction" class='option'> <option value="horizontal" selected='true'>horizontal</option> <option value="vertical">vertical</option> </select> このマークアップは 4 種 類 の 画 像 を 含 む1つのライトボックスウィジェットをページに 追 加 すると 共 に 実 行 時 にアニ メーションタイプとスライドの 向 きを 選 択 できるように2 種 類 のドロップダウンリストボックスを 追 加 します 次 の 手 順 で は ライトボックスを 初 期 化 します 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijlightbox ウィジェットを 初 期 化 します <script type="text/javascript"> $(function () { $("#lightbox").wijlightbox({ textposition:'titleoverlay' 276 Copyright GrapeCity inc. All rights reserved.

278 $('.option').change(function () { $("#lightbox").wijlightbox('option', { transanimation:{animated : $('#animation').val(), slidedirection:$('#direction').val() </script> 上 記 のスクリプトはライトボックスを 初 期 化 します このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し サムネイル 画 像 をクリックしてフルサイズの 画 像 を 表 示 します Next または Previous ボタンをクリックして 画 像 間 の 遷 移 アニメーションを 確 認 します ドロップダウンボックスからオプションを 選 択 して 遷 移 を 変 更 します Wijlist wijlist ウィジェットは エンドユーザーがリストから1つまたは 複 数 の 項 目 を 選 択 できる UI です リストを 表 示 するビューに 対 応 する.cshtml ファイルを 開 きます 次 のような DOM 要 素 を 追 加 します <div id="list"> 次 に ウィジェットを 初 期 化 し 項 目 を 配 列 に 追 加 します これを 行 うには 配 列 を 作 成 し setitems メソッドを 使 用 してそれを リストに 追 加 する 必 要 があります その 後 リストを 初 期 化 し renderlist メソッドを 使 用 してクライアントブラウザ 上 にリストを 表 示 します これを 行 うには 次 のスクリプトをプロジェクトに 追 加 します <script id="scriptinit" type="text/javascript" $(document).ready(function () { var testarray = [{ label: 'c++', value: 'c++', { label: 'java', value: 'java', { label: 'php', value: 'php', { label: 'javascript', value: 'javascript' ]; var list = $("#list"); var input = $('#testinput'); 277 Copyright GrapeCity inc. All rights reserved.

279 // リストを 初 期 化 list.wijlist({ list.wijlist('setitems', testarray); list.wijlist('renderlist'); list.wijlist('refreshsuperpanel'); </script> プロジェクトを 実 行 すると 次 の 図 のように 表 示 されます wijlist の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijlist Wijlist チュートリアル このセクションでは ページャ 要 素 を 含 む MVC プロジェクトを 作 成 する 手 順 について 説 明 します このトピックでは ASP.NET MVC 4 Wijmo アプリケーションを 作 成 済 みであることが 前 提 となります 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1: ビューの 設 定 この 手 順 では wijpager ウィジェットを 含 むビューを 作 成 します 1. ソリューションエクスプローラで Views Shared フォルダと 移 動 し Layout.cshtml ファイルをダブルクリックしてそ れを 開 きます 2. 次 のマークアップを 追 加 してリスト 要 素 を 作 成 します <div id="list"> 手 順 2: ウィジェットの 初 期 化 前 の 手 順 では リスト 要 素 を 作 成 しました この 手 順 では 配 列 を 作 成 し ウィジェットを 初 期 化 する jquery スクリプトを 追 加 し ます <div> 終 了 タグの 後 に 以 下 のスクリプトを 追 加 します 278 Copyright GrapeCity inc. All rights reserved.

280 <script id="scriptinit" type="text/javascript"> $(document).ready(function () { var testarray = [{ label: 'c++', value: 'c++', { label: 'java', value: 'java', { label: 'php', value: 'php', { label: 'javascript', value: 'javascript' ]; var list = $("#list"); var input = $('#testinput'); // リストを 初 期 化 list.wijlist({ list.wijlist('setitems', testarray); list.wijlist('renderlist'); list.wijlist('refreshsuperpanel'); </script> 手 順 3: プロジェクトの 実 行 この 手 順 では プロジェクトを 実 行 します [F5] を 押 して プロジェクトを 実 行 します wijlist を 含 む Web ページが 次 の 図 のように 表 示 されます 複 数 選 択 wijlist ウィジェットは リスト 項 目 の 複 数 選 択 をサポートします 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの タグ 内 に 追 加 します 279 Copyright GrapeCity inc. All rights reserved.

281 <div id="list"> 4. 以 下 の CSS スタイル 指 定 を 適 用 して リストのサイズを 制 御 します <style type="text/css"> #list { height: 200px; width: 300px; #testinput { width: 150px; padding: 5px; </style> 5. 以 下 のスクリプトを 挿 入 して 配 列 を 作 成 し ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(function () { var testarray = [{ label: 'c++', value: 'c++', { label: 'java', value: 'java', { label: 'php', value: 'php', { label: 'coldfusion', value: 'coldfusion', { label: 'javascript', value: 'javascript', label: 'asp', value: 'asp', { label: 'ruby', value: 'ruby', { label: 'python', value: 'python', { label: 'c', value: 'c', { label: 'scala', 280 Copyright GrapeCity inc. All rights reserved.

282 value: 'scala', { label: 'groovy', value: 'groovy', { label: 'haskell, value: 'haskell', { label: 'perl', value: 'perl' ]; var list = $("#list"); var input = $('#testinput'); list.wijlist({ selected: function (event, ui) { var selecteditems = ui.selecteditems; var str = $.map(selecteditems, function (n) { return n.label; ).join(","); input.val(str);, selectionmode: 'multiple' // list.wijlist('load'); list.wijlist('setitems', testarray); list.wijlist('renderlist'); list.wijlist('refreshsuperpanel'); input.bind("keydown.wijcombobox", function (event) { var keycode = $.ui.keycode; switch (event.keycode) { case keycode.up: list.wijlist('previous', event); // 一 部 のブラウザでテキストフィールドの 先 頭 へのカーソルの 移 動 を 禁 止 event.preventdefault(); break; case keycode.down: if (!list.is(':visible')) { list.show(); return; list.wijlist('next', event); // 一 部 のブラウザでテキストフィールドの 末 尾 へのカーソルの 移 動 を 禁 止 event.preventdefault(); break; case keycode.enter: event.preventdefault(); list.wijlist('select', event); break; case keycode.page_up: list.wijlist('previouspage'); break; case keycode.page_down: list.wijlist('nextpage'); 281 Copyright GrapeCity inc. All rights reserved.

283 else {else { </script> break; default: break; function selectbuttonclick(select) { var list = $("#list").data('wijlist'); var indices = $('#indices').val().split(','); var newarray = []; $.each(indices, function (index, value) { newarray[newarray.length] = parseint(value); if (select) { list.selectitems(newarray); list.unselectitems(newarray); 6. プログラムを 実 行 します wijlist は 次 の 図 のようになります Wijmenu wijmenu ウィジェットは マルチレベルのメニューとポップアップや コンテキストメニューを 使 用 可 能 にする UI で す wijmenu ウィジェットは アニメーション 画 像 とチェックボックス 項 目 およびインタラクティブな 項 目 スクロールをサポート します ユーザーがメニューの 見 出 しを 選 択 するかその 上 にホバーすると サブメニューを 表 示 します メニューを 表 示 するビューの.cshtml ファイルを 開 きます 次 のマークアップを 使 用 し メニューの 作 成 元 になるリスト( 順 不 同 ) を 作 成 します <ul id="menu"> 282 Copyright GrapeCity inc. All rights reserved.

284 <li><a>メニュー 項 目 1</a> <ul> <li><a>メニュー 項 目 1.1</a> <li><a>メニュー 項 目 2.2</a> </ul> <li><a>メニュー 項 目 2</a> <li><a>メニュー 項 目 3</a> </ul> リストを 作 成 したら wijmenu ウィジェットを 初 期 化 する 必 要 があります これを 行 うには リストを 含 む.cshtml ファイルに 次 のスクリプトを 追 加 します <script type="text/javascript"> $(document).ready(function () { $("#menu").wijmenu(); </script> プロジェクトを 実 行 すると 基 本 的 な wijmenu は 次 のような 表 示 になります wijmenu の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijmenu Wijmenu チュートリアル このセクションでは MVC 4 wijmenu のモデル ビュー およびコントローラーの 作 成 方 法 について 示 します 以 下 のトピック では MVC プロジェクトの 作 成 Razor 構 文 を 使 用 した 順 不 同 のリストへのデータ 移 植 wijmenu UI 要 素 へのリストの 変 換 手 順 について 説 明 します このトピックでは MVC 4 プロジェクトを 作 成 済 みであることが 前 提 されます 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください このクイックスタートチュートリアルでは Northwind データベースを 使 用 します 手 順 1:モデルの 作 成 Modelには すべてのデータベースアクセス ビジネス 検 出 ロジックが 含 まれます この 例 では ADO.NET エンティティデー タモデル(.edmx)を NorthWND.MDF データベースに 格 納 されたビューから 生 成 します 注 意 : :この 手 順 では MVC Classicバープロジェクトを 作 成 済 みであることを 前 提 にしています 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 トピックを 参 照 してください 1. 以 下 の 手 順 を 実 行 します ソリューションエクスプローラで App_Data フォルダを 右 クリックして [ [ 追 加 ] [[ 既 存 の 項 目 ]を 選 択 します App_Data フォルダの NORTHWND.MDF を 選 択 し 追 加 をクリックします 2. Models フォルダを 右 クリックし [ [ 追 加 ] [[ 新 しい 項 目 ]を 選 択 します 283 Copyright GrapeCity inc. All rights reserved.

285 3. 新 しい 項 目 の 追 加 ]ダイアログボックスで [Visual C#]の 下 の[データ]を 選 択 します 4. [ADO.NET エンティティデータモデル]を 選 択 し [ 名 前 ]フィールドに 名 前 (MyNorthWindEDM.edmx など)を 入 力 し て 追 加 をクリックします [Entity Data Model ウィザード]が 表 示 されます 5. [データベースから 生 成 ]を 選 択 して 次 へ をクリックします 6. [データ 接 続 の 選 択 ] 画 面 で 新 しい 接 続 をクリックします [データソースの 選 択 ]ダイアログボックスが 表 示 されま す 7. [Microsoft SQL Server データベースファイル]を 選 択 し 続 行 をクリックします 8. 参 照 ボタンで プロジェクトの App_Data フォルダ 内 の NORTHWND.MDF ファイルを 検 索 し 開 く をクリックしま す 9. 接 続 をテストし OK をクリックします 10. [エンティティ 接 続 設 定 に 名 前 を 付 けて Web.Config に 保 存 ]の[NORTHWNDEntities]を ON にしたままにし 次 へ をクリックします 11. [データベースオブジェクトの 選 択 ] 画 面 で Tables ノードを 展 開 し [ 商 品 ]と[カテゴリ]チェックボックスを ON にして 完 了 をクリックします モデル(ここでは MyNorthWindEDM.edmx)が 作 成 されてプロジェクトの Models フォルダに 追 加 されます 次 の 手 順 手 順 2:コントローラーの 作 成 では モデルからのデータを 格 納 するビューを 返 して ユーザーアクションを 処 理 す るコントローラーを 作 成 します 手 順 2:コントローラーの 作 成 次 に コントローラー コントローラーを 作 成 し NorthWND.MDF データベースのビューからの 項 目 を 返 す 必 要 があります コントローラーを 作 成 するには 以 下 の 手 順 に 従 います 1. ソリューションエクスプローラで Controllers ノードを 展 開 し Homecontrollers.cs をダブルクリックします 2. 次 の using ステートメントをディレクティブのリストに 追 加 します using [PROJECTNAME].Models; 3. ここでは 1)メニューへのデータ 移 植 に 使 用 するモデルと 2)データ 移 植 に 応 答 してレンダリングされるビューを 指 定 で きます これを 行 うには 既 存 の HomeController : Controller クラスを 次 のコードに 置 き 換 えます public class HomeController : Controller { NORTHWNDEntities northwind = new NORTHWNDEntities(); public ActionResult Index() { ViewBag.Message = "Categories"; var Categories = northwind.categories.tolist(); foreach (Category c in Categories) { c.products.load(); return View(categories); public ActionResult About() { return View(); モデルとコントローラーを 作 成 した 後 は 手 順 3:ビューの 作 成 と Wijmo ウィジェットの 追 加 で プロジェクトのホームペー ジ 上 に 表 示 されるメニュー 構 成 のビューを 作 成 できます 手 順 3:ビューの 作 成 と Wijmo ウィジェットの 追 加 284 Copyright GrapeCity inc. All rights reserved. この 例 では プロジェクトのホームページ 上 にメニューを 表 示 するビューを 作 成 します その 後 Razor 構 文 を 使 用 し 各 商 品

286 Wijmenu でのカスタムアイコンの 使 用 wijmenu ウィジェットは メニューでのカスタムアイコンの 使 用 をサポートします アイコンを wijmenu ウィジェットに 適 用 する には 特 別 のマークアップを 使 用 します MVC コントロールエクスプローラのライブデモで Menu > Icon サンプル ( 参 照 してください カスタムアイコンを 含 むメニューを 作 成 するには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダをクリックし _Layout.cshtml をダブルクリックしてファイル を 開 きます 3. ソリューションエクスプローラで Views Home フォルダをクリックし Index.cshtml をダブルクリックしてファイルを 開 きます 4. 次 のマークアップを Index.cshtml ビューに 挿 入 して サブメニューを 含 む 順 序 付 けられていないリストを 作 成 します <ul id="menu1"> <li><a><span class="ui-icon ui-icon-arrowthick-1-w wijmowijmenu-icon-left"></span><span class="wijmo-wijmenu-text"> メニュー1</span></a> <li><a><span class="ui-icon ui-icon-arrowrefresh-1-s wijmowijmenu-icon-left"></span><span class="wijmo-wijmenu-text"> メニュー2</span></a> <ul> <li><a>サブメニュー1</a> <li><a>サブメニュー2</a> <ul> <li><a>サブメニュー2.1</a> <li><a>サブメニュー2.2</a></li <li><a>サブメニュー2.3</a> <li><a>サブメニュー2.4</a> 285 Copyright GrapeCity inc. All rights reserved.

287 <li><a>サブメニュー2.5</a> </ul> <li><a>サブメニュー3</a> <li><a>サブメニュー4</a> <ul> <li><a>サブメニュー4.1</a> <li><a>サブメニュー4.2</a> <li><a>サブメニュー4.3</a> <li><a>サブメニュー4.4</a> <li><a>サブメニュー4.5</a> <li><a>サブメニュー4.6</a> <li><a>サブメニュー4.7</a> <li><a>サブメニュー4.8</a> </ul> <li><a>サブメニュー5</a> <li><a>サブメニュー6</a> <li><a>サブメニュー7</a> <li><a>サブメニュー8</a> </ul> <li><a><span class="ui-icon ui-icon-comment wijmo-wijmenu-iconleft"></span><span class="wijmo-wijmenu-text">メニュー3</span></a> <li><a><span class="ui-icon ui-icon-person wijmo-wijmenu-iconleft"></span><span class="wijmo-wijmenu-text">メニュー4</span></a> <li><a><span class="ui-icon ui-icon-trash wijmo-wijmenu-iconleft"></span><span class="wijmo-wijmenu-text">メニュー5</span></a> <li><a><span class="ui-icon ui-icon-bookmark wijmo-wijmenu-iconleft"></span><span class="wijmo-wijmenu-text">メニュー6</span></a> <ul> <li><a>サブメニュー6.1</a> <li><a>サブメニュー6.2</a> <li><a>サブメニュー6.3</a> <li><a>サブメニュー6.4</a> <li><a>サブメニュー6.5</a> <li><a>サブメニュー6.6</a> <li><a>サブメニュー6.7</a> <li><a>サブメニュー6.8</a> <li><a>サブメニュー6.9</a> </ul> <li><a><span class="ui-icon ui-icon-clock wijmo-wijmenu-iconleft"></span><span class="wijmo-wijmenu-text">menu7</span></a> <li><a><span class="ui-icon ui-icon-minusthick wijmo-wijmenuicon-left"></span><span class="wijmo-wijmenu-text">menu8</span></a> </ul> 5. 次 のスクリプトを 追 加 して ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#menu1").wijmenu({ 286 Copyright GrapeCity inc. All rights reserved.

288 orientation: "horizontal" </script> 6. アプリケーションを 実 行 します メニューは 次 の 図 のようになります Wijmenu の 向 きの 変 更 wijmenu ウィジェットは 従 来 のメニューバーまたは 垂 直 メニューとして 書 式 設 定 できます MVC コントロールエクスプローラ のライブデモで Menu > Orientation サンプル ( 参 照 してください 垂 直 メニューを 作 成 するには 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダをクリックし _Layout.cshtml をダブルクリックしてファイル を 開 きます 3. ソリューションエクスプローラで Views Home フォルダをクリックし Index.cshtml をダブルクリックしてファイルを 開 きます 4. 次 のマークアップを Index.cshtml ファイルに 追 加 して 順 序 付 けられていないリストを 作 成 します <ul id="menu2"> 治 </a> <li><a href="#"> 新 着 </a> <ul> <li><a href="#">エンタメ</a> <li><a href=" 政 <li><a href="#"> 国 際 </a> <li><a href="#"> 文 化 </a> <li><a href="#"> 社 会 </a> <li><a href="#"> 天 気 </a> </ul> <li><a href="#">エンタメ</a> <ul> <li><a href="#">エンタメトップ</a> <li><a href="#"> 舞 台 </a> <li><a href="#"> 映 画 </a> <li><a href="#"> 音 楽 </a> 287 Copyright GrapeCity inc. All rights reserved.

289 <ul> <li><a href="#">オルタナティブ</a> <li><a href="#">カントリー</a> <li><a href="#">ダンス</a> <li><a href="#">エレクトロニカ</a> <li><a href="#">メタル</a> <li><a href="#">ポップ</a <li><a href="#">ロック</a> <ul> <li><a href="#">バンド</a> <ul> <li><a href="#">ドッケン</a> </ul> <li><a href="#">ファンクラブ</a> <li><a href="#"> 歌 曲 </a> </ul> </ul> <li><a href="#">スライドショー</a> <li><a href="#"> 赤 い 絨 毯 </a> </ul> <li><a href="#"> 金 融 e</a> <ul> <li><a href="#"> 個 人 </a> <ul> <li><a href="#">ローン</a> <li><a href="#"> 貯 蓄 </a></li <li><a href="#"> 貸 付 金 </a> <li><a href="#"> 借 金 </a> </ul> <li><a href="#"> 企 業 </a> </ul> <li><a href="#">スポーツ</a> <ul> <li><a href="#"> 野 球 </a> <li><a href="#">サッカー</a> <li><a href="#">ゴルフ</a> <li><a href="#"> 一 般 </a> <ul> <li><a href="#">テニス</a> <li><a href="#"> 水 泳 </a> <li><a href="#">ラグビー</a> </ul> </ul> <li><a href="#"> 生 活 e</a> <li><a href="#">ニュース</a> 288 Copyright GrapeCity inc. All rights reserved.

290 <li><a href="#"> 政 治 </a> <li><a href="#">スポーツ</a> </ul> 5. 次 のスクリプトを 追 加 して ウィジェットを 初 期 化 します <script type="text/javascript"> $(document).ready(function () { $("#menu1").wijmenu(); $("#menu2").wijmenu({ orientation: 'vertical' </script> 6. アプリケーションを 実 行 します 垂 直 メニューは 次 の 図 のようになります Wijmenu の 関 数 の 設 定 wijmenu ウィジェットでは 特 定 のイベントを 設 定 できます このセクションでは itemfocus.wijmenu と itemclick.wijmenu イベントを 使 用 してメニュー 項 目 からクリックする 方 法 を 示 します MVC コントロールエクスプローラのライブデモで Menu > Functions サンプル( 参 照 してください 1. ASP.NET MVC Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダをクリックし _Layout.cshtml をダブルクリックしてファイル を 開 きます 3. ソリューションエクスプローラで Views Home フォルダをクリックし Index.cshtml をダブルクリックしてファイルを 開 きます 4. 次 のマークアップを Index.cshtml ビューに 追 加 して ボタンとリストを 追 加 します <div class="main demo"> <ul id="menu1"> <li><a href="#">menuitem</a> 289 Copyright GrapeCity inc. All rights reserved.

291 治 </a> <li><a href="#"> 新 着 </a> <ul> <li class="header"> <h3> ヘッダー2</h3> <li class="separator">s1 <li><a href="#">エンタメ</a> <li><a href=" 政 <li><a href="#"> 国 際 </a> <li><a href="#"> 文 化 </a> <li><a href="#"> 社 会 </a> <li><a href="#"> 天 気 </a> </ul> </li <li><a href="#">エンタメ</a> <ul> <li><a href="#">エンタメトップ</a> <li><a href="#"> 舞 台 </a> <li><a href="#"> 映 画 </a> <li><a href="#"> 音 楽 </a> <ul> <li><a href="#">オルタナティブ</a> <li><a href="#">カントリー</a> <li><a href="#">ダンス</a> <li><a href="#">エレクトロニカ</a> <li><a href="#">メタル</a> <li><a href="#">ポップ</a> <li><a href="#">ロック</a> <ul <li><a href="#">バンド</a> <ul> <li><a href="#">ドッケン</a> </ul> <li><a href="#">ファンクラブ</a> <li><a href="#"> 歌 曲 </a> </ul> </ul> <li><a href="#">スライドショー</a> <li><a href="#"> 赤 い 絨 毯 </a> </ul> <li><a href="#"> 金 融 e</a> <ul> <li><a href="#"> 個 人 </a> <ul> <li><a href="#">ローン</a> <li><a href="#"> 貯 蓄 </a> <li><a href="#"> 貸 付 金 </a> 290 Copyright GrapeCity inc. All rights reserved.

292 <li><a href="#"> 借 金 </a> </ul> li><a href="#"> 企 業 </a> </ul> <li><a href="#">スポーツ</a> <ul> <li><a href="#"> 野 球 </a></li <li><a href="#">サッカー</a> <li><a href="#">ゴルフ</a> <li><a href="#"> 一 般 </a> <ul> <li><a href="#">テニス</a> <li><a href="#"> 水 泳 </a> <li><a href="#">ラグビー</a> </ul> </ul> </li <li><a href="#"> 生 活 e</a> <li><a href="#">ニュース</a> <li><a href="#"> 政 治 </a> <li><a href="#">スポーツ</a> <li><a href="#"> 小 説 </a> <li><a href="#">マガジン</a> <li><a href="#">ブック</a> <li><a href="#"> 教 育 </a> </ul> <p> <button id="previous"> 前 へ</button> <button id="next"> 次 へ</button> <button id="previouspage"> 前 のページ</button> <button id="nextpage"> 次 のページ</button></p>!-- デモマークアップの 開 始 -- <div id="wijmenu" class="ui-widget ui-widget-content ui-corner-all">!-- デモマークアップの 終 了 -- <div class="demo-options">!-- オプションマークアップの 開 始 --!-- オプションマークアップの 終 了 次 のスクリプトを 挿 入 して ウィジェットを 初 期 化 します <script type="text/javascript"> $(document).ready(function () { $("#menu1").wijmenu({ 291 Copyright GrapeCity inc. All rights reserved.

293 mode: "sliding" //orientation: 'vertical', $("#previous").click(function () { $("#menu1").focus().wijmenu("previous"); $("#next").click(function () { $("#menu1").focus().wijmenu("next"); $("#previouspage").click(function () { $("#menu1").focus().wijmenu("previouspage"); $("#nextpage").click(function () { $("#menu1").focus().wijmenu("nextpage"); </script> <style type="text/css"> p { margin: 15px 0; p button { margin: 0 5px 0 0; </style> 6. アプリケーションを 実 行 します メニューは 次 の 図 のようになります サブメニューの 位 置 の 変 更 メニューとサブメニューが 開 く 場 所 をトリガーに 相 対 的 に 指 定 できます このチュートリアルでは ボタンクリックを 使 用 して メ ニューを 開 き position オプションをトリガーします MVC コントロールエクスプローラのライブデモで Menu > Position サン プル( 参 照 してください 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC Wijmo アプリケーションを 作 成 します 292 Copyright GrapeCity inc. All rights reserved.

294 2. ソリューションエクスプローラで Views Shared フォルダをクリックし _Layout.cshtml をダブルクリックしてファイル を 開 きます 3. 次 のマークアップを _Layout.cshtml ファイルに 追 加 して ボタンとリストを 追 加 します <h2> 位 置 </h2> <div class="main demo"> <!-- デモマークアップの 開 始 --> <button id="btn1"> ここをクリック</button> <ul id="wijmenu1"> <li><a href="#"> 新 着 </a> <li><a href="#">エンタメ</a> <li><a href="#"> 金 融 </a> <li><a href="#">スポーツ</a> <li><a href="#"> 生 活 </a> <ul><li><a href="#">サブメニュー</a></ul> <li><a href="#">ニュース</a> <li><a href="#"> 政 治 </a> <li><a href="#">スポーツ</a> </ul> <!-- デモマークアップの 終 了 --> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <div class="option-row"> <label My</label> <select id="my1"> <option value="left"> 左 </option> <option value="center"> 中 央 </option> <option value="right"> 右 </option> </select> <select id="my2"> <option value="top"> 上 </option> <option value="center"> 中 央 </option> <option value="bottom"> 下 </option> </select> <div class="option-row"> <label> At</label> <select id="at1"> <option value="left"> 左 </option> <option value="center"> 中 央 </option> <option value="right"> 右 </option> </select> <select id="at2"> <option value="top"> 上 </option> <option value="center"> 中 央 </option> <option value="bottom" selected="selected"> 下 </option> </select> 293 Copyright GrapeCity inc. All rights reserved.

295 <!-- オプションマークアップの 終 了 --> 4. 次 のスクリプトを 追 加 して ウィジェットを 初 期 化 します <script type="text/javascript"> $(document).ready(function () { $("#wijmenu1").wijmenu({ orientation: 'vertical', trigger: "#btn1" $("#my1,#my2,#at1,#at2").change(function () { $("#wijmenu1").wijmenu("option", "position", { my: $("#my1").get(0).value + " " + $("#my2").get(0).value, at: $("#at1").get(0).value + " " + $("#at2").get(0).value </script> 5. アプリケーションを 実 行 します アプリケーションは 次 の 図 のようになります Wijmenu のアニメーション 化 wijmenu ウィジェットは アニメーション 効 果 をサポートします アニメーションを wijmenu ウィジェットに 追 加 するには 以 下 の 手 順 に 従 います 1. ASP.NET MVC Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダをクリックし _Layout.cshtml をダブルクリックしてファイル を 開 きます 3. ページの <body> タグ 内 のすぐ 後 に 次 のマークアップを 追 加 して リストを 作 成 します <ul id="menu"> <li><a>メニュー 項 目 1</a> <ul> <li><a>メニュー 項 目 1.1</a> <li><a>メニュー 項 目 2.1</a> </ul> <li><a>メニュー 項 目 2</a> <li><a>メニュー 項 目 3</a> </ul> 4. 次 のスクリプトを 追 加 し ウィジェットを 初 期 化 してアニメーションを 追 加 します <script type="text/javascript"> $(document).ready(function () { 294 Copyright GrapeCity inc. All rights reserved.

296 $("#menu").wijmenu(); $("#menu").wijmenu("option", "animation", { animated: "bounce", option: { direction: "right", duration: 400, easing: null ) </script> 5. アプリケーションを 実 行 します menuitem1 のドロップダウンがドロップ 時 にバウンドします animated: "bounce"プロパティで 効 果 の 名 前 を 変 更 してアニメーション 効 果 を 変 更 できることに 注 意 してください Wijpager wijpager ウィジェットは エンドユーザーが 表 示 されている 要 素 をクリックして 要 素 またはページをスキャンできる UI です wijpager ウィジェットでは 数 字 ページングシステムや 次 へ/ 前 へシステムなど 複 数 のモードを 使 用 できます ページャを 表 示 するビューの.cshtml ファイルを 開 きます 次 のように DOM<div> 要 素 を 追 加 します <div id="pager"> ページャを 機 能 させるには ウィジェットを 初 期 化 する 必 要 があります 次 のスクリプトを.cshtml ファイルに 追 加 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#pager").wijpager({ pagecount: 50, pageindex: 40, mode: "numericfirstlast" </script> このスクリプトは ページャを 初 期 化 し ページ 数 実 行 時 に 強 調 表 示 されるページ およびページングモードを 指 定 します こ のプロジェクトでは ページャは 最 小 から 最 大 数 値 までのページをカウントし 50 ページあります 実 行 時 にページ 41 が 強 調 表 示 されます wijpager の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijpager Wijpager チュートリアル このトピックでは ASP.NET MVC 4 Wijmo アプリケーションを 作 成 済 みであることが 前 提 となります 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1: ビューの 設 定 この 手 順 では wijpager ウィジェットを 格 納 するビューを 作 成 します 1. ソリューションエクスプローラで Views Shared フォルダに 移 動 し Layout.cshtml ファイルをダブルクリックして ファイルを 開 きます 2. 次 のマークアップを <body> タグ 内 に 追 加 し スライダ 要 素 を 作 成 します 295 Copyright GrapeCity inc. All rights reserved.

297 <div id="pager"> 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では ページャ 要 素 を 作 成 しました この 手 順 では ウィジェットを 初 期 化 する jquery スクリプトを 追 加 します 終 了 の <div> タグの 後 に 次 のスクリプトを 追 加 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#pager").wijpager({ pagecount: 50, pageindex: 40, mode: "numericfirstlast" </script> 手 順 3:プロジェクトの 実 行 この 手 順 では プロジェクトを 実 行 します [F5]を 押 して プロジェクトを 実 行 します Web ページに 次 の 図 のような wijpager が 表 示 されます ページングモードの 変 更 wijpager ウィジェットは 4 種 類 の 異 なるページングモードをサポートします このトピックでは ページャモードを 変 更 する 手 順 について 説 明 します Web サイト( し コントロールエクスプローラの Pager > Paging Modes サンプルのライブデモをご 覧 ください nextprevious ページング nextprevious ページングモードは 前 へ と 次 へ ボタンで 構 成 するページネーションコントロールのセットです このトピック では ページングボタンに 前 へ と 次 へ テキストを 使 用 する nextprevious ページャを 作 成 します 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの<body> タグ 内 に 追 加 します <div id="pagernextprevious"> 4. 以 下 のスクリプトを 挿 入 して ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#pagernextprevious").wijpager({ pagecount: 150, pageindex: 40, mode: 296 Copyright GrapeCity inc. All rights reserved.

298 "nextprevious", firstpageclass: "", previouspageclass: "", nextpageclass: "", lastpageclass: "" </script> 5. プログラムを 実 行 します ページング 要 素 は 次 の 図 のように 表 示 されます nextpreviousfirstlast ページング nextpreviousfirstlast ページングモードは 前 へ 次 へ 先 頭 へ および 最 後 へ ボタンで 構 成 するページネーション コントロールのセットです このトピックでは ページングボタンのテキストを 使 用 する wijpager 要 素 を 作 成 します 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの<body>タグ 内 に 追 加 します <div id="pagernextpreviousfirstlast"> 4. 以 下 のスクリプトを 使 用 して ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#pagernextpreviousfirstlast").wijpager({ pagecount: 150, pageindex: 40, mode: "nextpreviousfirstlast", firstpageclass: "", previouspageclass: "", nextpageclass: "", lastpageclass: "" </script> 5. プログラムを 実 行 します wijpager ウィジェットは 次 の 図 のようになります numeric ページング numeric ページングモードは ページに 直 接 アクセスするための 数 字 リンクボタンで 構 成 するページネーションコントロールの セットです 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの<body>タグ 内 に 追 加 します 297 Copyright GrapeCity inc. All rights reserved.

299 <div id="pagernumeric"> 4. 以 下 のスクリプトを 使 用 して ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#pagernumeric").wijpager({ pagecount: 150, pageindex: 40, mode: "numeric" </script> 5. プログラムを 実 行 します wijpager ウィジェットは 次 の 図 のようになります numericfirstlast ページング numericfirstlast ページングは ページに 直 接 アクセスするための 数 字 リンクボタンと 先 頭 および 最 後 のページに 直 接 アクセ スするための 先 頭 へ と 最 後 へ リンクボタンの 両 方 で 構 成 するページネーションコントロールのセットです 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの<body>タグ 内 に 追 加 します <div id="pagernumericfirstlast"> 4. 以 下 のスクリプトを 使 用 して ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#pagernumericfirstlast").wijpager({ pagecount: 150, pageindex: 40, mode: "numericfirstlast", firstpageclass: "", previouspageclass: "", nextpageclass: "", lastpageclass: "" </script> 5. プログラムを 実 行 します wijpager ウィジェットは 次 の 図 のようになります ページ 付 けされたテーブルの 作 成 wijpager ウィジェットでは ページ 付 けされたテーブルを 作 成 して 無 駄 のない ページ 付 けされたインタフェースを 作 成 しなが ら 画 面 の 面 積 を 節 約 できます Web サイト( にアクセスし コントロールエクスプローラの Pager > Paged Table サンプルのライブデモをご 覧 ください 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 298 Copyright GrapeCity inc. All rights reserved.

300 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの<body>タグ 内 に 追 加 します <div id="pager"> 4. 以 下 のスクリプトを 使 用 して ウィジェットを 初 期 化 します <table class="ui-widget ui-widget-content" rules="all" id="pagedtable"> <thead class="ui-widget-header"> <tr> <td> </td><th scope="col"> 会 社 名 </th><th scope="col"> 従 業 員 名 </th> <th scope="col"> 指 名 </th><th scope="col"> 住 所 </th><th scope="col"> 都 市 </th> </tr> </thead> <tbody> <tr> <td>0</td><td>alfreds Futterkiste</td><td>Maria Anders</td> <td>sales Representative</td><td>Obere Str. 57</td><td>Berlin</td> </tr> <tr> <td>1</td><td>ana Trujillo Emparedados y helados</td><td>ana Trujillo</td><td>Owner</td><td>Avda. de la Constitución 2222</td><td>México D.F. </td> </tr> <tr> <td>2</td><td>antonio Moreno Taquería</td><td>Antonio Moreno</td> <td>owner</td><td>mataderos 2312</td><td>México D.F.</td> </tr> <tr> <td>3</td><td>around the Horn</td><td>Thomas Hardy</td><td>Sales Representative</td><td>120 Hanover Sq.</td><td>London</td> </tr> <tr> <td>4</td><td>berglunds snabbköp</td><td>christina Berglund</td> <td>order Administrator</td><td>Berguvsvägen 8</td><td>Luleå</td> </tr> <tr> <td>5</td><td>blauer See Delikatessen</td><td>Hanna Moos</td> <td>sales Representative</td><td>Forsterstr. 57</td><td>Mannheim</td> </tr> <tr> <td>6</td><td>blondel père et fils</td><td>frédérique Citeaux</td><td>Marketing Manager</td><td>24, place Kléber</td> <td>strasbourg</td> </tr> <tr> <td>7</td><td>bólido Comidas preparadas</td><td>martín Sommer</td><td>Owner</td><td>C/ Araquil, 67</td><td>Madrid</td> </tr> <tr> <td>8</td><td>bon app'</td><td>laurence Lebihan</td> 299 Copyright GrapeCity inc. All rights reserved.

301 <td>owner</td><td>12, rue des Bouchers</td><td>Marseille</td> </tr> <tr> <td>9</td><td>bottom-dollar Markets</td><td>Elizabeth Lincoln</td><td>Accounting Manager</td><td>23 Tsawassen Blvd.</td> <td>tsawassen</td> </tr> <tr> <td>10</td><td>b's Beverages</td><td>Victoria Ashworth</td> <td>sales Representative</td><td>Fauntleroy Circus</td><td>London</td> </tr> <tr> <td>11</td><td>cactus Comidas para llevar</td><td>patricio Simpson</td><td>Sales Agent</td><td>Cerrito 333</td><td>Buenos Aires</td> </tr> <tr> <td>12</td><td>centro comercial Moctezuma</td><td>Francisco Chang</td><td>Marketing Manager</td><td>Sierras de Granada 9993</td><td>México D.F.</td> </tr> <tr> <td>13</td><td>chop-suey Chinese</td><td>Yang Wang</td> <td>owner</td><td>hauptstr. 29</td><td>Bern</td> </tr> <tr> <td>14</td><td>comércio Mineiro</td><td>Pedro Afonso</td> <td>sales Associate</td><td>Av. dos Lusíadas, 23</td><td>São Paulo</td> </tr> <tr> <td>15</td><td>consolidated Holdings</td><td>Elizabeth Brown</td> <td>sales Representative</td><td>Berkeley Gardens 12 Brewery</td><td>London</td> </tr> <tr> <td>16</td><td>drachenblut Delikatessen</td><td>Sven Ottlieb</td> <td>order Administrator</td><td>Walserweg 21</td><td>Aachen</td> </tr> <tr> <td>17</td><td>du monde entier</td><td>janine Labrune</td> <td>owner</td><td>67, rue des Cinquante Otages</td><td>Nantes</td> </tr> <tr> <td>18</td><td>eastern Connection</td><td>Ann Devon</td><td>Sales Agent</td><td>35 King George</td><td>London</td> </tr> <tr> <td>19</td><td>ernst Handel</td><td>Roland Mendel</td><td>Sales Manager</td><td>Kirchgasse 6</td><td>Graz</td> </tr> <tr> <td>20</td><td>familia Arquibaldo</td><td>Aria Cruz</td> <td>marketing Assistant</td><td>Rua Orós, 92</td><td>São Paulo</td> </tr> <tr> 300 Copyright GrapeCity inc. All rights reserved.

302 <td>21</td><td>fissa Fabrica Inter. Salchichas S.A.</td><td>Diego Roel</td><td>Accounting Manager</td><td>C/ Moralzarzal, 86</td><td>Madrid</td> </tr> <tr> <td>22</td><td>folies gourmandes</td><td>martine Rancé</td> <td>assistant Sales Agent</td><td>184, chaussée de Tournai</td><td>Lille</td> </tr> <tr> <td>23</td><td>folk och fä HB</td><td>Maria Larsson</td> <td>owner</td><td>åkergatan 24</td><td>Bräcke</td> </tr> <tr> <td>24</td><td>frankenversand</td><td>peter Franken</td> <td>marketing Manager</td><td>Berliner Platz 43</td><td>München</td> </tr> <tr> <td>25</td><td>france restauration</td><td>carine Schmitt</td> <td>marketing Manager</td><td>54, rue Royale</td><td>Nantes</td> </tr> <tr> <td>26</td><td>franchi S.p.A.</td><td>Paolo Accorti</td><td>Sales Representative</td><td>Via Monte Bianco 34</td><td>Torino</td> </tr> <tr> <td>27</td><td>furia Bacalhau e Frutos do Mar</td><td>Lino Rodriguez</td><td>Sales Manager</td><td>Jardim das rosas n. 32</td> <td>lisboa</td> </tr> <tr> <td>28</td><td>galería del gastrónomo</td><td>eduardo Saavedra</td><td>Marketing Manager</td><td>Rambla de Cataluña, 23</td> <td>barcelona</td> </tr> <tr> <td>29</td><td>godos Cocina Típica</td><td>José Pedro Freyre</td> <td>sales Manager</td><td>C/ Romero, 33</td><td>Sevilla</td> </tr> <tr> <td>30</td><td>gourmet Lanchonetes</td><td>André Fonseca</td> <td>sales Associate</td><td>Av. Brasil, 442</td><td>Campinas</td> </tr> <tr> <td>31</td><td>great Lakes Food Market</td><td>Howard Snyder</td> <td>marketing Manager</td><td>2732 Baker Blvd.</td><td>Eugene</td> </tr> <tr> <td>32</td><td>grosella-restaurante</td><td>manuel Pereira</td> <td>owner</td><td>5ª Ave. Los Palos Grandes</td><td>Caracas</td> </tr> <tr> <td>33</td><td>hanari Carnes</td><td>Mario Pontes</td> <td>accounting Manager</td><td>Rua do Paço, 67</td><td>Rio de Janeiro</td> </tr> 301 Copyright GrapeCity inc. All rights reserved.

303 <tr> <td>34</td><td>hilarión-abastos</td><td>carlos Hernández</td> <td>sales Representative</td><td>Carrera 22 con Ave. Carlos Soublette #8-35</td> <td>san Cristóbal</td> </tr> <tr> <td>35</td><td>hungry Coyote Import Store</td><td>Yoshi Latimer</td><td>Sales Representative</td><td>City Center Plaza 516 Main St.</td> <td>elgin</td> </tr> <tr> <td>36</td><td>hungry Owl All-Night Grocers</td><td>Patricia McKenna</td><td>Sales Associate</td><td>8 Johnstown Road</td><td>Cork</td> </tr> <tr> <td>37</td><td>island Trading</td><td>Helen Bennett</td> <td>marketing Manager</td><td>Garden House Crowther Way</td><td>Cowes</td> </tr> <tr> td>38</td><td>königlich Essen</td><td>Philip Cramer</td><td>Sales Associate</td><td>Maubelstr. 90</td><td>Brandenburg</td> </tr> <tr> <td>39</td><td>la corne d'abondance</td><td>daniel Tonini</td> <td>sales Representative</td><td>67, avenue de l'europe</td><td>versailles</td> </tr> <tr> <td>40</td><td>la maison d'asie</td><td>annette Roulet</td> <td>sales Manager</td><td>1 rue Alsace-Lorraine</td><td>Toulouse</td> </tr> <tr> <td>41</td><td>laughing Bacchus Wine Cellars</td><td>Yoshi Tannamuri</td><td>Marketing Assistant</td><td>1900 Oak St.</td><td>Vancouver</td> </tr> <tr> <td>42</td><td>lazy K Kountry Store</td><td>John Steel</td> <td>marketing Manager</td><td>12 Orchestra Terrace</td><td>Walla Walla</td> </tr> <tr> <td>43</td><td>lehmanns Marktstand</td><td>Renate Messner</td> <td>sales Representative</td><td>Magazinweg 7</td><td>Frankfurt a.m.</td> </tr> <tr> <td>44</td><td>let's Stop N Shop</td><td>Jaime Yorres</td> <td>owner</td><td>87 Polk St. Suite 5</td><td>San Francisco</td></tr> <tr> <td>45</td><td>lila-supermercado</td><td>carlos González</td> <td>accounting Manager</td><td>Carrera 52 con Ave. Bolívar #65-98 Llano Largo</td><td>Barquisimeto</td> </tr> <tr> <td>46</td><td>lino-delicateses</td><td>felipe Izquierdo</td> <td>owner</td><td>ave. 5 de Mayo Porlamar</td><td>I. de Margarita</td> 302 Copyright GrapeCity inc. All rights reserved.

304 </tr> <tr> <td>47</td><td>lonesome Pine Restaurant</td><td>Fran Wilson</td> <td>sales Manager</td><td>89 Chiaroscuro Rd.</td><td>Portland</td> </tr> <tr> <td>48</td><td>magazzini Alimentari Riuniti</td><td>Giovanni Rovelli</td><td>Marketing Manager</td><td>Via Ludovico il Moro 22</td> <td>bergamo</td> </tr> <tr> <td>49</td><td>maison Dewey</td><td>Catherine Dewey</td><td>Sales Agent</td><td>Rue Joseph-Bens 532</td><td>Bruxelles</td> </tr> <tr> <td>50</td><td>mère Paillarde</td><td>Jean Fresnière</td> <td>marketing Assistant</td><td>43 rue St. Laurent</td><td>Montréal</td> </tr> </tbody> </table> 5. 以 下 のスクリプトを 使 用 して ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> var $rows; var pagesize = 5; $(document).ready(function () { $rows = $("#pagedtable >tbody >tr"); $("#pager").wijpager({ pagecount: Math.ceil($rows.length / pagesize) 1, mode: "numericfirstlast", pageindexchanged: onpageindexchanged onpageindexchanged(); function onpageindexchanged() { var pageindex = $("#pager").wijpager("option", "pageindex"); var showfrom = pageindex * pagesize; var showto = showfrom + pagesize; $.each($rows, function (index, tr) { if (index >= showfrom && index < showto) { $(tr).show(); else { $(tr).hide(); ; </script> 6. プログラムを 実 行 します wijpager ウィジェットは 次 の 図 のようになります 303 Copyright GrapeCity inc. All rights reserved.

305 Wijpopup wijpopup ウィジェットは 要 素 を 柔 軟 に 表 示 したり 非 表 示 にしたりするために 他 のウィジェットによって 使 用 されるツールウィ ジェットです wijpopup を 使 用 して ターゲット 要 素 (DIV など)を 指 定 された 位 置 にポップアップしたり 非 表 示 にしたりできま す ターゲット 要 素 は 他 の 要 素 の 最 上 位 に 配 置 され IE6(またはそれ 以 下 の)ブラウザの 要 素 の 下 に 透 明 なフレームが 自 動 的 に 作 成 されます アニメーションは 表 示 および 非 表 示 アクションに 適 用 できます wijpopup ウィジェットのマークアップは 次 のようになります <div style="width:xxx;height:xxx">content goes here ポップアップを 次 のように 初 期 化 できます <script type="text/javascript"> $(".selector").wijpopup({ showeffect: 'blind' </script> 関 連 項 目 : wijpopup の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください wijpopup Wijpopup チュートリアル 以 下 のチュートリアルでは 画 像 を 表 示 するポップアップを 含 む MVC プロジェクトを 作 成 する 手 順 を 段 階 的 に 説 明 します 注 意 : このチュートリアルでは MVC Classicバープロジェクトを 作 成 済 みであることを 前 提 にしています 詳 細 について は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1: ビューの 設 定 この 手 順 では 最 初 にビューを 設 定 します ポップアップにコンテンツを 追 加 します 注 意 : この 手 順 では MVC Classicバープロジェクトを 作 成 済 みであることを 前 提 にしています 詳 細 については MVC Classic プロジェクトの 作 成 を 参 照 してください 以 下 の 手 順 を 実 行 します 1. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックして ファイルを 開 きます 304 Copyright GrapeCity inc. All rights reserved.

306 2. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="food"> <img src=" alt="popup Food!" /> <div> <input type="button" id="button1" onclick="popupbeside();" value="popup" /> このマークアップは 画 像 とボタンをページに 追 加 します ボタンをクリックすると 画 像 が 表 示 されます この 手 順 では ビューを 作 成 しました 次 の 手 順 2: ウィジェットの 初 期 化 では スクリプトを 追 加 してウィジェットを 初 期 化 し ます 手 順 2: ウィジェットの 初 期 化 前 の 手 順 では ポップアップに 表 示 するコンテンツを 追 加 するマークアップを 追 加 しました この 手 順 では ウィジェットを 初 期 化 するために 必 要 な jquery スクリプトを 追 加 します 以 下 の 手 順 を 実 行 します 1. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 して wijpopup ウィジェットを 初 期 化 し ます <script type="text/javascript"> $(function () { $("#food").wijpopup({ autohide: true, showeffect: 'blind', hideeffect: 'blind' function popupbeside() { $("#food").wijpopup('show', { of: $('#Button1') </script> このスクリプトは ウィジェットを 初 期 化 し ボタンをクリックしたときに 画 像 が 表 示 される 場 所 を 指 定 する 関 数 を 作 成 しま す アプリケーションを 作 成 し wijpopup ウィジェットを 追 加 して 初 期 化 しました 次 の 手 順 3: プロジェクトの 実 行 では ウィ ジェットの 実 行 時 のインタラクティブ 操 作 を 確 認 します 手 順 3: プロジェクトの 実 行 前 の 手 順 では アプリケーションを 作 成 し wijpopup ウィジェットを 追 加 して 初 期 化 しました この 手 順 では ウィジェットの 実 行 時 のインタラクティブ 操 作 を 確 認 します 以 下 の 手 順 を 実 行 します 1. [F5]を 押 して アプリケーションを 実 行 します ボタンがアプリケーションに 表 示 されます 305 Copyright GrapeCity inc. All rights reserved.

307 2. ポップアップボタンをクリックします 画 像 がページ 上 にポップアップ 表 示 されます スクリプトで 指 定 した 効 果 が 画 像 に 表 示 されていることに 注 意 してください このチュートリアルでは wijpopup ウィジェットをアプリケーションに 追 加 し ウィジェットを 初 期 化 し 実 行 時 のウィジェットの 動 作 を 確 認 しました ポップアップ 位 置 の 設 定 wijpopup ウィジェットの 表 示 場 所 と 表 示 方 法 を 簡 単 にカスタマイズできます 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="food"> <img src=" alt="popup Food!" /> <div> <input type="button" id="button1" onclick="popupbeside();" value="popup" /> このマークアップは 画 像 とボタンをページに 追 加 します ボタンをクリックすると 画 像 が 表 示 されます 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 のマークアップを 追 加 します <div class="options"> <div class="option-row"> <label>my</label> <select id="my_horizontal"> <option value="left">left</option> <option value="center">center</option> <option value="right">right</option> </select> <select id="my_vertical"> <option value="top">top</option> <option value="middle">center</option> <option value="bottom">bottom</option> </select> <div class="option-row"> <label>at</label> <select id="at_horizontal"> <option value="left">left</option> <option value="center">center</option> <option value="right">right</option> </select> <select id="at_vertical"> <option value="top">top</option> <option value="middle">center</option> <option value="bottom">bottom</option> </select> 306 Copyright GrapeCity inc. All rights reserved.

308 <div class="option-row"> <label>offset</label> <input id="offset" type="text" size="15" value="0 0" /> <div class="option-row"> <label>collision</label> <select id="collision_horizontal"> <option value="flip">flip</option> <option value="fit">fit</option> <option value="none">none</option> </select> <select id="collision_vertical"> <option value="flip">flip</option> <option value="fit">fit</option> <option value="none">none</option> </select> このマークアップは 実 行 時 に 画 像 をポップアップする 位 置 を 選 択 できる 複 数 のドロップダウンボックスを 追 加 します 5. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 追 加 して wijpopup ウィジェットを 初 期 化 します <script type="text/javascript"> $(function () { $("#food").wijpopup({ autohide: true, showeffect: 'blind', hideeffect: 'blind' function popupbeside() { $("#food").wijpopup('show', { of: $('#Button1'), my: $('#my_horizontal').val() + ' ' + $('#my_vertical').val(), at: $('#at_horizontal').val() + ' ' + $('#at_vertical').val(), offset: $('#offset').val(), collision: $("#collision_horizontal").val() + ' ' + $("#collision_vertical").val() </script> これによりポップアップとドロップダウンボックスが 初 期 化 されます このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し ドロップダウンボックスからオプションを 選 択 してポップアップの 表 示 をカスタマイズし ポップアップ ボタンをクリックして 画 像 をポップアップします 307 Copyright GrapeCity inc. All rights reserved.

309 ポップアップアニメーションの 設 定 wijpopup ウィジェットを 表 示 するときに 使 用 するアニメーションを 簡 単 にカスタマイズできます 以 下 の 手 順 を 実 行 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラに 移 動 して Views フォルダ 内 の Shared フォルダを 展 開 し _Layout をダブルクリックし てファイルを 開 きます 3. 以 下 のすぐ 後 のページの <body> タグ 内 に 追 加 します <div id="food"> <img src=" alt="popup Food!" /> <div> <input type="button" id="button1" onclick="popupbeside();" value="popup" /> このマークアップは 画 像 とボタンをページに 追 加 します ボタンをクリックすると 画 像 が 表 示 されます 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 のマークアップを 追 加 します <div class="options"> <div class="option-row"> <label>show Duration</label> <select name="showduration" id="showduration" class="duration"> <option value="200">200</option> <option value="400">400</option> <option value="800">800</option> <option value="1200">1200</option> <option value="1500">1500</option> </select> <div class="option-row"> <label>show Effect</label> <select name="showeffect" id="showeffect" class="effect"> <option value="show">none</option> <option value="blind">blind</option> <option value="clip">clip</option> <option value="drop">drop</option> <option value="fade">fade</option> <option value="fold">fold</option> <option value="puff">puff</option> <option value="pulsate">pulsate</option> <option value="slide">slide</option> </select> <div class="option-row"> <label>hide Duration</label> <select name="hideduration" id="hideduration" class="duration"> <option value="200">200</option> <option value="400">400</option> <option value="800">800</option> 308 Copyright GrapeCity inc. All rights reserved.

310 <option value="1200">1200</option> <option value="1500">1500</option> </select> <div class="option-row"> <label>hide Effect</label> <select name="hideeffect" id="hideeffect" class="effect"> <option value="hide">none</option> <option value="blind">blind</option> <option value="clip">clip</option> <option value="drop">drop</option> <option value="fade">fade</option> <option value="fold">fold</option> <option value="puff">puff</option> <option value="pulsate">pulsate</option> <option value="slide">slide</option> </select> このマークアップは 実 行 時 に 画 像 をポップアップする 位 置 を 選 択 できる 複 数 のドロップダウンボックスを 追 加 します 5. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 追 加 して wijpopup ウィジェットを 初 期 化 します <script type="text/javascript"> $(function () { $("#food").wijpopup({ autohide: true, position: { of: $('#Button1'), offset: '0 4' $(".duration").bind("change keyup", function () { var o = {; o[$(this).attr('name')] = $(this).val() * 1; $("#food").wijpopup(o); $(".effect").bind("change keyup", function () { var o = {; o[$(this).attr('name')] = $(this).val(); $("#food").wijpopup(o); function popupbeside() { $("#food").wijpopup('show'); </script> これによりポップアップとドロップダウンボックスが 初 期 化 されます 309 Copyright GrapeCity inc. All rights reserved.

311 このトピックの 作 業 結 果 [F5]を 押 してアプリケーションを 実 行 し ドロップダウンボックスからオプションを 選 択 してポップアップの 表 示 をカスタマイズし ポップアップ ボタンをクリックして 画 像 をポップアップします Wijprogressbar wijprogressbar ウィジェットを 使 用 して エンドユーザーが 操 作 の 進 捗 状 況 を 認 識 できるようにします アニメーション スタイ ル ラベルなどを 使 用 して インジケータの 外 観 を 簡 単 にカスタマイズできます プログレスバーを 表 示 するビューの.cshtml ファイルを 開 きます 次 のマークアップのように DOM 要 素 を 追 加 します <div id="progressbar" style="width:50px;height:300px"> ここで ウィジェットを 初 期 化 する 必 要 があります これを 行 うには 次 のスクリプトを.cshtml ファイルに 追 加 できます <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#progressbar").wijprogressbar({ value: 75, filldirection: "north" </script> 値 と filldirection オプションが 設 定 されることに 注 意 してください プロジェクトを 起 動 すると north に 設 定 された filldirection オプションによりプログレスバーは 垂 直 になり 値 プロパティにより 値 は 75% に 設 定 されます 関 連 項 目 : wijprogressbar の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijprogressbar Wijprogressbar チュートリアル 310 Copyright GrapeCity inc. All rights reserved.

312 以 下 のチュートリアルでは 垂 直 と 水 平 の2つのプログレスバーを 含 む MVC プロジェクトの 作 成 手 順 について 説 明 します このトピックでは ASP.NET MVC 4 Wijmo アプリケーションを 作 成 済 みであることが 前 提 となります 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では 垂 直 と 水 平 のプログレスバーが 表 示 される <div> 要 素 を 追 加 するマークアップを 追 加 します 以 下 を 実 行 しま す 1. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックして ファイルを 開 きます 2. 次 のマークアップをページの <body> タグ 内 に 追 加 し 垂 直 と 水 平 のプログレスバーが 表 示 される <div> 要 素 を 追 加 します <div class="layout ui-helper-clearfix"> <h5> 水 平 方 向 </h5> <div id="hprobar"> <div class="layout ui-helper-clearfix"> <h5> 垂 直 方 向 </h5> <div id="vprobar"> 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では 垂 直 と 水 平 のプログレスバーが 表 示 される <div> 要 素 を 追 加 するマークアップを 追 加 しました ここでは jquery スクリプトを 追 加 し ウィジェットを 初 期 化 できます 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 し wijprogressbar ウィジェットを 初 期 化 し ます <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#hprobar").wijprogressbar({ value: 75, animationoptions: { duration: 1000 ) $("#vprobar").wijprogressbar({ value: 75, filldirection: "north" </script> 手 順 3:プロジェクトの 実 行 [F5]を 押 して アプリケーションを 実 行 します プログレスバーが 75% まで 塗 りつぶされるのを 観 察 してください 311 Copyright GrapeCity inc. All rights reserved.

313 プログレスバーの 進 行 方 向 の 変 更 wijprogressbar ウィジェットでは プログレスバーの 進 行 方 向 を 変 更 できます オプションには east( 左 から 右 方 向 ) west( 右 から 左 方 向 ) north( 下 から 上 方 向 ) および south( 上 から 下 方 向 )があります この 機 能 を 利 用 するには 単 に filldirection オプションを 設 定 します Web サイト ( MVC コントロールエクス プローラの ProgressBar > Direction サンプルのライブデモをご 覧 ください 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div id="progressbar1"> 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 し wijprogressbar ウィジェットを 初 期 化 して filldirection オプションを 設 定 します <script type="text/javascript"> $(document).ready(function () { $("#progressbar1").wijprogressbar({ value: 75, filldirection: "north" </script> 5. アプリケーションを 実 行 すると プログレスバーが 下 から 上 方 向 に 進 行 します オプションを east または west に 設 定 すると バーは 水 平 になります 312 Copyright GrapeCity inc. All rights reserved.

314 Wijslider wijslider ウィジェットは 数 値 変 更 の 高 度 な 視 覚 表 現 を 提 供 してユーザー 入 力 を 簡 素 化 する UI です wijslider ウィジェット は スライドセレクタで 実 行 時 にエンドユーザーが 定 義 済 みの 単 一 値 や 値 範 囲 から 選 択 するためのシンプルでなじみある 方 法 を 提 供 します wijslider ウィジェットは jquery.wijmo.wijslider.js ライブラリによって 作 成 されます スライダを 表 示 するビューの.cshtml ファイルを 開 きます 以 下 のように DOM 要 素 を 追 加 します <div id="slider"> CSS スタイリングをスライダに 追 加 することもできます ここではスライダの 幅 を 指 定 します <style type="text/css"> #slider { width: 300px; </style> スライダを 機 能 させるには ウィジェットを 初 期 化 する 必 要 があります 次 のスクリプトを.cshtml ファイルに 追 加 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#slider").wijslider({ orientation: "horizontal", range: fasle, min: 0, max: 100, step: 2, values: [25] </script> このスクリプトは スライダを 初 期 化 し 向 き 範 囲 スライダかどうか および 実 行 時 に 表 示 される 値 を 指 定 します この 場 合 は 範 囲 をデフォルトオプション false に 設 定 した 水 平 スライダとなります 実 行 時 に 値 は 25 に 設 定 されます wijslider の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijslider Wijslider チュートリアル このセクションでは スライダ 要 素 を 含 む MVC プロジェクトの 作 成 手 順 について 説 明 します 313 Copyright GrapeCity inc. All rights reserved.

315 このトピックでは ASP.NET MVC 4 Wijmo アプリケーションを 作 成 済 みであることが 前 提 となります 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では wijslider ウィジェットを 格 納 するビューを 作 成 します 1. ソリューションエクスプローラで Views Shared フォルダに 移 動 し Layout.cshtml ファイルをダブルクリックして ファイルを 開 きます 2. 次 のマークアップを 追 加 してスライダ 要 素 を 作 成 します <div id="slider"> 3. 次 の CSS スタイルを 追 加 し スライダ 要 素 の 幅 を 制 御 します <style type="text/css"> #slider { width: 300px; 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では スライダ 要 素 を 作 成 しました この 手 順 では ウィジェットを 初 期 化 する jquery スクリプトを 追 加 します 終 了 の <div> タグの 後 に 次 のスクリプトを 追 加 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#slider").wijslider({ orientation: "horizontal", range: false, min: 0, max: 100, step: 2, values: [25] </script> 手 順 3: プロジェクトの 実 行 この 手 順 では プロジェクトを 実 行 します [F5]を 押 して プロジェクトを 実 行 します Web ページに 次 の 図 のような wijslider が 表 示 されます Wijslider の 向 きの 変 更 wijslider ウィジェットは Web ページ 上 で 水 平 または 垂 直 方 向 に 表 示 できます このトピックでは wijslider ウィジェットの 水 平 方 向 の 向 き(デフォルト)を 変 更 する 手 順 について 説 明 します Web サイト 314 Copyright GrapeCity inc. All rights reserved.

316 ( MVC コントロールエクスプロー ラの Slider > Orientation サンプルのライブデモをご 覧 ください 1. Layout.cshtml ファイルで ウィジェットの 初 期 化 に 使 用 したスクリプトを 探 します 2. スクリプトにある orientation オプションを 探 します "horizontal" に 設 定 されているはずです このオプションを "vertical" に 変 更 します 3. 前 に 追 加 した CSS スタイルを 探 します "width" オプションを "height" に 変 更 します 4. プログラムを 実 行 します スライダは 次 の 図 のようになります Wijslider の 範 囲 の 設 定 range オプションのデフォルト 値 は "false" です range オプションは 2つのハンドルを 使 用 しているかどうか および 使 用 し ている 場 合 2つのハンドル 間 でスタイル 設 定 可 能 な 範 囲 要 素 を 作 成 するかどうかを 検 出 します Web サイト ( MVC コントロールエクスプロー ラの Slider > Range サンプルのライブデモをご 覧 ください 1. Layout.cshtml ファイルに 移 動 し ウィジェットの 初 期 化 に 使 用 したスクリプトを 探 します 2. range オプションを 見 つけ それを "true" に 設 定 します 3. value オプションを 見 つけ それを values: [25, 50]に 設 定 します これにより 2つのハンドルの 位 置 がスライダに 設 定 されます 4. プログラムを 実 行 します wijslider は 次 の 図 のようになります Wijslider のドラッグフィルの 動 作 dragfill オプションを 使 用 すれば エンドユーザーはスライダ 間 でドラッグフィルできます Web サイト ( MVC コントロールエクスプロー 315 Copyright GrapeCity inc. All rights reserved.

317 ラの Slider > Dragfill サンプルのライブデモをご 覧 ください 1. Layout.cshtml ファイルで ウィジェットの 初 期 化 に 使 用 したスクリプトを 見 つけ その range オプションを "true" に 設 定 します 2. 前 に 追 加 した CSS スタイルを 探 します それを 次 のスクリプトに 置 き 換 えます <style type="text/css"> #slider { width: 300px; height: 100px; </style> 3. プログラムを 実 行 します スライダは 次 の 図 のようになります Wijslider へのアニメーションの 適 用 animation オプションは つまみが 範 囲 をスムーズに 移 動 する 方 法 を 制 御 します デフォルト 設 定 値 は "false" です wijslider をアニメーション 化 するには ウィジェットの 初 期 化 に 使 用 したスクリプトに 次 の 行 を 挿 入 します $("#slider").wijslider({ animate: true プログラムを 実 行 し スライダバーをクリックしてつまみを 移 動 してください Wijsplitter wijsplitter ウィジェットのヘルプを 使 用 して プロフェッショナルで 洗 練 された Web サイトを 作 成 します wijsplitter は コンテ ナの 表 示 領 域 を2つのサイズ 変 更 可 能 なパネルに 分 割 する 移 動 および 縮 小 可 能 なバーを 備 えたコンテナコントロールです スプリッタは 無 限 にネストでき Web インターフェース 設 計 に 無 限 の 可 能 性 を 提 供 します 単 純 なネストしない wijsplitter ウィジェットを 作 成 するには 次 のマークアップ(1つの wijsplitter と2つのパネルを 作 成 )を ウィジェットを 表 示 する.cshtml ビューに 追 加 します <div id="splitter"> <div>パネル1 <div>パネル2 CSS スタイリングをスプリッタに 多 少 追 加 することもできます この 例 では スプリッタの 幅 と 高 さを 指 定 します 316 Copyright GrapeCity inc. All rights reserved.

318 <style type="text/css"> #splitter { height: 200px; width: 200px; </style> ここで ウィジェットを 初 期 化 する 必 要 があります これを 行 うには 次 のスクリプトを.cshtml ファイルに 追 加 できます <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#splitter").wijsplitter({ orientation: "vertical" </script> 向 きプロパティを vertical に 設 定 することに 注 意 してください プロジェクトを 実 行 すると 2パネル 構 成 のスプリッタコントロー ルにパネルが 並 べて 表 示 されます 関 連 項 目 : wijsplitter の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijsplitter Wijsplitter チュートリアル 以 下 のチュートリアルでは 水 平 と 垂 直 の2つの wijsplitter ウィジェットを 含 む MVC プロジェクトの 作 成 手 順 について 説 明 し ます このトピックでは ASP.NET MVC 4 Wijmo アプリケーションを 作 成 済 みであることが 前 提 となります 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では 垂 直 と 水 平 スプリッタが 表 示 される <div> 要 素 のマークアップを 追 加 します 以 下 を 実 行 します 1. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックして ファイルを 開 きます 317 Copyright GrapeCity inc. All rights reserved.

319 2. 次 のマークアップをページの <body> タグ 内 に 追 加 し 垂 直 と 水 平 のスプリッタが 表 示 される <div> 要 素 を 追 加 しま す <div class="layout"> <h2> 垂 直 方 向 </h2> <div id="vsplitter"> <div> パネル1 <div> パネル2 <div class="layout" style="width: 100px;"> <div class="layout"> <h2> 水 平 方 向 </h2> <div id="hsplitter"> <div> パネル1 <div> パネル2 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では 垂 直 と 水 平 スプリッタが 表 示 される <div> 要 素 のマークアップを 追 加 しました ここでは jquery スクリプトを 追 加 し ウィジェットを 初 期 化 できます 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 し wijsplitter ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#vsplitter").wijsplitter({ orientation: "vertical" $("#hsplitter").wijsplitter({ orientation: "horizontal" </script> 何 かマークアップを <body> タグに 追 加 し CSS スタイリングをスプリッタに 適 用 します <style type="text/css">.splittercontainer { 318 Copyright GrapeCity inc. All rights reserved.

320 height: 210px; #vsplitter, #hsplitter { width: 200px; height: 200px;.layout { float: left; </style> 手 順 3:プロジェクトの 実 行 [F5]を 押 して アプリケーションを 実 行 します スプリッタバーをドラッグして 縮 小 します フルサイズスプリッタの 作 成 wijsplitter ウィジェットでは ページ 全 体 に 引 き 伸 ばされるフルサイズスプリッタを 作 成 できます この 機 能 を 利 用 するには 単 に fullsplit オプションを 設 定 します Web サイト ( MVC コントロールエクスプロー ラの Splitter > FullSplit サンプルのライブデモをご 覧 ください 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <h2> フルスプリット</h2> <div class="main demo" style="height: 300px"> <!-- デモマークアップの 開 始 --> <div id="splitter"> <div> パネル1 319 Copyright GrapeCity inc. All rights reserved.

321 <div> パネル2 <!-- デモマークアップの 終 了 --> 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 し wijsplitter ウィジェットを 初 期 化 し て fullsplit オプションを true に 設 定 します <style> マークアップでは スプリッタの 高 さと 幅 を 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#splitter").wijsplitter({ orientation: "vertical", fullsplit: true </script> <style type="text/css"> #splitter { width: 300px; height: 300px; </style> 5. [F5]を 押 して アプリケーションを 実 行 し スプリッタをクリックします 水 平 または 垂 直 スプリッタの 作 成 wijsplitter ウィジェットでは スプリッタの 向 きを 変 更 できます この 機 能 を 利 用 するには 単 に orientation オプションを 設 定 します Web サイト( MVC コント ロールエクスプローラの Splitter > Nested サンプルのライブデモをご 覧 ください 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 320 Copyright GrapeCity inc. All rights reserved.

322 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div class="main demo"> <!-- デモマークアップの 開 始 --> <div id="vsplitter"> <div> パネル1 <div> <div id="hsplitter"> <div> パネル2 <div> パネル3 <!-- デモマークアップの 終 了 --> 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 し wijsplitter ウィジェットを 初 期 化 し て orientation オプションを 設 定 します <style> マークアップでは 垂 直 スプリッタの 高 さと 幅 を 設 定 します <style type="text/css"> #vsplitter { width: 300px; height: 200px; </style> <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#vsplitter").wijsplitter({ orientation: "vertical", fullsplit: false, expanded: function (e) { $("#hsplitter").wijsplitter("refresh");, collapsed: function (e) { $("#hsplitter").wijsplitter("refresh");, sized: function (e) { $("#hsplitter").wijsplitter("refresh"); $("#hsplitter").wijsplitter({ orientation: "horizontal", fullsplit: true </script> 5. [F5]を 押 して アプリケーションを 実 行 し 垂 直 および 水 平 スプリッタを 表 示 します 321 Copyright GrapeCity inc. All rights reserved.

323 スプリッタの 位 置 の 設 定 wijsplitter ウィジェットでは SplitContainer の 左 端 または 上 端 からのスプリッタの 位 置 (ピクセル)を 指 定 できます この 機 能 を 利 用 するには 単 に splitterdistance オプションを 設 定 します 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div class="splittercontainer"> <div class="layout"> <h3> 垂 直 方 向 </h3> <div id="vsplitter"> <div> パネル1 <div> パネル2 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 し wijsplitter ウィジェットを 初 期 化 し て splitterdistance オプションを 設 定 します splitterdistance オプションのデフォルト 値 は 100 ですが この 例 では 150 に 設 定 します <style> マークアップはスプリッタの 高 さと 幅 を 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#vsplitter").wijsplitter({ orientation: "vertical", splitterdistance: 200 </script> <style type="text/css">.splittercontainer { height: 210px; #vsplitter { width: 300px; height: 300px; </style> 5. [F5]を 押 して アプリケーションを 実 行 し スプリッタを 表 示 します 下 の 図 は splitterdistance を 100 に 設 定 したスプ リッタと splitterdistance を 200 に 設 定 したスプリッタの 相 違 を 示 します 322 Copyright GrapeCity inc. All rights reserved.

324 Wijsuperpanel wijsuperpanel ウィジェットは オーバーフローした 要 素 のスクロールを 簡 単 に 行 えるようにする HTML スクロールバーに 代 わる 方 法 です ページ 内 の 任 意 のパネルに カスタムスクロール サイズ 変 更 丸 みのある 角 ドロップシャドウを 追 加 します wijsuperpanel ウィジェットを 作 成 するには 次 のマークアップ(SuperPanel と6つのパネルを 作 成 )をウィジェットの 表 示 先 とな る.cshtml ビューに 追 加 します <div id="superpanel" style="width: 440px; height: 280px;"> <div class="elements"> <ul> <li style="background-color:red"> <li style="background-color:blue"> <li style="background-color:fuchsia"> <li style="background-color:green"> <li style="background-color:purple"> <li style="background-color:black"> </ul> 任 意 のウィジェットまたは DOM 要 素 を LI 要 素 の 間 に 配 置 できますが この 場 合 は CSS スタイリングを UL UL-LI および LI 要 素 に 追 加 します たとえば 次 のようになります <style type="text/css">.elements ul { padding: 8px 0 0 8px; margin: 0px; width: 480px; float: left; position: relative;.elements ul li 323 Copyright GrapeCity inc. All rights reserved.

325 { background: #fff; color: #fff; height: 90px; margin: 0 8px 8px 0; padding: 0; padding-top: 62px; position: relative; width: 132px;.elements li { float: left; list-style: none; </style> ここで ウィジェットを 初 期 化 する 必 要 があります これを 行 うには 次 のスクリプトを.cshtml ファイルに 追 加 できます <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#superpanel").wijsuperpanel(); </script> プロジェクトを 実 行 すると wijsuperpanel に6つのブロック( 下 部 に3つ 上 部 に3つ) および 水 平 と 垂 直 のスクロールバーが 表 示 されます スクロールバーはデフォルトで 追 加 されます 関 連 項 目 : wijsuperpanel の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijsuperpanel Wijsuperpanel チュートリアル 324 Copyright GrapeCity inc. All rights reserved.

326 以 下 のチュートリアルでは ASP.NET MVC 4 Wijmo アプリケーションの 作 成 手 順 について 説 明 し ページへのコンボボックス のコンテンツの 追 加 コンボボックスへのデータ 移 植 アニメーションの 追 加 およびコンボボックスのリンクを 行 います 手 順 1:ビューの 設 定 この 手 順 では マークアップを 追 加 し コンテンツをスーパーパネルに 追 加 します 以 下 を 実 行 します 1. Microsoft Visual Studio の[ファイル]メニューから [ 新 しいプロジェクト]を 選 択 します [ 新 しいプロジェクト]ダイアロ グボックスが 開 きます 2. テンプレートの[Visual Basic]または[Visual C#]より[Web]を 選 択 します 3. 右 ペインから[ASP.NET MVC 4 Wijmo アプリケーション]を 選 択 します 4. [ 名 前 ] [ 場 所 ] [ソリューション 名 ]フィールドを 設 定 して OK をクリックします 5. 新 しい ASP.NET MVC Wijmo 4 アプリケーションが 作 成 されます Models Views および Controllers フォルダが 含 まれていることがわかります これらのフォルダは Wijmo for MVC のチュートリアルで 使 用 します 6. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックして ファイルを 開 きます 7. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します このマークアップは superpanel2 と superpanel3 をス タイリングします <style type="text/css"> #superpanel2, #superpanel3 { width: 600px; height: 200px; margin: 10px 0;.elements ul { padding: 8px 0 0 8px; margin: 0px; width: 840px; float: left;.elements ul li { background: #fff; color: #fff; font-weight: 900; height: 70px; margin: 0 8px 8px 0; padding: 0; padding-top: 62px; position: relative; text-align: center; width: 132px; text-shadow: 1px 1px 2px #000000;.elements li { float: left; 325 Copyright GrapeCity inc. All rights reserved.

327 </style> list-style: none; 8. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します このマークアップは 背 景 スタイルを2つのスーパーパ ネル 内 の 各 要 素 に 追 加 します <div class="main demo"> <!-- デモマークアップの 開 始 --> <div id="superpanel2"> <div class="elements"> <ul> <li style="background: activeborder;"><span>activeborder</span> <li style="background: activecaption;"> <span>activecaption</span> <li style="background: captiontext;"> <span>activecaptiontext</span>/li> <li style="background: appworkspace;"><span>appworkspace</span> <li style="background: buttonface;"><span>control</span> <li style="background: buttonshadow;"><span>controldark</span> <li style="background: threeddarkshadow;"> <span>controldarkdark</span> <li style="background: buttonface;"><span>controllight</span> <li style="background: buttonhighlight;"> <span>controllightlight</span> <li style="background: buttontext;"><span>controltext</span> <li style="background: background;"><span>desktop</span> <li style="background: graytext;"><span>graytext</span> <li style="background: highlight;"><span>highlight</span> <li style="background: highlighttext;"> <span>highlighttext</span> <li style="background: highlight;"><span>hottrack</span> <li style="background: inactiveborder;"> <span>inactiveborder</span> <li style="background: inactivecaption;"> <span>inactivecaption</span> <li style="background: inactivecaptiontext;"> <span>inactivecaptiontext</span> <li style="background: infobackground;"><span>info</span> <li style="background: infotext;"><span>infotext</span> <li style="background: menu;"><span>menu</span> <li style="background: menutext;"><span>menutext</span> <li style="background: scrollbar;"><span>scrollbar</span> <li style="background: window;"><span>window</span> <li style="background: windowframe;"><span>windowframe</span> <li style="background: windowtext;"><span>windowtext</span> <li style="background: Transparent;"><span>Transparent</span> 326 Copyright GrapeCity inc. All rights reserved.

328 <li style="background: AliceBlue;"><span>AliceBlue</span> <li style="background: AntiqueWhite;"><span>AntiqueWhite</span> <li style="background: Aqua;"><span>Aqua</span> <li style="background: Aquamarine;"><span>Aquamarine</span> <li style="background: Azure;"><span>Azure</span> <li style="background: Beige;"><span>Beige</span> <li style="background: Bisque;"><span>Bisque</span> <li style="background: Black;"><span>Black</span> <li style="background: BlanchedAlmond;"> <span>blanchedalmond</span> <li style="background: Blue;"><span>Blue</span> <li style="background: BlueViolet;"><span>BlueViolet</span> <li style="background: Brown;"><span>Brown</span> <li style="background: BurlyWood;"><span>BurlyWood</span> <li style="background: CadetBlue;"><span>CadetBlue</span> <li style="background: Chartreuse;"><span>Chartreuse</span> <li style="background: Chocolate;"><span>Chocolate</span> <li style="background: Coral;"><span>Coral</span> <li style="background: CornflowerBlue;"> <span>cornflowerblue</span> <li style="background: Cornsilk;"><span>Cornsilk</span> <li style="background: Crimson;"><span>Crimson</span> <li style="background: Cyan;"><span>Cyan</span> <li style="background: DarkBlue;"><span>DarkBlue</span> <li style="background: DarkCyan;"><span>DarkCyan</span> <li style="background: DarkGoldenrod;"> <span>darkgoldenrod</span> <li style="background: DarkGray;"><span>DarkGray</span> <li style="background: DarkGreen;"><span>DarkGreen</span> <li style="background: DarkKhaki;"><span>DarkKhaki</span> <li style="background: DarkMagenta;"><span>DarkMagenta</span> <li style="background: DarkOliveGreen;"> <span>darkolivegreen</span> <li style="background: DarkOrange;"><span>DarkOrange</span> <li style="background: DarkOrchid;"><span>DarkOrchid</span> <li style="background: DarkRed;"><span>DarkRed</span> <li style="background: DarkSalmon;"><span>DarkSalmon</span> <li style="background: DarkSeaGreen;"><span>DarkSeaGreen</span> <li style="background: DarkSlateBlue;"> <span>darkslateblue</span> <li style="background: DarkSlateGray;"> <span>darkslategray</span> <li style="background: DarkTurquoise;"> <span>darkturquoise</span> <li style="background: DarkViolet;"><span>DarkViolet</span> <li style="background: DeepPink;"><span>DeepPink</span> <li style="background: DeepSkyBlue;"><span>DeepSkyBlue</span> <li style="background: DimGray;"><span>DimGray</span> 327 Copyright GrapeCity inc. All rights reserved.

329 <li style="background: DodgerBlue;"><span>DodgerBlue</span> <li style="background: Firebrick;"><span>Firebrick</span> <li style="background: FloralWhite;"><span>FloralWhite</span> <li style="background: ForestGreen;"><span>ForestGreen</span> <li style="background: Fuchsia;"><span>Fuchsia</span> <li style="background: Gainsboro;"><span>Gainsboro</span> <li style="background: GhostWhite;"><span>GhostWhite</span> <li style="background: Gold;"><span>Gold</span> <li style="background: Goldenrod;"><span>Goldenrod</span> <li style="background: Gray;"><span>Gray</span> <li style="background: Green;"><span>Green</span> <li style="background: GreenYellow;"><span>GreenYellow</span> <li style="background: Honeydew;"><span>Honeydew</span> <li style="background: HotPink;"><span>HotPink</span> <li style="background: IndianRed;"><span>IndianRed</span> <li style="background: Indigo;"><span>Indigo</span> <li style="background: Ivory;"><span>Ivory</span> <li style="background: Khaki;"><span>Khaki</span> <li style="background: Lavender;"><span>Lavender</span> <li style="background: LavenderBlush;"> <span>lavenderblush</span> <li style="background: LawnGreen;"><span>LawnGreen</span> <li style="background: LemonChiffon;"><span>LemonChiffon</span> <li style="background: LightBlue;"><span>LightBlue</span> <li style="background: LightCoral;"><span>LightCoral</span> <li style="background: LightCyan;"><span>LightCyan</span> <li style="background: LightGoldenrodYellow;"> <span>lightgoldenrodyellow</span> <li style="background: LightGrey;"><span>LightGray</span> <li style="background: LightGreen;"><span>LightGreen</span> <li style="background: LightPink;"><span>LightPink</span> <li style="background: LightSalmon;"><span>LightSalmon</span> <li style="background: LightSeaGreen;"> <span>lightseagreen</span> <li style="background: LightSkyBlue;"><span>LightSkyBlue</span> <li style="background: LightSlateGray;"> <span>lightslategray</span> <li style="background: LightSteelBlue;"> <span>lightsteelblue</span> <li style="background: LightYellow;"><span>LightYellow</span> <li style="background: Lime;"><span>Lime</span> <li style="background: LimeGreen;"><span>LimeGreen</span> <li style="background: Linen;"><span>Linen</span> <li style="background: Magenta;"><span>Magenta</span> <li style="background: Maroon;"><span>Maroon</span> 328 Copyright GrapeCity inc. All rights reserved.

330 <li style="background: MediumAquamarine;"> <span>mediumaquamarine</span> <li style="background: MediumBlue;"><span>MediumBlue</span> <li style="background: MediumOrchid;"><span>MediumOrchid</span> <li style="background: MediumPurple;"><span>MediumPurple</span> <li style="background: MediumSeaGreen;"> <span>mediumseagreen</span> <li style="background: MediumSlateBlue;"> <span>mediumslateblue</span> <li style="background: MediumSpringGreen;"> <span>mediumspringgreen</span> <li style="background: MediumTurquoise;"> <span>mediumturquoise</span> <li style="background: MediumVioletRed;"> <span>mediumvioletred</span> <li style="background: MidnightBlue;"><span>MidnightBlue</span> <li style="background: MintCream;"><span>MintCream</span> <li style="background: MistyRose;"><span>MistyRose</span> <li style="background: Moccasin;"><span>Moccasin</span> <li style="background: NavajoWhite;"><span>NavajoWhite</span> <li style="background: Navy;"><span>Navy</span> <li style="background: OldLace;"><span>OldLace</span> <li style="background: Olive;"><span>Olive</span> <li style="background: OliveDrab;"><span>OliveDrab</span> <li style="background: Orange;"><span>Orange</span> <li style="background: OrangeRed;"><span>OrangeRed</span> <li style="background: Orchid;"><span>Orchid</span> <li style="background: PaleGoldenrod;"> <span>palegoldenrod</span> <li style="background: PaleGreen;"><span>PaleGreen</span> <li style="background: PaleTurquoise;"> <span>paleturquoise</span> <li style="background: PaleVioletRed;"> <span>palevioletred</span> <li style="background: PapayaWhip;"><span>PapayaWhip</span> <li style="background: PeachPuff;"><span>PeachPuff</span> <li style="background: Peru;"><span>Peru</span> <li style="background: Pink;"><span>Pink</span> <li style="background: Plum;"><span>Plum</span> <li style="background: PowderBlue;"><span>PowderBlue</span> <li style="background: Purple;"><span>Purple</span> <li style="background: Red;"><span>Red</span> <li style="background: RosyBrown;"><span>RosyBrown</span> <li style="background: RoyalBlue;"><span>RoyalBlue</span> <li style="background: SaddleBrown;"><span>SaddleBrown</span> <li style="background: Salmon;"><span>Salmon</span> <li style="background: SandyBrown;"><span>SandyBrown</span> <li style="background: SeaGreen;"><span>SeaGreen</span> 329 Copyright GrapeCity inc. All rights reserved.

331 <li style="background: SeaShell;"><span>SeaShell</span> <li style="background: Sienna;"><span>Sienna</span> <li style="background: Silver;"><span>Silver</span> <li style="background: SkyBlue;"><span>SkyBlue</span> <li style="background: SlateBlue;"><span>SlateBlue</span> <li style="background: SlateGray;"><span>SlateGray</span> <li style="background: Snow;"><span>Snow</span> <li style="background: SpringGreen;"><span>SpringGreen</span/li> <li style="background: SteelBlue;"><span>SteelBlue</span> <li style="background: Tan;"><span>Tan</span> <li style="background: Teal;"><span>Teal</span> <li style="background: Thistle;"><span>Thistle</span> <li style="background: Tomato;"><span>Tomato</span> <li style="background: Turquoise;"><span>Turquoise</span> <li style="background: Violet;"><span>Violet</span> <li style="background: Wheat;"><span>Wheat</span> <li style="background: White;"><span>White</span> <li style="background: WhiteSmoke;"><span>WhiteSmoke</span> <li style="background: Yellow;"><span>Yellow</span> <li style="background: YellowGreen;"><span>YellowGreen</span> Black;"><span>Black</span> <li style=""><span>buttonhighlight</span> <li style=""><span>buttonhighlight</span> <li style="background: activecaption;"> <span>gradientactivecaption</span> <li style="background: inactivecaption;"> <span>gradientinactivecaption</span> <li style="background: menu;"><span>menubar</span> <li style="background: highlighttext;"> <span>menuhighlight</span> </ul> <div id="superpanel3"> <div class="elements"> <ul> <li style="background: activeborder;"><span>activeborder</span> <li style="background: activecaption;"> <span>activecaption</span> <li style="background: captiontext;"> <span>activecaptiontext</span> <li style="background: appworkspace;"><span>appworkspace</span> <li style="background: buttonface;"><span>control</span> <li style="background: buttonshadow;"><span>controldark</span> <li style="background: threeddarkshadow;"> <span>controldarkdark</span> <li style="background: buttonface;"><span>controllight</span> 330 Copyright GrapeCity inc. All rights reserved.

332 <li style="background: buttonhighlight;"> <span>controllightlight</span> <li style="background: buttontext;"><span>controltext</span> <li style="background: background;"><span>desktop</span> <li style="background: graytext;"><span>graytext</span> <li style="background: highlight;"><span>highlight</span> <li style="background: highlighttext;"> <span>highlighttext</span> <li style="background: highlight;"><span>hottrack</span> <li style="background: inactiveborder;"> <span>inactiveborder</span> <li style="background: inactivecaption;"> <span>inactivecaption</span> <li style="background: inactivecaptiontext;"> <span>inactivecationtext</span> <li style="background: infobackground;"><span>info</span> <li style="background: infotext;"><span>infotext</span> <li style="background: menu;"><span>menu</span> <li style="background: menutext;"><span>menutext</span> <li style="background: scrollbar;"><span>scrollbar</span> <li style="background: window;"><span>window</span> <li style="background: windowframe;"><span>windowframe</span> <li style="background: windowtext;"><span>windowtext</span> <li style="background: Transparent;"><span>Transparent</span> <li style="background: AliceBlue;"><span>AliceBlue</span> <li style="background: AntiqueWhite;"><span>AntiqueWhite</span> <li style="background: Aqua;"><span>Aqua</span> <li style="background: Aquamarine;"><span>Aquamarine</span> <li style="background: Azure;"><span>Azure</span> <li style="background: Beige;"><span>Beige</span> <li style="background: Bisque;"><span>Bisque</span> <li style="background: Black;"><span>Black</span> <li style="background: BlanchedAlmond;"> <span>blanchedalmond</span> <li style="background: Blue;"><span>Blue</span> <li style="background: BlueViolet;"><span>BlueViolet</span> <li style="background: Brown;"><span>Brown</span> <li style="background: BurlyWood;"><span>BurlyWood</span> <li style="background: CadetBlue;"><span>CadetBlue</span> <li style="background: Chartreuse;"><span>Chartreuse</span> <li style="background: Chocolate;"><span>Chocolate</span> <li style="background: Coral;"><span>Coral</span> <li style="background: CornflowerBlue;"> <span>cornflowerblue</span> <li style="background: Cornsilk;"><span>Cornsilk</span> <li style="background: Crimson;"><span>Crimson</span> <li style="background: Cyan;"><span>Cyan</span> <li style="background: DarkBlue;"><span>DarkBlue</span> <li style="background: DarkCyan;"><span>DarkCyan</span> 331 Copyright GrapeCity inc. All rights reserved.

333 <li style="background: DarkGoldenrod;"> <span>darkgoldenrod</span> <li style="background: DarkGray;"><span>DarkGray</span> <li style="background: DarkGreen;"><span>DarkGreen</span> <li style="background: DarkKhaki;"><span>DarkKhaki</span> <li style="background: DarkMagenta;"><span>DarkMagenta</span> <li style="background: DarkOliveGreen;"> <span>darkolivegreen</span> <li style="background: DarkOrange;"><span>DarkOrange</span> <li style="background: DarkOrchid;"><span>DarkOrchid</span> <li style="background: DarkRed;"><span>DarkRed</span> <li style="background: DarkSalmon;"><span>DarkSalmon</span> <li style="background: DarkSeaGreen;"><span>DarkSeaGreen</span> <li style="background: DarkSlateBlue;"> <span>darkslateblue</span> <li style="background: DarkSlateGray;"> <span>darkslategray</span> <li style="background: DarkTurquoise;"> <span>darkturquoise</span> <li style="background: DarkViolet;"><span>DarkViolet</span> <li style="background: DeepPink;"><span>DeepPink</span> <li style="background: DeepSkyBlue;"><span>DeepSkyBlue</span> <li style="background: DimGray;"><span>DimGray</span> <li style="background: DodgerBlue;"><span>DodgerBlue</span> <li style="background: Firebrick;"><span>Firebrick</span> <li style="background: FloralWhite;"><span>FloralWhite</span> <li style="background: ForestGreen;"><span>ForestGreen</span> <li style="background: Fuchsia;"><span>Fuchsia</span> <li style="background: Gainsboro;"><span>Gainsboro</span> <li style="background: GhostWhite;"><span>GhostWhite</span> <li style="background: Gold;"><span>Gold</span> <li style="background: Goldenrod;"><span>Goldenrod</span> <li style="background: Gray;"><span>Gray</span> <li style="background: Green;"><span>Green</span> <li style="background: GreenYellow;"><span>GreenYellow</span> <li style="background: Honeydew;"><span>Honeydew</span> <li style="background: HotPink;"><span>HotPink</span> <li style="background: IndianRed;"><span>IndianRed</span> <li style="background: Indigo;"><span>Indigo</span> <li style="background: Ivory;"><span>Ivory</span> <li style="background: Khaki;"><span>Khaki</span> <li style="background: Lavender;"><span>Lavender</span> <li style="background: LavenderBlush;"> <span>lavenderblush</span> <li style="background: LawnGreen;"><span>LawnGreen</span> <li style="background: LemonChiffon;"><span>LemonChiffon</span> 332 Copyright GrapeCity inc. All rights reserved.

334 <li style="background: LightBlue;"><span>LightBlue</span> <li style="background: LightCoral;"><span>LightCoral</span> <li style="background: LightCyan;"><span>LightCyan</span> <li style="background: LightGoldenrodYellow;"> <span>lightgoldenrodyellow</span> <li style="background: LightGrey;"><span>LightGray</span> <li style="background: LightGreen;"><span>LightGreen</span> <li style="background: LightPink;"><span>LightPink</span> <li style="background: LightSalmon;"><span>LightSalmon</span> <li style="background: LightSeaGreen;"> <span>lightseagreen</span> <li style="background: LightSkyBlue;"><span>LightSkyBlue</span> <li style="background: LightSlateGray;"> <span>lightslategray</span> <li style="background: LightSteelBlue;"> <span>lightsteelblue</span> <li style="background: LightYellow;"><span>LightYellow</span> <li style="background: Lime;"><span>Lime</span> <li style="background: LimeGreen;"><span>LimeGreen</span> <li style="background: Linen;"><span>Linen</span> <li style="background: Magenta;"><span>Magenta</span> <li style="background: Maroon;"><span>Maroon</span> <li style="background: MediumAquamarine;"> <span>mediumaquamarine</span> <li style="background: MediumBlue;"><span>MediumBlue</span> <li style="background: MediumOrchid;"><span>MediumOrchid</span> <li style="background: MediumPurple;"><span>MediumPurple</span> <li style="background: MediumSeaGreen;"> <span>mediumseagreen</span> <li style="background: MediumSlateBlue;"> <span>mediumslateblue</span> <li style="background: MediumSpringGreen;"> <span>mediumspringgreen</span> <li style="background: MediumTurquoise;"> <span>mediumturquoise</span> <li style="background: MediumVioletRed;"> <span>mediumvioletred</span> <li style="background: MidnightBlue;"><span>MidnightBlue</span> <li style="background: MintCream;"><span>MintCream</span> <li style="background: MistyRose;"><span>MistyRose</span> <li style="background: Moccasin;"><span>Moccasin</span> <li style="background: NavajoWhite;"><span>NavajoWhite</span> <li style="background: Navy;"><span>Navy</span> <li style="background: OldLace;"><span>OldLace</span> <li style="background: Olive;"><span>Olive</span> 333 Copyright GrapeCity inc. All rights reserved.

335 <li style="background: OliveDrab;"><span>OliveDrab</span> <li style="background: Orange;"><span>Orange</span> <li style="background: OrangeRed;"><span>OrangeRed</span> <li style="background: Orchid;"><span>Orchid</span> <li style="background: PaleGoldenrod;"> <span>palegoldenrod</span> <li style="background: PaleGreen;"><span>PaleGreen</span> <li style="background: PaleTurquoise;"> <span>paleturquoise</span> <li style="background: PaleVioletRed;"> <span>palevioletred</span> <li style="background: PapayaWhip;"><span>PapayaWhip</span> <li style="background: PeachPuff;"><span>PeachPuff</span> <li style="background: Peru;"><span>Peru</span> <li style="background: Pink;"><span>Pink</span> <li style="background: Plum;"><span>Plum</span> <li style="background: PowderBlue;"><span>PowderBlue</span> <li style="background: Purple;"><span>Purple</span> <li style="background: Red;"><span>Red</span> <li style="background: RosyBrown;"><span>RosyBrown</span> <li style="background: RoyalBlue;"><span>RoyalBlue</span> <li style="background: SaddleBrown;"><span>SaddleBrown</span> <li style="background: Salmon;"><span>Salmon</span> <li style="background: SandyBrown;"><span>SandyBrown</span> <li style="background: SeaGreen;"><span>SeaGreen</span> <li style="background: SeaShell;"><span>SeaShell</span> <li style="background: Sienna;"><span>Sienna</span> <li style="background: Silver;"><span>Silver</span> <li style="background: SkyBlue;"><span>SkyBlue</span> <li style="background: SlateBlue;"><span>SlateBlue</span> <li style="background: SlateGray;"><span>SlateGray</span> <li style="background: Snow;"><span>Snow</span> <li style="background: SpringGreen;"><span>SpringGreen</span> <li style="background: SteelBlue;"><span>SteelBlue</span> <li style="background: Tan;"><span>Tan</span> <li style="background: Teal;"><span>Teal</span> <li style="background: Thistle;"><span>Thistle</span> <li style="background: Tomato;"><span>Tomato</span> <li style="background: Turquoise;"><span>Turquoise</span> <li style="background: Violet;"><span>Violet</span> <li style="background: Wheat;"><span>Wheat</span> <li style="background: White;"><span>White</span> <li style="background: WhiteSmoke;"><span>WhiteSmoke</span> <li style="background: Yellow;"><span>Yellow</span> <li style="background: YellowGreen;"><span>YellowGreen</span> <li style=""><span>buttonface</span> <li style=""><span>buttonhighlight</span> <li style=""><span>buttonshadow</span> <li style="background: activecaption;"> 334 Copyright GrapeCity inc. All rights reserved.

336 <span>gradientactivecaption</span> <li style="background: inactivecaption;"> <span>gradientinactivecaption</span> <li style="background: menu;"><span>menubar</span> <li style="background: highlighttext;"> <span>menuhighlight</span> </ul> 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では マークアップを 追 加 し スーパーパネルに 表 示 されるコンテンツを 追 加 しました ここでは jquery スクリプトを 追 加 し ウィジェットを 初 期 化 できます 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 し wijsuperpanel ウィジェットを 初 期 化 しま す <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#superpanel2").wijsuperpanel({ allowresize: true, hscroller: { scrollmode: 'scrollbar,buttons', vscroller: { scrollmode: 'scrollbar,buttons' $("#superpanel3").wijsuperpanel({ hscroller: { scrollmode: 'edge', vscroller: { scrollmode: 'edge' </script> 手 順 3:プロジェクトの 実 行 この 手 順 では アプリケーションを 実 行 し 実 行 時 の 動 作 を 観 察 します 1. [F5] を 押 して アプリケーションを 実 行 します 2. 以 下 を 観 察 します 1 番 目 のスーパーパネルで 下 矢 印 をクリックして 下 ヘスクロールした 後 上 矢 印 をクリックして 上 ヘスクロールし て 戻 ります 335 Copyright GrapeCity inc. All rights reserved.

337 クリックすると 上 下 または 左 右 の 両 方 向 にスクロールする4つの 矢 印 があることに 注 意 してください カーソルをスーパーパネルの 下 端 に 置 くと スーパーパネルが 下 へスクロールすることに 注 意 してください カーソ ルを 左 端 に 置 くと 左 へスクロールし 右 端 に 置 くと 右 へスクロールできます このタイプのスクロールはエッジスク ロールと 呼 ばれます コンボボックスのドロップダウン 矢 印 をクリックします コンボボックスの 項 目 が 下 方 向 に 移 動 するとアニメーション が 表 示 されることに 注 意 してください アニメーションは 次 のコードを 使 用 したときに 表 示 されます showinganimation: { effect: "blind", duration: 2500, hidinganimation: { effect: "blind", Wijsuperpanel タスク 別 ヘルプ タスク 別 ヘルプは ASP.NET のプログラミングに 精 通 し コントロールの 一 般 的 な 使 用 方 法 を 理 解 しているユーザーを 対 象 とし ています ヘルプに 記 述 された 手 順 に 従 うことによって wijsuperpanel のさまざまな 機 能 をデモンストレーションするプロ ジェクトを 作 成 して wijsuperpanel コントロールの 用 途 を 理 解 することができます クライアント 側 スクロール 次 のコードに 類 似 したコードを 使 用 して クライアント 側 スクロールを 有 効 にできます <script id="scriptinit" type="text/javascript"> $(function () { 336 Copyright GrapeCity inc. All rights reserved.

338 $("#superpanel").wijsuperpanel(); function scroll(x, y) { try { var x = parseint($('#inputx').val()); var y = parseint($('#inputy').val()); catch (e) { return; $("#superpanel").wijsuperpanel('scrollto', x, y); </script> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <label for="inputx"> X の 位 置 </label> <input type="text" id="inputx" value="100" /> <label for="inputy"> Y の 位 置 </label> <input type="text" id="inputy" value="100" /> <input type="button" id="doscroll" value="scroll" onclick="scroll()" /> <!-- オプションマークアップの 終 了 --> SuperPanel のアニメーションオプションの 設 定 animationoptions を 設 定 して パネルのスクロール 時 にアニメーションを 表 示 させるには 次 のコードを 使 用 します <style type="text/css">.elements ul { padding: 8px 0 0 8px; margin: 0px; width: 840px; float: left; position: relative; zoom: 1;.elements ul li { background: #fff; color: #fff; font-weight: 900; height: 70px; margin: 0 8px 8px 0; padding: 0; 337 Copyright GrapeCity inc. All rights reserved.

339 padding-top: 62px; position: relative; text-align: center; width: 132px; text-shadow: 1px 1px 2px #000000;.elements li { float: left; list-style: none; </style> <script id="scriptinit" type="text/javascript"> $(document).ready(function () { // すべての jquery の 必 須 部 分 をここに 入 れます $('#superpanel').wijsuperpanel(); function changeproperties() { var animationoptions = { queue: $('#chkqueue').val(), easing: $('#seleasing').val() ; $('#superpanel').wijsuperpanel({ animationoptions: animationoptions </script> <h2> 概 要 </h2> <div class="main demo"> <!-- デモマークアップの 開 始 --> <div id="superpanel" style="width: 754px; height: 300px;"> <div class="elements"> <ul> <li style="background: none repeat scroll 0% 0% activeborder;"> <span>activeborder</span> <li style="background: none repeat scroll 0% 0% activecaption;"> <span>activecaption</span> <li style="background: none repeat scroll 0% 0% captiontext;"> <span>activecaptiontext</span> <li style="background: none repeat scroll 0% 0% appworkspace;"> <span>appworkspace</span> <li style="background: none repeat scroll 0% 0% buttonface;"> <span>control</span> <li style="background: none repeat scroll 0% 0% buttonshadow;"> <span>controldark</span> <li style="background: none repeat scroll 0% 0% threeddarkshadow;"> 338 Copyright GrapeCity inc. All rights reserved.

340 <span>controldarkdark</span> <li style="background: none repeat scroll 0% 0% buttonface;"> <span>controllight</span> <li style="background: none repeat scroll 0% 0% buttonhighlight;"> <span>controllightlight</span> <li style="background: none repeat scroll 0% 0% buttontext;"> <span>controltext</span> <li style="background: none repeat scroll 0% 0% background;"> <span>desktop</span> <li style="background: none repeat scroll 0% 0% graytext;"> <span>graytext</span> <li style="background: none repeat scroll 0% 0% highlight;"> <span>highlight</span> <li style="background: none repeat scroll 0% 0% highlighttext;"> <span>highlighttext</span> <li style="background: none repeat scroll 0% 0% highlight;"> <span>hottrack</span> <li style="background: none repeat scroll 0% 0% inactiveborder;"> <span>inactiveborder</span> <li style="background: none repeat scroll 0% 0% inactivecaption;"> <span>inactivecaption</span> <li style="background: none repeat scroll 0% 0% inactivecaptiontext;"><span>inactivecaptiontext</span> <li style="background: none repeat scroll 0% 0% infobackground;"> <span>info</span> <li style="background: none repeat scroll 0% 0% infotext;"> <span>infotext</span> <li style="background: none repeat scroll 0% 0% menu;"> <span>menu</span> <li style="background: none repeat scroll 0% 0% menutext;"> <span>menutext</span> <li style="background: none repeat scroll 0% 0% scrollbar;"> <span>scrollbar</span> <li style="background: none repeat scroll 0% 0% window;"> <span>window</span> <li style="background: none repeat scroll 0% 0% windowframe;"> 339 Copyright GrapeCity inc. All rights reserved.

341 <span>windowframe</span> <li style="background: none repeat scroll 0% 0% windowtext;"> <span>windowtext</span> <li style="background: none repeat scroll 0% 0% Transparent;"> <span>transparent</span> <li style="background: none repeat scroll 0% 0% AliceBlue;"> <span>aliceblue</span> <li style="background: none repeat scroll 0% 0% AntiqueWhite;"> <span>antiquewhite</span> <li style="background: none repeat scroll 0% 0% Aqua;"> <span>aqua</span> <li style="background: none repeat scroll 0% 0% Aquamarine;"> <span>aquamarine</span> <li style="background: none repeat scroll 0% 0% Azure;"> <span>azure</span> <li style="background: none repeat scroll 0% 0% Beige;"> <span>beige</span> <li style="background: none repeat scroll 0% 0% Bisque;"> <span>bisque</span> <li style="background: none repeat scroll 0% 0% Black;"> <span>black</span> <li style="background: none repeat scroll 0% 0% BlanchedAlmond;"> <span>blanchedalmond</span> <li style="background: none repeat scroll 0% 0% Blue;"> <span>blue</span> <li style="background: none repeat scroll 0% 0% BlueViolet;"> <span>blueviolet</span> <li style="background: none repeat scroll 0% 0% Brown;"> <span>brown</span> <li style="background: none repeat scroll 0% 0% BurlyWood;"> <span>burlywood</span> <li style="background: none repeat scroll 0% 0% CadetBlue;"> <span>cadetblue</span> <li style="background: none repeat scroll 0% 0% Chartreuse;"> <span>chartreuse</span> <li style="background: none repeat scroll 0% 0% Chocolate;"> <span>chocolate</span> <li style="background: none repeat scroll 0% 0% Coral;"> <span>coral</span> <li style="background: none repeat scroll 0% 0% CornflowerBlue;"> 340 Copyright GrapeCity inc. All rights reserved.

342 <span>cornflowerblue</span> <li style="background: none repeat scroll 0% 0% Cornsilk;"> <span>cornsilk</span> <li style="background: none repeat scroll 0% 0% Crimson;"> <span>crimson</span> <li style="background: none repeat scroll 0% 0% Cyan;"> <span>cyan</span> <li style="background: none repeat scroll 0% 0% DarkBlue;"> <span>darkblue</span> <li style="background: none repeat scroll 0% 0% DarkCyan;"> <span>darkcyan</span> <li style="background: none repeat scroll 0% 0% DarkGoldenrod;"> <span>darkgoldenrod</span> <li style="background: none repeat scroll 0% 0% DarkGray;"> <span>darkgray</span> <li style="background: none repeat scroll 0% 0% DarkGreen;"> <span>darkgreen</span> <li style="background: none repeat scroll 0% 0% DarkKhaki;"> <span>darkkhaki</span> <li style="background: none repeat scroll 0% 0% DarkMagenta;"> <span>darkmagenta</span> <li style="background: none repeat scroll 0% 0% DarkOliveGreen;"> <span>darkolivegreen</span> <li style="background: none repeat scroll 0% 0% DarkOrange;"> <span>darkorange</span> <li style="background: none repeat scroll 0% 0% DarkOrchid;"> <span>darkorchid</span> <li style="background: none repeat scroll 0% 0% DarkRed;"> <span>darkred</span> <li style="background: none repeat scroll 0% 0% DarkSalmon;"> <span>darksalmon</span> <li style="background: none repeat scroll 0% 0% DarkSeaGreen;"> <span>darkseagreen</span> <li style="background: none repeat scroll 0% 0% DarkSlateBlue;"> <span>darkslateblue</span> 341 Copyright GrapeCity inc. All rights reserved.

343 <li style="background: none repeat scroll 0% 0% DarkSlateGray;"> <span>darkslategray</span> <li style="background: none repeat scroll 0% 0% DarkTurquoise;"> <span>darkturquoise</span> <li style="background: none repeat scroll 0% 0% DarkViolet;"> <span>darkviolet</span> <li style="background: none repeat scroll 0% 0% DeepPink;"> <span>deeppink</span> <li style="background: none repeat scroll 0% 0% DeepSkyBlue;"> <span>deepskyblue</span> <li style="background: none repeat scroll 0% 0% DimGray;"> <span>dimgray</span> <li style="background: none repeat scroll 0% 0% DodgerBlue;"> <span>dodgerblue</span> <li style="background: none repeat scroll 0% 0% Firebrick;"> <span>firebrick</span> <li style="background: none repeat scroll 0% 0% FloralWhite;"> <span>floralwhite</span> <li style="background: none repeat scroll 0% 0% ForestGreen;"> <span>forestgreen</span> <li style="background: none repeat scroll 0% 0% Fuchsia;"> <span>fuchsia</span> <li style="background: none repeat scroll 0% 0% Gainsboro;"> <span>gainsboro</span> <li style="background: none repeat scroll 0% 0% GhostWhite;"> <span>ghostwhite</span> <li style="background: none repeat scroll 0% 0% Gold;"> <span>gold</span> <li style="background: none repeat scroll 0% 0% Goldenrod;"> <span>goldenrod</span> <li style="background: none repeat scroll 0% 0% Gray;"> <span>gray</span> <li style="background: none repeat scroll 0% 0% Green;"> <span>green</span> <li style="background: none repeat scroll 0% 0% GreenYellow;"> <span>greenyellow</span> <li style="background: none repeat scroll 0% 0% Honeydew;"> <span>honeydew</span> 342 Copyright GrapeCity inc. All rights reserved.

344 <li style="background: none repeat scroll 0% 0% HotPink;"> <span>hotpink</span> <li style="background: none repeat scroll 0% 0% IndianRed;"> <span>indianred</span> <li style="background: none repeat scroll 0% 0% Indigo;"> <span>indigo</span> <li style="background: none repeat scroll 0% 0% Ivory;"> <span>ivory</span> <li style="background: none repeat scroll 0% 0% Khaki;"> <span>khaki</span> <li style="background: none repeat scroll 0% 0% Lavender;"> <span>lavender</span> <li style="background: none repeat scroll 0% 0% LavenderBlush;"> <span>lavenderblush</span> <li style="background: none repeat scroll 0% 0% LawnGreen;"> <span>lawngreen</span> <li style="background: none repeat scroll 0% 0% LemonChiffon;"> <span>lemonchiffon</span> <li style="background: none repeat scroll 0% 0% LightBlue;"> <span>lightblue</span> <li style="background: none repeat scroll 0% 0% LightCoral;"> <span>lightcoral</span> <li style="background: none repeat scroll 0% 0% LightCyan;"> <span>lightcyan</span> <li style="background: none repeat scroll 0% 0% LightGoldenrodYellow;"><span>LightGoldenrodYellow</span> <li style="background: none repeat scroll 0% 0% LightGrey;"> <span>lightgray</span> <li style="background: none repeat scroll 0% 0% LightGreen;"> <span>lightgreen</span> <li style="background: none repeat scroll 0% 0% LightPink;"> <span>lightpink</span> <li style="background: none repeat scroll 0% 0% LightSalmon;"> <span>lightsalmon</span> 343 Copyright GrapeCity inc. All rights reserved.

345 <li style="background: none repeat scroll 0% 0% LightSeaGreen;"> <span>lightseagreen</span> <li style="background: none repeat scroll 0% 0% LightSkyBlue;"> <span>lightskyblue</span> <li style="background: none repeat scroll 0% 0% LightSlateGray;"> <span>lightslategray</span> <li style="background: none repeat scroll 0% 0% LightSteelBlue;"> <span>lightsteelblue</span> <li style="background: none repeat scroll 0% 0% LightYellow;"> <span>lightyellow</span> <li style="background: none repeat scroll 0% 0% Lime;"> <span>lime</span> <li style="background: none repeat scroll 0% 0% LimeGreen;"> <span>limegreen</span> <li style="background: none repeat scroll 0% 0% Linen;"> <span>linen</span> <li style="background: none repeat scroll 0% 0% Magenta;"> <span>magenta</span> <li style="background: none repeat scroll 0% 0% Maroon;"> <span>maroon</span> <li style="background: none repeat scroll 0% 0% MediumAquamarine;"> <span>mediumaquamarine</span> <li style="background: none repeat scroll 0% 0% MediumBlue;"> <span>mediumblue</span> <li style="background: none repeat scroll 0% 0% MediumOrchid;"> <span>mediumorchid</span> <li style="background: none repeat scroll 0% 0% MediumPurple;"> <span>mediumpurple</span> <li style="background: none repeat scroll 0% 0% MediumSeaGreen;"> <span>mediumseagreen</span> <li style="background: none repeat scroll 0% 0% MediumSlateBlue;"> <span>mediumslateblue</span> <li style="background: none repeat scroll 0% 0% MediumSpringGreen;"> <span>mediumspringgreen</span> <li style="background: none repeat scroll 0% 0% MediumTurquoise;"> <span>mediumturquoise</span> 344 Copyright GrapeCity inc. All rights reserved.

346 <li style="background: none repeat scroll 0% 0% MediumVioletRed;"> <span>mediumvioletred</span> <li style="background: none repeat scroll 0% 0% MidnightBlue;"> <span>midnightblue</span> <li style="background: none repeat scroll 0% 0% MintCream;"> <span>mintcream</span> <li style="background: none repeat scroll 0% 0% MistyRose;"> <span>mistyrose</span> <li style="background: none repeat scroll 0% 0% Moccasin;"> <span>moccasin</span> <li style="background: none repeat scroll 0% 0% NavajoWhite;"> <span>navajowhite</span> <li style="background: none repeat scroll 0% 0% Navy;"> <span>navy</span> <li style="background: none repeat scroll 0% 0% OldLace;"> <span>oldlace</span> <li style="background: none repeat scroll 0% 0% Olive;"> <span>olive</span> <li style="background: none repeat scroll 0% 0% OliveDrab;"> <span>olivedrab</span> <li style="background: none repeat scroll 0% 0% Orange;"> <span>orange</span> <li style="background: none repeat scroll 0% 0% OrangeRed;"> <span>orangered</span> <li style="background: none repeat scroll 0% 0% Orchid;"> <span>orchid</span> <li style="background: none repeat scroll 0% 0% PaleGoldenrod;"> <span>palegoldenrod</span> <li style="background: none repeat scroll 0% 0% PaleGreen;"> <span>palegreen</span> <li style="background: none repeat scroll 0% 0% PaleTurquoise;"> <span>paleturquoise</span> <li style="background: none repeat scroll 0% 0% PaleVioletRed;"> <span>palevioletred</span> 345 Copyright GrapeCity inc. All rights reserved.

347 <li style="background: none repeat scroll 0% 0% PapayaWhip;"> <span>papayawhip</span> <li style="background: none repeat scroll 0% 0% PeachPuff;"> <span>peachpuff</span> <li style="background: none repeat scroll 0% 0% Peru;"> <span>peru</span> <li style="background: none repeat scroll 0% 0% Pink;"> <span>pink</span> <li style="background: none repeat scroll 0% 0% Plum;"> <span>plum</span> <li style="background: none repeat scroll 0% 0% PowderBlue;"> <span>powderblue</span> <li style="background: none repeat scroll 0% 0% Purple;"> <span>purple</span> <li style="background: none repeat scroll 0% 0% Red;"> <span>red</span> <li style="background: none repeat scroll 0% 0% RosyBrown;"> <span>rosybrown</span> <li style="background: none repeat scroll 0% 0% RoyalBlue;"> <span>royalblue</span> <li style="background: none repeat scroll 0% 0% SaddleBrown;"> <span>saddlebrown</span> <li style="background: none repeat scroll 0% 0% Salmon;"> <span>salmon</span> <li style="background: none repeat scroll 0% 0% SandyBrown;"> <span>sandybrown</span> <li style="background: none repeat scroll 0% 0% SeaGreen;"> <span>seagreen</span> <li style="background: none repeat scroll 0% 0% SeaShell;"> <span>seashell</span> <li style="background: none repeat scroll 0% 0% Sienna;"> <span>sienna</span> <li style="background: none repeat scroll 0% 0% Silver;"> <span>silver</span> <li style="background: none repeat scroll 0% 0% SkyBlue;"> <span>skyblue</span> <li style="background: none repeat scroll 0% 0% SlateBlue;"> <span>slateblue</span> <li style="background: none repeat scroll 0% 0% SlateGray;"> <span>slategray</span> <li style="background: none repeat scroll 0% 0% Snow;"> <span>snow</span> 346 Copyright GrapeCity inc. All rights reserved.

348 <li style="background: none repeat scroll 0% 0% SpringGreen;"> <span>springgreen</span> <li style="background: none repeat scroll 0% 0% SteelBlue;"> <span>steelblue</span> <li style="background: none repeat scroll 0% 0% Tan;"> <span>tan</span> <li style="background: none repeat scroll 0% 0% Teal;"> <span>teal</span> <li style="background: none repeat scroll 0% 0% Thistle;"> <span>thistle</span> <li style="background: none repeat scroll 0% 0% Tomato;"> <span>tomato</span> <li style="background: none repeat scroll 0% 0% Turquoise;"> <span>turquoise</span> <li style="background: none repeat scroll 0% 0% Violet;"> <span>violet</span> <li style="background: none repeat scroll 0% 0% Wheat;"> <span>wheat</span> <li style="background: none repeat scroll 0% 0% White;"> <span>white</span> <li style="background: none repeat scroll 0% 0% WhiteSmoke;"> <span>whitesmoke</span> <li style="background: none repeat scroll 0% 0% Yellow;"> <span>yellow</span> <li style="background: none repeat scroll 0% 0% YellowGreen;"> <span>yellowgreen</span> <li style=""><span>buttonface</span> <li style=""><span>buttonhighlight</span> <li style=""><span>buttonshadow</span> <li style="background: none repeat scroll 0% 0% activecaption;"> <span>gradientactivecaption</span> <li style="background: none repeat scroll 0% 0% inactivecaption;"> <span>gradientinactivecaption</span> <li style="background: none repeat scroll 0% 0% menu;"> <span>menubar</span> <li style="background: none repeat scroll 0% 0% highlighttext;"> <span>menuhighlight</span> 347 Copyright GrapeCity inc. All rights reserved.

349 </ul> <!-- デモマークアップの 終 了 --> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <div> <label for="chkqueue"> Animation Settings: Queue </label> <input id="chkqueue" type="checkbox" /> <label for="seleasing"> Easing </label> <select id="seleasing"> <option value="easeinquad">easeinquad</option> <option value="easeoutquad">easeoutquad</option> <option value="easeinoutquad">easeinoutquad</option> <option value="easeincubic">easeincubic</option> <option value="easeoutcubic">easeoutcubic</option> <option value="easeinoutcubic">easeinoutcubic</option> <option value="easeinquart">easeinquart</option> <option value="easeoutquart">easeoutquart</option> <option value="easeinoutquart">easeinoutquart</option> <option value="easeinquint">easeinquint</option> <option value="easeoutquint">easeoutquint</option> <option value="easeinoutquint">easeinoutquint</option> <option value="easeinsine">easeinsine</option> <option value="easeoutsine">easeoutsine</option> <option value="easeinoutsine">easeinoutsine</option> <option value="easeinexpo">easeinexpo</option> <option value="easeoutexpo">easeoutexpo</option> <option value="easeinoutexpo">easeinoutexpo</option> <option value="easeincirc">easeincirc</option> <option value="easeoutcirc">easeoutcirc</option> <option value="easeinoutcirc">easeinoutcirc</option> <option value="easeinelastic">easeinelastic</option> <option value="easeoutelastic">easeoutelastic</option> <option value="easeinoutelastic">easeinoutelastic</option> <option value="easeinback">easeinback</option> <option value="easeoutback">easeoutback</option> <option value="easeinoutback">easeinoutback</option> <option value="easeinbounce">easeinbounce</option> <option value="easeoutbounce">easeoutbounce</option> <option value="easeinoutbounce">easeinoutbounce</option> </select> <input type="button" value=" 適 用 " onclick="changeproperties()" /> <!-- オプションマークアップの 終 了 --> 348 Copyright GrapeCity inc. All rights reserved.

350 ドロップダウンリストの 位 置 の 変 更 wijcombobox のドロップダウンリストの 位 置 を 変 更 するには 次 のように dropdownlistposition オプションを 使 用 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { var testarray = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; var myreader = new wijarrayreader([{ name: 'label', { name: 'value', { name: 'selected', defaultvalue: false]); var datasourceoptions = { reader: myreader, data: testarray ; var datasource = new wijdatasource({ reader: myreader, data: testarray $("#tags").wijcombobox({ data: datasource, width: 150 $('.position').bind('change', changed); function changed() { $("#tags").wijcombobox('option', 'dropdownlistposition', { my: $('#my_horizontal').val() + ' ' + $('#my_vertical').val(), at: $('#at_horizontal').val() + ' ' + $('#at_vertical').val(), offset: $('#offset').val(), collision: $("#collision_horizontal").val() + ' ' + $("#collision_vertical").val() </script> <div class="main demo"> <!-- デモマークアップの 開 始 --> <div> <input id="tags" /> <!-- デモマークアップの 終 了 --> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <div class="option-row"> <label for="my_horizontal"> Dropdown list:</label> <select id="my_horizontal" class="position"> <option value="left">left</option> <option value="center">center</option> <option value="right">right</option> 349 Copyright GrapeCity inc. All rights reserved.

351 </select> <select id="my_vertical" class="position"> <option value="top">top</option> <option value="middle">center</option> <option value="bottom">bottom</option> </select> <div class="option-row"> <label for="at_horizontal"> Aligns to textbox:</label> <select id="at_horizontal" class="position"> <option value="left">left</option> <option value="center">center</option> <option value="right">right</option> </select> <select id="at_vertical" class="position"> <option value="top">top</option> <option value="middle">center</option> <option value="bottom">bottom</option> </select> <div class="option-row"> <label for="offset"> With offset:</label> <input onblur="changed()" id="offset" type="text" size="15" /> <div class="option-row"> <label for="collision_horizontal"> Horizontal collision detection:</label> <select id="collision_horizontal"> <option value="flip">flip</option> <option value="fit">fit</option> <option value="none">none</option> </select> <label for="collision_vertical"> Vertical collision detection:</label> <select id="collision_vertical"> <option value="flip">flip</option> <option value="fit">fit</option> <option value="none">none</option> </select> <!-- オプションマークアップの 終 了 --> TextBox に 入 力 された 文 字 を 探 す search メソッドの 使 用 次 のコードは search メソッドを 使 用 して wijcombobox のテキストボックスに 入 力 された4つの 値 を 使 用 する 都 市 名 を 探 す 方 法 を 示 します 350 Copyright GrapeCity inc. All rights reserved.

352 <script id="scriptinit" type="text/javascript"> $(document).ready(function () { var proxy = new wijhttpproxy({ url: " datatype: "jsonp", data: { featureclass: "P", style: "full", maxrows: 12, key: 'geonames' var myreader = new wijarrayreader([{ name: 'label', mapping: function (item) { return item.name + (item.adminname1? ", " + item.adminname1 : "") + ", " + item.countryname, { name: 'value', mapping: 'name', { name: 'selected', defaultvalue: false ]); var datasource = new wijdatasource({ reader: myreader, proxy: proxy $("#tags").wijcombobox({ data: datasource, showtrigger: false, search: function (e, obj) { obj.datasrc.proxy.options.data.name_startswith = obj.term.value;, select: function (e, item) { $('#output').html(' 出 身 地 :' + item.label); </script> <div class="main demo"> <!-- デモマークアップの 開 始 --> <label for="tags"> 都 市 を 検 索 する4 文 字 を 入 力 します</label> <input id="tags" style="width: 300px" /> <p> <label id="output"> </label> </p> 351 Copyright GrapeCity inc. All rights reserved.

353 <!-- デモマークアップの 終 了 --> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <!-- オプションマークアップの 終 了 --> ComboBox 内 の 選 択 した 項 目 をトリガーする select イベントの 使 用 次 のコードは コンボボックス 内 の 選 択 した 項 目 をトリガーする select イベントの 使 用 方 法 を 示 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#tags").wijcombobox(); $("#states").wijcombobox(); </script> <h2> 選 択 </h2> <div class="main demo"> <!-- デモマークアップの 開 始 --> <div> <select id="states" onchange="$('#output').html(' 現 在 地 :' + this.value)"> <option value="al">alabama</option> <option value="ak">alaska</option> <option value="az">arizona</option> <option value="ar">arkansas</option> <option value="ca">california</option> <option value="co">colorado</option> <option value="ct">connecticut</option> <option value="de">delaware</option> <option value="fl">florida</option> <option value="ga">georgia</option> <option value="hi">hawaii</option> <option value="id">idaho</option> <option value="il">illinois</option> <option value="in">indiana</option> <option value="ia">iowa</option> <option value="ks">kansas</option> <option value="ky">kentucky</option> <option value="la">louisiana</option> <option value="me">maine</option> <option value="md">maryland</option> <option value="ma">massachusetts</option> <option value="mi">michigan</option> <option value="mn">minnesota</option> <option value="ms">mississippi</option> <option value="mo">missouri</option> 352 Copyright GrapeCity inc. All rights reserved.

354 <option value="mt">montana</option> <option value="ne">nebraska</option> <option value="nv">nevada</option> <option value="nh">new Hampshire</option> <option value="nj">new Jersey</option> <option value="nm">new Mexico</option> <option value="ny">new York</option> <option value="nc">north Carolina</option> <option value="nd">north Dakota</option> <option value="oh" selected="selected">ohio</option> <option value="ok">oklahoma</option> <option value="or">oregon</option> <option value="pa">pennsylvania</option> <option value="ri">rhode Island</option> <option value="sc">south Carolina</option> <option value="sd">south Dakota</option> <option value="tn">tennessee</option> <option value="tx">texas</option> <option value="ut">utah</option> <option value="vt">vermont</option> <option value="va">virginia</option> <option value="wa">washington</option> <option value="wv">west Virginia</option> <option value="wi">wisconsin</option> <option value="wy">wyoming</option> </select> <p> <label id="output"> 選 択 してください </label></p> <!-- デモマークアップの 終 了 --> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <!-- オプションマークアップの 終 了 --> Wijtabs 一 般 的 に wijtabs ウィジェットは 入 れ 替 え 可 能 な 複 数 のセクションにコンテンツを 分 割 して 画 面 の 実 面 積 を 節 約 するために 使 用 されます タブを 表 示 するビューの.cshtml ファイルを 開 きます 次 のマークアップのように タブストリップ DOM 要 素 とタブ 要 素 を 追 加 します <div id="tabs"> <ul> <li><a href="#tabs-1">nunc tincidunt</a> <li><a href="#tabs-2">proin dolor</a> </ul> <div id="tabs-1"> 353 Copyright GrapeCity inc. All rights reserved.

355 <p> Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus. </p> <div id="tabs-2"> <p>morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> ここで ウィジェットを 初 期 化 する 必 要 があります これを 行 うには 次 のスクリプトを.cshtml ファイルに 追 加 できます <script type="text/javascript"> $(document).ready(function () { $("#tabs").wijtabs(); </script> プロジェクトを 実 行 すると wijtab ウィジェットに2つのタブと2ページのコンテンツが 表 示 されます 関 連 項 目 : wijtabs の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijtabs 354 Copyright GrapeCity inc. All rights reserved.

356 Wijtabs チュートリアル 以 下 のチュートリアルでは wijtabs ウィジェットを MVC プロジェクトの 作 成 手 順 について 説 明 します このトピックでは ASP.NET MVC 4 Wijmo アプリケーションを 作 成 済 みであることが 前 提 となります 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では コンテンツのタブ 付 きセクションとなるリストのマークアップを 追 加 します 以 下 を 実 行 します 1. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックして ファイル を 開 きます 2. 次 のマークアップをページの <body>タグ 内 に 追 加 し タブのリストとコンテンツを 追 加 します <div id="tabs"> <ul> <li><a href="#tabs-1">タブ1</a> <li><a href="#tabs-2">タブ2</a> <li><a href="#tabs-3">タブ3</a> </ul> <div id="tabs-1"> タブ1のコンテンツ</p> <div id="tabs-2"> タブ2のコンテンツ</p> <div id="tabs-3"> タブ3のコンテンツ</p> 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では タブのリストとコンテンツのマークアップを 追 加 しました ここでは jquery スクリプトを 追 加 し ウィジェットを 初 期 化 できます 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 し wijtabs ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#tabs").wijtabs(); </script> 手 順 3:プロジェクトの 実 行 [F5] を 押 して アプリケーションを 実 行 します 各 タブをクリックすると そのコンテンツが 表 示 されます 355 Copyright GrapeCity inc. All rights reserved.

357 マウスでポイントしたときにタブを 開 く wijtabs ウィジェットでは ユーザーはタブヘッダーにマウスポインタを 置 くことでコンテンツを 表 示 できます この 機 能 を 利 用 するには 単 に event オプションを 設 定 します Web サイト ( MVC コントロールエクスプローラの Tabs > Hover サンプルのライブデモをご 覧 ください 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div id="tabs"> <ul> <li><a href="#tabs-1">nunc tincidunt</a> <li><a href="#tabs-2">proin dolor</a> <li><a href="#tabs-3">aenean lacinia</a> </ul> <div id="tabs-1"> <p> Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> <div id="tabs-2"> <p> Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed 356 Copyright GrapeCity inc. All rights reserved.

358 fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> <div id="tabs-3"> <p> Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> <p> Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 し wijtabs ウィジェットを 初 期 化 して event オプションを mouseover に 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#tabs").wijtabs({ event: "mouseover" 357 Copyright GrapeCity inc. All rights reserved.

359 </script> 5. アプリケーションを 実 行 すると タブヘッダーをクリックすることでタブのコンテンツを 表 示 できます タブ 位 置 の 設 定 wijtabs ウィジェットでは ウィジェットの 右 左 上 部 または 下 部 にタブストリップを 配 置 できます この 機 能 を 利 用 するに は 単 に alignment オプションを 設 定 します Web サイト ( MVC コントロールエクスプロー ラの Tabs > Alignment サンプルのライブデモをご 覧 ください 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div id="tabs"> <ul> <li><a href="#tabs-1">タブ1</a> <li><a href="#tabs-2">タブ2</a> <li><a href="#tabs-3">タブ3</a> </ul> <div id="tas-1"> <p> タブ1のコンテンツ</p> <div id="tabs-2"> <p> タブ2のコンテンツ</p> <div id="tabs-3"> <p> タブ3のコンテンツ</p> 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 し wijtabs ウィジェットを 初 期 化 して 358 Copyright GrapeCity inc. All rights reserved.

360 alignment オプションを 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#tabs").wijtabs({ alignment: 'left' </script> 5. アプリケーションを 実 行 すると タブストリップはタブコンテンツの 左 側 に 表 示 されます タブアニメーションの 設 定 wijtabs ウイジェットでは タブ 間 の 遷 移 に 使 用 するアニメーションを 追 加 できます この 機 能 を 利 用 するには showoption オプションと hideoption オプションを 使 用 します Web サイト( MVC コントロールエクスプローラ の Tabs > Animation サンプルのライブデモをご 覧 ください 1. ASP.NET MVC 4 Wijmo アプリケーション を 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div id="tabs"> <ul> <li><a href="#tabs-1">タブ1</a> <li><a href="#tabs-2">タブ2</a> <li><a href="#tabs-3">タブ3</a> </ul> <div id="tabs-1"> <p> タブ1のコンテンツ</p> <div id="tabs-2"> <p> タブ2のコンテンツ</p> 359 Copyright GrapeCity inc. All rights reserved.

361 <div id="tabs-3"> <p> タブ3のコンテンツ</p> 4. 前 の 手 順 で 追 加 した 終 了 タグの 後 に 以 下 の jquery スクリプトを 入 力 し wijtabs ウィジェットを 初 期 化 して showoption オプションと hideoption オプションを 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#tabs").wijtabs({ showoption: { blind: true, fade: true, duration: 1500, hideoption: { blind: false, fade: true, duration: 200 </script> 5. アプリケーションを 実 行 し タブヘッダーをクリックして 新 しいタブコンテンツがゆっくりと 降 りてきて フェードインするこ とを 確 認 してください Wijtooltip wijtooltip ウィジェットでは 吹 き 出 しや 小 さいボックスにターゲット 要 素 に 関 する 情 報 を 提 供 するポップアップツールチップまた はオーバーレイを 表 示 できます 任 意 の HTML 画 像 およびテキストを 埋 め 込 んで 完 全 にカスタマイズされたツールチップ を 作 成 します wijtooltip ウィジェットは jquery.wijmo.wijtooltip.js ライブラリによって 作 成 されます これを jquery セレクタに 適 用 するだけ で そのセレクタ 要 素 のツールチップが 表 示 されます 次 のマークアップを 使 用 し ツールチップを 作 成 できます <input title="tooltip1" type="text" /> ツールチップを HTML 要 素 に 追 加 するには 次 のように ツールチップマークアップを 添 付 先 の HTML 要 素 の 間 にネストする だけですべての 作 業 は 完 了 します 360 Copyright GrapeCity inc. All rights reserved.

362 <div id="targetcontainer"> <div> <input title="ツールチップ!" type="text" /> 次 の jquery スクリプトは wijtooltip を 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("[title]").wijtooltip(); </script> プロジェクトを 実 行 し カーソルで 入 力 ボックスの 上 にホバーすると ツールチップが 表 示 されます 関 連 項 目 : wijtooltip の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijtooltip Wijtooltip チュートリアル 以 下 のチュートリアルでは ASP.NET MVC 4 Wijmo アプリケーションの 作 成 手 順 について 説 明 し ページへのコンボボックス のコンテンツの 追 加 コンボボックスへのデータ 移 植 アニメーションの 追 加 およびコンボボックスのリンクを 行 います 手 順 1:ビューの 設 定 この 手 順 では マークアップを 追 加 し コンテンツをコンボボックスに 追 加 します 以 下 を 実 行 します 1. Microsoft Visual Studio の[ファイル]メニューから [ 新 しいプロジェクト]を 選 択 します [ 新 しいプロジェクト]ダイアロ グボックスが 開 きます 2. テンプレートの[Visual Basic]または[Visual C#]より[Web]を 選 択 します 3. 右 ペインから[ASP.NET MVC 4 Wijmo アプリケーション]を 選 択 します 4. [ 名 前 ] [ 場 所 ] [ソリューション 名 ]フィールドを 設 定 して OK をクリックします 5. 新 しい ASP.NET MVC Wijmo 4 アプリケーションが 作 成 されます Models Views および Controllers フォルダが 含 まれていることがわかります これらのフォルダは Wijmo for MVC のチュートリアルで 使 用 します 6. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックして ファイルを 開 きます 7. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します このマークアップはツールチップのコンテンツをページ に 追 加 します <div class="main demo"> <!-- デモマークアップの 開 始 --> <h2 id="tooltip" class="ui-helper-reset ui-widget-header ui-cornerall" style="padding: 1em;"> <a href="#" title="tooltip">anchor</a> </h2> 361 Copyright GrapeCity inc. All rights reserved.

363 <!-- デモマークアップの 終 了 --> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <label> Close Behavior</label> <select id="closebehavior"> <option value="auto">auto</option> <option value="none">none</option> <option value="sticky">sticky</option> </select> <!-- オプションマークアップの 終 了 --> 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では マークアップを 追 加 し ツールチップに 表 示 されるコンテンツを 追 加 しました ここでは jquery スクリプトを 追 加 し ウィジェットを 初 期 化 できます 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 し wijtooltip ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#tooltip>a").wijtooltip(); $("#closebehavior").change(function () { $("#tooltip>a").wijtooltip("option", "closebehavior", this.value); </script> 手 順 3:プロジェクトの 実 行 この 手 順 では アプリケーションを 実 行 し 新 しいデータやグラフ 要 素 (Y 軸 のタイトル グラフヘッダー グラフラベルなど)を 観 察 します この 手 順 では アプリケーションを 実 行 し さまざまな 閉 じる 動 作 を 観 察 します auto none または sticky を 選 択 し Anchor という 単 語 の 上 にホバーすると ツールチップが 表 示 されます 次 に マウスをこの 語 から 外 すと ツールチップがどのように 閉 じるかに 注 意 します 1. [F5]を 押 して アプリケーションを 実 行 します 2. 以 下 を 観 察 します auto ラベルをクリックし Anchor という 単 語 の 上 にホバーすると ツールチップが 表 示 されます 次 に マウ スをこの 単 語 から 外 すと ツールチップがどのように 閉 じるかに 注 意 します sticky ラベルをクリックし Anchor という 単 語 の 上 にホバーすると ツールチップが 表 示 されます 次 に マウ スをこの 単 語 から 外 すと ツールチップがどのように 閉 じるかに 注 意 します Wijtooltip タスク 別 ヘルプ 362 Copyright GrapeCity inc. All rights reserved.

364 タスク 別 ヘルプは ASP.NET のプログラミングに 精 通 し コントロールの 一 般 的 な 使 用 方 法 を 理 解 しているユーザーを 対 象 とし ています ヘルプに 記 述 された 手 順 に 従 うことによって wijtooltip のさまざまな 機 能 をデモンストレーションするプロジェクト を 作 成 して wijtooltip コントロールの 用 途 を 理 解 することができます ツールチップの 書 式 設 定 ツールチップを 表 示 して 書 式 設 定 するには showcallout calloutfilled および position オプションを 使 用 して 次 のよう にツールチップを 表 示 して 書 式 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $(".tooltip>a").wijtooltip({ showcallout: true, calloutfilled: false, position: { my: 'left bottom', at: 'right top', height: 300, width: 400, ajaxcallback: function () { var ele = this; ele.wijtooltip("option", "content", ele.html() + "のツールチップで す "); </script> <div class="main demo"> <!-- デモマークアップの 開 始 --> <ul class="ui-helper-reset ui-widget-header ui-corner-all" style="padding: 1em;"> <li class="tooltip"><a href="#">anchor1</a> <li class="tooltip"><a href="#">anchor2</a> <li class="tooltip"><a href="#">anchor3</a> <li class="tooltip"><a href="#">anchor4</a> </ul> <!-- デモマークアップの 終 了 --> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <!-- オプションマークアップの 終 了 --> モーダルツールチップの 作 成 モーダルツールチップを 作 成 するには 次 のように modal オプションを true に 設 定 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#target>a").wijtooltip({ modal: true, closebehavior: "sticky" 363 Copyright GrapeCity inc. All rights reserved.

365 $("#ismodal").click(function () { $("#target>a").wijtooltip("option", "modal",!!$("#ismodal").is(":checked")); </script> <div class="main demo"> <!-- デモマークアップの 開 始 --> <div id="tooltip"> <h3 id="target" class="ui-helper-reset ui-widget-header ui-corner-all" style="padding: 1em;"> <a href="#" title="hover on me to close"> 要 素 にホバーします</a> </h3> <!-- デモマークアップの 終 了 --> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <label for="ismodal"> モーダル</label> <input type="checkbox" id="ismodal" checked="checked" /> <!-- オプションマークアップの 終 了 --> ツールチップの 位 置 の 変 更 ツールチップの 表 示 位 置 を 変 更 するには 次 のように position オプションを 使 用 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#tooltiptarget>a").wijtooltip({ showcallout: true, closebehavior: 'sticky' function applyposition() { $("#tooltiptarget>a").wijtooltip("option", "position", { my: $("#my1").get(0).value + " " + $("#my2").get(0).value, at: $("#at1").get(0).value + " " + $("#at2").get(0).value ; </script> <div class="main demo"> <!-- デモマークアップの 開 始 --> <div id="tooltiptarget" class="ui-helper-reset ui-widget-header uicorner-all" style="padding: 1em;"> <a href="#" title="tooltip">ツールチップ</a> 364 Copyright GrapeCity inc. All rights reserved.

366 <!-- デモマークアップの 終 了 --> <div class="demo-options"> <!-- オプションマークアップの 開 始 --> <div style="height: 70px"> <div style="width: 180px; float: left;"> <span style="padding-right: 10px;">my:</span><select id="my1"> <option value="left"> 左 </option> <option value="center"> 中 央 </option> <option value="right"> 右 </option> </select> <select id="my2"> <option value="top"> 上 </option> <option value="center"> 中 央 </option> <option value="bottom" selected="selected"> 下 </option> </select> <br /> <span style="padding-right: 14px;">at:</span><select id="at1"> <option value="left"> 左 </option> <option value="center"> 中 央 </option> <option value="right" selected="selected"> 右 </option> </select> <select id="at2"> <option value="top"> 上 </option> <option value="center"> 中 央 </option> <option value="bottom"> 下 </option> </select> <input type="button" onclick="applyposition();" value=" 適 用 " /> <!-- オプションマークアップの 終 了 --> Wijtree wijtree ウィジェットは 項 目 を 階 層 ツリー 構 造 で 提 示 する UI です wijtree ウィジェットは 展 開 / 縮 小 アニメーションやドラッ グ&ドロップ 機 能 をサポートします ツリーを 表 示 するビューの.cshtml ファイルを 開 きます 次 のマークアップを 使 用 し ツリーを 作 成 します <ul id="tree"> <li><a>treeviewnode1</a> <ul> <li> <a>treeviewnode1</a> <li> <a>treeviewnode2</a> </ul> <li><a>treeviewnode2</a> 365 Copyright GrapeCity inc. All rights reserved.

367 </ul> ツリーを 機 能 させるには ウィジェットを 初 期 化 する 必 要 があります 次 のスクリプトを.cshtml ファイルに 追 加 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#tree").wijtree(); </script> 上 記 のスクリプトはツリーを 初 期 化 し 2つのツリーノードがあって その1つには2つのサブノードがあることを 指 定 します wijtree の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijtree Wijtree チュートリアル このセクションでは ツリー 要 素 を 含 む MVC プロジェクトの 作 成 手 順 について 説 明 します このトピックでは ASP.NET MVC 4 Wijmo アプリケーションを 作 成 済 みであることが 前 提 となります 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では wijtree ウィジェットを 格 納 するビューを 作 成 します 1. ソリューションエクスプローラで Views Shared フォルダに 移 動 し Layout.cshtml ファイルをダブルクリックして ファイルを 開 きます 2. ページの <body> タグ 内 のすぐ 後 に 次 のマークアップを 追 加 して ツリー 要 素 を 作 成 します <ul id="tree"> <li><a>treeviewnode1</a> <ul> <li> <a>treeviewnode1</a> <li> <a>treeviewnode2</a> </ul> <li><a>treeviewnode2</a> </ul> 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では ツリー 要 素 を 作 成 しました この 手 順 では ウィジェットを 初 期 化 する jquery スクリプトを 追 加 します 終 了 の <div> タグの 後 に 次 のスクリプトを 追 加 します 366 Copyright GrapeCity inc. All rights reserved.

368 <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#tree").wijtree(); </script> 手 順 3:プロジェクトの 実 行 この 手 順 では プロジェクトを 実 行 します [F5]を 押 して プロジェクトを 実 行 します Web ページに 次 の 図 のような wijtree が 表 示 されます 自 動 縮 小 オプションの 使 用 wijtree では 別 のノードが 選 択 されたときに 拡 張 されたノードを 縮 小 する 自 動 縮 小 オプションを 使 用 できます このトピックで は 自 動 縮 小 オプションを 設 定 する 手 順 について 説 明 します Web サイト ( MVC コントロールエクスプ ローラの Auto Collapse > Tree サンプルのライブデモをご 覧 ください 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <ul id="tree"> <li><a>フォルダ 1</a> <ul> <li><a>フォルダ 1.1</a> <li><a>フォルダ 1.2</a> <li><a>フォルダ 1.3</a> <ul> <li><a><span>フォルダ 1.3.1</span></a> <li><a><span>フォルダ 1.3.2</span></a> <li><a><span>フォルダ 1.3.3</span></a> <li><a><span>フォルダ 1.3.4</span></a> <li><a><span>フォルダ 1.3.5</span></a> </ul> <li><a>フォルダ 1.4</a> <li><a>フォルダ 1.5</a> </ul> <li><a href="#"><span>フォルダ 2</span></a> <ul> 367 Copyright GrapeCity inc. All rights reserved.

369 <li><a><span>フォルダ 2.1</span></a> <li><a><span>フォルダ 2.2</span></a> <li><a><span>フォルダ 2.3</span></a> <li><a><span>フォルダ 2.4</span></a> <li><a><span>フォルダ 2.5</span></a> </ul> <li><a href="#"><span>フォルダ 3</span></a> <ul> <li><a><span>フォルダ 3.1</span></a> <li><a><span>フォルダ 3.2</span></a> <li><a><span>フォルダ 3.3</span></a> <li><a><span>フォルダ 2.4</span></a> <li><a><span>フォルダ 3.5</span></a> </ul> </ul> 4. 以 下 のスクリプトを 使 用 して ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { var tv = $("#tree").wijtree({ autocollapse: true </script> 5. スクリプトで autocollapse オプションが"true" に 設 定 されていることに 注 意 してください 6. プロジェクトを 実 行 します 任 意 のノードをクリックして 開 きます 別 のノードをクリックすると 他 の 開 いているノードが 縮 小 されます Expand on Hover オプションの 使 用 wijtree ウィジェットでは ユーザーがノード 上 にマウスポインタを 置 いたときにノードが 拡 張 するオプションを 設 定 できます Web サイト( MVC コント ロールエクスプローラの Expand on Hover > Tree サンプルのライブデモをご 覧 ください 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div> <ul id="tree"> <li class="folder"><a><span>フォルダ 1</span></a> <ul> <li class="folder"><a><span>フォルダ 1.1</span></a> <ul> <li class="folder"><a><span>フォルダ 1.1</span></a> <li class="folder"><a><span>フォルダ 1.2</span></a> 368 Copyright GrapeCity inc. All rights reserved.

370 <li class="folder"><a><span>フォルダ 1.3</span></a> <li class="folder"><a><span>フォルダ 1.4</span></a> <li class="folder"><a><span>フォルダ 1.5</span></a> </ul> <li class="folder"><a><span>フォルダ 1.2</span></a> <li class="folder"><a><span>フォルダ 1.3</span></a> <li class="folder"><a><span>フォルダ 1.4</span></a> <li class="folder"><a><span>フォルダ 1.5</span></a> </ul> <li class="folder"><a><span>フォルダ 2</span></a> <ul> <li class="folder"><a><span>フォルダ 2.1</span></a> <li class="folder"><a><span>フォルダ 2.2</span></a> <li class="folder"><a><span>フォルダ 2.3</span></a> <li class="folder"><a><span>フォルダ 2.4</span></a> <li class="folder"><a><span>フォルダ 2.5</span></a> </ul> <li class="folder"><a><span>フォルダ 3</span></a> <ul> <li class="folder"><a><span>フォルダ 3.1</span></a> <li class="folder"><a><span>フォルダ 3.2</span></a> <li class="folder"><a><span>フォルダ 3.3</span></a> <li class="folder"><a><span>フォルダ 3.4</span></a> <li class="folder"><a><span>フォルダ 3.5</span></a> </ul> </ul> 4. 以 下 のスクリプトを 使 用 して ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { var tv = $("#tree").wijtree({ expandcollapsehoverused: true, expandanimation: {, collapseanimation: { </script> 5. プロジェクトを 実 行 します 任 意 のノード 上 にマウスポインタを 置 くと ノードが 開 きます 369 Copyright GrapeCity inc. All rights reserved.

371 allowdrag および allowdrop プロパティの 使 用 wijtree では allowdrag および allowdrop プロパティの 使 用 してドラッグ&ドロップ 操 作 が 可 能 なノードを 作 成 できます こ れらのノードは1つのフォルダ 内 またはフォルダ 間 を 移 動 することができます このトピックでは ノードを 移 動 可 能 にするプロ パティを 設 定 する 手 順 について 説 明 します Web サイト ( MVC コントロールエクスプローラ の Drag and Drop > Tree サンプルのライブデモをご 覧 ください 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div> <ul id="tree1"> <li><a><span>フォルダ 1</span></a> <ul> <li><a><span>フォルダ 1.1</span></a> <li><a><span>フォルダ 1.2</span></a> <li><a><span>フォルダ 1.3</span></a> <li><a><span>フォルダ 1.4</span></a> <li><a><span>フォルダ 1.5</span></a> </ul> <li><a href="#"><span>フォルダ 2</span></a> <ul> <li><a><span>フォルダ 2.1</span></a> <li><a><span>フォルダ 2.2</span></a> <li><a><span>フォルダ 2.3</span></a> <li><a><span>フォルダ 2.4</span></a> <li><a><span>フォルダ 2.5</span></a> </ul> <li><a href="#"><span>フォルダ 3</span></a> <ul> <li><a><span>フォルダ 3.1</span></a> <li><a><span>フォルダ 3.2</span></a> <li><a><span>フォルダ 3.3</span></a> </ul> 370 Copyright GrapeCity inc. All rights reserved.

372 </ul> <p> 二 つのツリーの 間 </p> <div> <ul id="tree2"> <li><a><span>フォルダ 4</span></a> <ul> <li><a><span>フォルダ 4.1</span></a> <li><a><span>フォルダ 4.2</span></a> <li><a><span>フォルダ 4.3</span></a> <li><a><span>フォルダ 4.4</span></a> <li><a><span>フォルダ 4.5</span></a> </ul> <li><a href="#"><span>フォルダ 5</span></a> <ul> <li><a><span>フォルダ 5.1</span></a> <li><a><span>フォルダ 5.2</span></a> <li><a><span>フォルダ 5.3</span></a> <li><a><span>フォルダ 5.4</span></a> <li><a><span>フォルダ 5.5</span></a> </ul> </ul> 4. 以 下 のスクリプトを 挿 入 して ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { var tv = $("#tree1").wijtree({ allowdrop: true, allowdrag: true $("#tree2").wijtree({ allowdrop: true, allowdrag: false </script> 5. プログラムを 実 行 します wijtree ウィジェットのセット 間 でノードをドラッグできるようにします カスタムドラッグ&ドロップオプションの 使 用 wijtree ウィジェットでは ドラッグ&ドロッププロパティである allowdrag と allowdrop のカスタム 動 作 の 設 定 をサポートしま す このトピックでは 2つの wijtree 要 素 とゴミ 箱 要 素 を 作 成 する 手 順 について 説 明 します wijtree 要 素 間 およびゴミ 箱 要 素 へノードをドラッグすることができます Web サイト ( MVC コントロールエクス プローラの Custom Drag and Drop > Tree サンプルのライブデモをご 覧 ください 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div> <ul id="tree1"> 371 Copyright GrapeCity inc. All rights reserved.

373 <li><a><span>フォルダ 1</span></a> <ul> <li><a><span>フォルダ 1.1</span></a> <li><a><span>フォルダ 1.2</span></a> <li><a><span>フォルダ 1.3</span></a> <li><a><span>フォルダ 1.4</span></a> <li><a><span>フォルダ 1.5</span></a> </ul> <li><a href="#"><span>フォルダ 2</span></a> <ul> <li><a><span>フォルダ 2.1</span></a> <li><a><span>フォルダ 2.2</span></a> <li><a><span>フォルダ 2.3</span></a> <li><a><span>フォルダ 2.4</span></a> <li><a><span>フォルダ 2.5</span></a> </ul> <li><a href="#"><span>フォルダ 3</span></a> <ul> <li><a><span>フォルダ 3.1</span></a> <li><a><span>フォルダ 3.2</span></a> <li><a><span>フォルダ 3.3</span></a> </ul> </ul> <div id="trash" class="ui-widget-content"> <h4 class="ui-widget-header"> <span class="ui-icon ui-icon-trash">trash</span> ごみ 箱 </h4> <ul> </ul> <div style="clear: both"> <p> このツリーのクローンノードします:</p> <div> <ul id="tree2"> <li><a><span>フォルダ 4</span></a> <ul> <li><a><span>フォルダ 4.1</span></a> <li><a><span>フォルダ 4.2</span></a> <li><a><span>フォルダ 4.3</span></a> <li><a><span>フォルダ 4.4</span></a> <li><a><span>フォルダ 4.5</span></a> </ul> <li><a href="#"><span>フォルダ 5</span></a> <ul> <li><a><span>フォルダ 5.1</span></a> <li><a><span>フォルダ 5.2</span></a> 372 Copyright GrapeCity inc. All rights reserved.

374 <li><a><span>フォルダ 5.3</span></a> <li><a><span>フォルダ 5.4</span></a> <li><a><span>フォルダ 5.5</span></a> </ul> </ul> 4. 以 下 の CSS スタイルを 使 用 して Web ページの 外 観 を 制 御 します <style> #trash { float: right; min-height: 12em; padding: 1%; width: 32%; #trash ul { list-style: none; #trash ul li { margin-bottom: 10px; div.wijmo-wijtree { float: left;.dropvisual { height: 1px; font-size: 0px; /*IE 6 の 問 題 を 修 正 */ background-color: Red; </style> 5. 以 下 のスクリプトを 挿 入 して ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { var span = "<span class=\"ui-widget-content helperinner\">"; $("#tree1").wijtree({ allowdrop: false, allowdrag: true, dropvisual: function () { return $("<div>").addclass("dropvisual"); 373 Copyright GrapeCity inc. All rights reserved.

375 , appendto: 'body', draggable: { revert: "invalid", start: function (event, ui) { ui.helper.html(ui.helper.html() + span);, drag: function (event, ui) { var inner = ui.helper.children(".helperinner"); if (inner.length) { inner.html("x:" + event.pagex + " y:" + event.pagex);, stop: function (event, ui) { $(this).hide() $(this).show("highlight", 500); var getinitmarkup = function (dragnode) { var node = dragnode.clone(); node.find("a").unwrap().unwrap(); node.find("li>span,>span").remove(); return node; ; $("#tree2").wijtree({ allowdrop: true, allowdrag: false, droppable: { drop: function (event, ui) { var dragnode = ui.draggable, p = ui.newparent, po = ui.newindex, node; node = getinitmarkup(dragnode); if (p.is(":wijmo-wijtree")) { p.wijtree("add", node, po); else { p.wijtreenode("add", node, po); $("#trash").droppable({ activeclass: "ui-state-hover", hoverclass: "ui-state-active", scope: "tree", // 受 け 入 れる:"li", drop: function (event, ui) { var node = ui.draggable; deltreenode(node, this); 374 Copyright GrapeCity inc. All rights reserved.

376 var deltreenode = function (node, trash) { var parent = node.parent().closest(":wijmo-wijtreenode,:wijmo-wijtree"); if (parent.is(":wijmo-wijtreenode")) { parent.wijtreenode("remove", node); else { parent.wijtree("remove", node); node.appendto($(trash).children("ul:eq(0)")); </script> 6. プログラムを 実 行 します Web ページに2つの wijtree ウィジェットのセットとゴミ 箱 領 域 が 表 示 されます ウィジェット 間 およびゴミ 箱 にノードを 移 動 することができます チェックボックスの 使 用 wijtree ウィジェットでは チェックボックスを 備 えたツリーノードを 表 示 できます このトピックでは チェックボックスを 表 示 する 正 しいプロパティを 設 定 する 手 順 について 説 明 します Web サイト ( MVC コントロールエクスプローラ の Check Box > Tree サンプルのライブデモをご 覧 ください 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div> <ul id="tree"> <li class="folder"><a><span>フォルダ 1</span></a> <ul> <li class="folder"><a><span>フォルダ 1.1</span></a> <ul> <li class="folder"><a><span>フォルダ 1.1</span></a> <li class="folder"><a><span>フォルダ 1.2</span></a> <li class="folder"><a><span>フォルダ 1.3</span></a> <li class="folder"><a><span>フォルダ 1.4</span></a> <li class="folder"><a><span>フォルダ 1.5</span></a> </ul> <li class="folder"><a><span>フォルダ 1.2</span></a> <li class="folder"><a><span>フォルダ 1.3</span></a> <li class="folder"><a><span>フォルダ 1.4</span></a> <li class="folder"><a><span>フォルダ 1.5</span></a> 375 Copyright GrapeCity inc. All rights reserved.

377 </ul> <li class="folder"><a><span>フォルダ 2</span></a <ul> <li class="folder"><a><span>フォルダ 2.1</span></a> <li class="folder"><a><span>フォルダ 2.2</span></a> <li class="folder"><a><span>フォルダ 2.3</span></a> <li class="folder"><a><span>フォルダ 2.4</span></a> <li class="folder"><a><span>フォルダ 2.5</span></a> </ul> <li class="folder"><a><span>フォルダ 3</span></a> <ul> <li class="folder"><a><span>フォルダ 3.1</span></a> <li class="folder"><a><span>フォルダ 3.2</span></a> <li class="folder"><a><span>フォルダ 3.3</span></a> <li class="folder"><a><span>フォルダ 3.4</span></a> <li class="folder"><a><span>フォルダ 3.5</span></a> </ul> </ul> 4. 以 下 のスクリプトを 挿 入 して ウィジェットを 初 期 化 します showcheckboxes および allowedit プロパティは 両 方 とも "true" に 設 定 されることに 注 意 してください <script id="scriptinit" type="text/javascript"> $(document).ready(function () { var tv = $("#tree").wijtree({ showcheckboxes: true, allowedit: true </script> 5. プログラムを 実 行 します ウィジェットは 次 の 図 のようになります オブジェクトモデル オブジェクトモデルを 使 用 すると ノードをウィジェットに 追 加 したり ウィジェットから 削 除 したりできます Web サイト ( MVC コントロールエクスプ 376 Copyright GrapeCity inc. All rights reserved.

378 ローラの Object Model > Tree サンプルのライブデモをご 覧 ください 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div> <ul id="tree"> <li><a><span>フォルダ 1</span></a> <ul> <li><a><span>フォルダ 1.1</span></a> <li><a><span>フォルダ 1.2</span></a> <li><a><span>フォルダ 1.3</span></a> <li><a><span>フォルダ 1.4</span></a> <li><a><span>フォルダ 1.5</span></a> </ul> </ul> <!-- デモマークアップの 開 始 --> <div class="demo-options"> <!-- デモマークアップの 終 了 --> <div> <input id="addnode" type="button" value=" 追 加 " /> at index <input id="addindex" type="text" value="0" /> <div> <input id="removenode" type="button" value=" 削 除 " /> at index <input id="removeindex" type="text" value="0" /> 4. 以 下 のスクリプトを 使 用 して ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { var tv = $("#tree").wijtree(); function getnode() { return $("#tree").wijtree("findnodebytext", "Folder 1"); ; $('#addnode').click(function () { var node = getnode(); if (node!= null) node.element.wijtreenode("add", 'New node', parseint($("#addindex").val())); $('#removenode').click(function () { var node = getnode(); 377 Copyright GrapeCity inc. All rights reserved.

379 if (node!= null) node.element.wijtreenode("remove", parseint($("#removeindex").val())); </script> 5. プログラムを 実 行 します wijtree ウィジェットは 次 の 図 のようになります カスタムノードアイコンの 使 用 wijtree では カスタムアイコンを 使 用 してツリーノードをマークできます ノードの 現 在 の 状 態 に 基 づいてアイコンを 切 り 替 える こともできます Web サイト( MVC コン トロールエクスプローラの Node Icons > Tree サンプルのライブデモをご 覧 ください 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div> <ul id="tree"> <li class="folder"><a><span>フォルダ 1</span></a> <ul> <li class="folder"><a><span>フォルダ 1.1</span></a> <ul> <li class="file"><a><span>ファイル 1.1</span></a> <li class="file"><a><span>ファイル 1.2</span></a> <li class="file"><a><span>ファイル 1.3</span></a> <li class="file"><a><span>ファイル 1.4</span></a> <li class="file"><a><span>ファイル 1.5</span></a> </ul> <li class="file"><a><span>ファイル 1.2</span></a> <li class="file"><a><span>ファイル 1.3</span></a> <li class="file"><a><span>ファイル 1.4</span></a> <li class="file"><a><span>ファイル 1.5</span></a> </ul> <li class="folder"><a><span>フォルダ 2</span></a> <ul> 378 Copyright GrapeCity inc. All rights reserved.

380 <li class="file"><a><span>ファイル 2.1</span></a> <li class="file"><a><span>ファイル 2.2</span></a> <li class="file"><a><span>ファイル 2.3</span></a> <li class="file"><a><span>ファイル 2.4</span></a> <li class="file"><a><span>ファイル 2.5</span></a> </ul> <li class="folder"><a><span>フォルダ 3</span></a> <ul> <li class="file"><a><span>ファイル 3.1</span></a> <li class="file"><a><span>ファイル 3.2</span></a> <li class="file"><a><span>ファイル 3.3</span></a> <li class="file"><a><span>ファイル 3.4</span></a> <li class="file"><a><span>ファイル 3.5</span></a> </ul> </ul> 4. 以 下 のスクリプトを 追 加 して ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#tree").wijtree(); $("li.folder").wijtreenode("option", "collapsediconclass", "ui-iconfolder-collapsed").wijtreenode("option", "expandediconclass", "ui-icon-folderopen"); $("li.file").wijtreenode("option", "itemiconclass", "ui-icondocument"); </script> 5. プログラムを 実 行 します ノードをクリックしたときに ファイルアイコンがどのように 変 わるかを 確 認 します 以 下 の 図 のように 表 示 されます Wijupload wijupload ウィジェットは ファイルやストリームをサーバーにアップロードするための 手 軽 で 信 頼 できる 方 法 を 提 供 します エディタを 表 示 するビューの.cshtml ファイルを 開 きます 次 のマークアップのように アップロードとプログレスバーの 379 Copyright GrapeCity inc. All rights reserved.

381 要 素 を 追 加 します <div id="upload" style="width: 300px"> <div id="progressbar"> ここで wijupload と wijprogressbar ウィジェットを 初 期 化 する 必 要 があります これを 行 うには 次 のスクリプトを.cshtml ファイルに 追 加 できます <script id="scriptinit" type="text/javascript"> var supportxhr; $(document).ready(function () { var progressbar = $("#progressbar"); var upload = $find(uploadid); change: function(e, data){, upload: function(e, data){, totalupload: function () { progressbar.show();, complete: function (e, data), totalcomplete: function () { progressbar.fadeout(1500, function () { if (supportxhr) { $("#progressbar").wijprogressbar("option", "value", 0);, totalprogress: function (e, data) { if (supportxhr) { $("#progressbar").wijprogressbar("option", "maxvalue", data.total); $("#progressbar").wijprogressbar("option", "value", data.loaded);, action: "@Url.Content("~/Content/Upload/upload.ashx")" supportxhr = $("#upload").wijupload("supportxhr"); if (supportxhr) { progressbar.wijprogressbar({ value: 0 else { progressbar.addclass("loading"); progressbar.hide(); </script> 380 Copyright GrapeCity inc. All rights reserved.

382 プロジェクトを 実 行 すると wijupload ウィジェットは 次 のような 表 示 になります Wijupload チュートリアル 以 下 のチュートリアルでは クリックすると 選 択 されたファイルをサーバーにアップロードする Upload Files ボタンを 含 む MVC プロジェクトの 作 成 手 順 について 説 明 します この 例 では wijprogressbar ウィジェットを 使 用 してアップロードされるファ イルの 処 理 の 進 捗 状 況 も 示 します このトピックでは ASP.NET MVC 4 Wijmo アプリケーションを 作 成 済 みであることが 前 提 となります 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では Upload Files ボタンとプログレスバーを 表 示 する 場 所 を 決 定 するマークアップを 追 加 します 以 下 を 実 行 しま す 1. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックして ファイルを 開 きます 2. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します このマークアップは Upload Files ボタンとプログレ スバーが 表 示 される2つの 要 素 を 追 加 します <div class="page"> <div id="header"> <div id="title"> <h2> 概 要 </h2> <div class="main demo"> <!-- デモマークアップの 開 始 --> <div id="upload" style="width: 300px"> <div id="progressbar"> <!-- デモマークアップの 終 了 --> 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では Upload Files ボタンとプログレスバーが 表 示 される 場 所 を 決 定 するマークアップを 追 加 しました ここでは ウィジェットを 初 期 化 する jquery スクリプトを 追 加 できます 前 の 手 順 で 追 加 した 終 了 の タグの 後 に 次 の jquery スクリプトを 入 力 し wijupload と wijprogressbar ウィジェッ トを 初 期 化 します 381 Copyright GrapeCity inc. All rights reserved.

383 <script id="scriptinit" type="text/javascript"> var supportxhr; $(document).ready(function () { var progressbar = $("#progressbar"); var upload = $("#upload").wijupload({ change: function (e, data) {, upload: function (e, data) {, totalupload: function () { progressbar.show();, complete: function (e, data) {, totalcomplete: function () { progressbar.fadeout(1500, function () { if (supportxhr) { $("#progressbar").wijprogressbar("option", "value", 0);, totalprogress: function (e, data) { if (supportxhr) { $("#progressbar").wijprogressbar("option", "maxvalue", data.total); $("#progressbar").wijprogressbar("option", "value", data.loaded);, action: "@Url.Content("~/Content/Upload/upload.ashx")" supportxhr = $("#upload").wijupload("supportxhr"); if (supportxhr) { progressbar.wijprogressbar({ value: 0 else { progressbar.addclass("loading"); progressbar.hide(); </script> 手 順 3:プロジェクトの 実 行 この 手 順 では アプリケーションを 実 行 し ファイルをアップロードします プログレスバーにアップロード 処 理 の 進 捗 状 況 が 表 示 されます 1. [F5]を 押 して アプリケーションを 実 行 します 2. Upload Files ボタンをクリックし ファイルを 選 択 して 開 く をクリックします アップロードするファイルの 数 だけこの 手 順 を 繰 り 返 します 382 Copyright GrapeCity inc. All rights reserved.

384 3. Upload All ボタンをクリックします ファイルがサーバーにアップロードされ プログレスバーに 100% を 表 示 して 各 ファイルが 正 常 にアップロードされた 時 点 が 示 されます 各 ファイルの 横 にある Upload ボタンをクリックすると ファイルを 個 別 にアップロードできることにも 注 意 してください Wijwizard wijwizard は ナビゲート 可 能 な 個 別 のページ 上 にコンテンツを 表 示 するために 使 用 される UI で 一 連 のフォームを 作 成 して 画 面 の 実 面 積 を 節 約 し 入 力 タスクを 簡 素 化 しています 簡 単 にナビゲートするために wijwizard の 組 み 込 みのナビゲーションボ タンや 自 動 再 生 機 能 を 使 用 できます これをページナビゲーションの wijpager ウィジェットと 組 み 合 わせることもできます ウィザードを 表 示 するビューの.cshtml ファイルを 開 きます 次 のマークアップを 追 加 し 3つのページと3つのヘッダーを 含 む ウィザードを 作 成 します <div id="pages"> <ul> <li><h1> 手 順 1 </h1>1 番 目 の 手 順 です <li><h1> 手 順 2 </h1>2 番 目 の 手 順 です <li><h1> 手 順 3 </h1>3 番 目 の 手 順 です <li><h1> 手 順 4 </h1>4 番 目 の 手 順 です </ul> <div><p>proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> <div><p>morbi tincidunt, dui sit ametfacilisis feugiat, 383 Copyright GrapeCity inc. All rights reserved.

385 luctus malesuada, suscipit aliquam. facilisis. viverra nulla. feugiat, felis, purus.</p> odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula Praesent in eros vestibulum mi adipiscing adipiscing. Morbi Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere Aliquam erat volutpat. Pellentesque convallis. Maecenas tellus pellentesque pretium posuere, felis lorem euismod eu ornare leo nisi vel felis. Mauris consectetur tortor et <div><p>mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> <div><p>duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit. </p> ウィザードを 機 能 させるには ウィジェットを 初 期 化 する 必 要 があります 次 のスクリプトを.cshtml ファイルに 追 加 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#pages").wijwizard(); 384 Copyright GrapeCity inc. All rights reserved.

386 </script> 上 記 のマークアップとスクリプトは 3つの 手 順 を 含 むウィザードウィジェットを 作 成 します wijwizard の 詳 細 については Wijmo 製 品 マニュアルをご 覧 ください Wijwizard Wijwizard チュートリアル このセクションでは ウィザード 要 素 を 含 む MVC プロジェクトの 作 成 手 順 について 説 明 します このトピックでは ASP.NET MVC 4 Wijmo アプリケーションを 作 成 済 みであることが 前 提 となります 作 成 していない 場 合 は MVC Classic プロジェクトの 作 成 を 参 照 してください 手 順 1:ビューの 設 定 この 手 順 では 基 本 的 な wijwizard ウィジェットを 格 納 するビューを 作 成 します 1. ソリューションエクスプローラで Views Shared フォルダに 移 動 し Layout.cshtml ファイルをダブルクリックして ファイルを 開 きます 2. Views Home フォルダに 移 動 し Index.cshtml ファイルをダブルクリックして 開 きます 次 のマークアップを 使 用 し ウィザード 要 素 を 作 成 します <div id="pages"> <div><p>proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> <div><p>morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare 385 Copyright GrapeCity inc. All rights reserved.

387 leo nisi vel felis. Mauris consectetur tortor et purus.</p> <div><p>mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> <div><p>duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> 手 順 2:ウィジェットの 初 期 化 前 の 手 順 では スライダ 要 素 を 作 成 しました この 手 順 では ウィジェットを 初 期 化 する jquery スクリプトを 追 加 します 終 了 の <div> タグの 後 に 次 のスクリプトを 追 加 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#pages").wijwizard(); </script> 手 順 3:プロジェクトの 実 行 この 手 順 では プロジェクトを 実 行 します [F5]を 押 して プロジェクトを 実 行 します Web ページに 次 の 図 のような wijwizard が 表 示 されます 386 Copyright GrapeCity inc. All rights reserved.

388 Ajax を 介 した Wijwizard コンテンツのロード wijwizard ウィジェットは Ajax を 介 したコンテンツのロードをサポートしています このトピックでは Ajax を 介 してコンテンツ をロードするようにウィザードを 設 定 する 方 法 を 示 します 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div id="pages"> <ul> <li> <h1> 手 順 1</h1> ロード 済 み <li> <h1> 手 順 2</h1> Ajax を 介 する <li> <h1> 手 順 3</h1> Ajax を 介 する </ul> <div> <p> Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> <div src="/ajax/content1.html"> <div src="/ajax/content2.html"> 387 Copyright GrapeCity inc. All rights reserved.

389 4. 以 下 のスクリプトを 追 加 して ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#pages").wijwizard(); </script> 5. プログラムを 実 行 します wijwizard ウィジェットは 次 の 図 のようになります Wijwizard のオートプレイ wijwizard ウィジェットでは オートプレイ 機 能 を 使 用 してウィジェットの 手 順 間 の 移 動 を 制 御 できます 遷 移 間 の 遅 延 を 設 定 して wijwizard が 手 順 を 実 行 する 速 度 を 制 御 することもできます このトピックでは オートプレイ 機 能 を 設 定 し 遅 延 をカス タマイズする 手 順 について 説 明 します 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div id="pages"> <ul> <li> <li> <li> <h1> 手 順 1</h1> これは 最 初 の 手 順 です <h1> 手 順 2</h1> これは2 番 目 の 手 順 です <h1> 手 順 3</h1> 388 Copyright GrapeCity inc. All rights reserved.

390 これは3 番 目 の 手 順 です </ul> 4. </ul> 終 了 タグの 後 に 残 りのマークアップを 挿 入 してウィザードの 手 順 用 のコンテンツを 作 成 します <div> <p> Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> <div> <p> Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque 389 Copyright GrapeCity inc. All rights reserved.

391 convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> <div> <p> Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> <p> Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit 390 Copyright GrapeCity inc. All rights reserved.

392 hendrerit.</p> 5. 以 下 の jquery スクリプトを.cshtml ファイルに 追 加 して ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#pages").wijwizard({ autoplay: true, loop: true, navbuttons: 'none', showoption: { blind: true, fade: true, duration: 400, hideoption: { blind: true, fade: true </script> 6. このスクリプトでは autoplay オプションが "true" loop オプションが "true" に 設 定 され showoption の 持 続 時 間 の 設 定 が 制 御 されていることに 注 意 してください 7. プロジェクトを 実 行 します コンテンツが 変 わるとウィザードのサイズが 自 動 的 に 変 更 されることに 注 意 してください Wijwizard を 備 えるページャの 使 用 wijpager ウィジェットと wijwizard ウィジェットを 一 緒 に 使 用 して ページ 化 されたナビゲーションシステムを 作 成 します ペー ジャウィジェットの "nextpreviousfirstlast" モードまたは "numeric" モードのいずれかを 使 用 できます このトピックでは ページャモードを "numeric" に 設 定 した 状 態 で 2つのウィジェットを 一 緒 に 使 用 する 方 法 を 示 します 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div id="pages"> <div> <p> Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 391 Copyright GrapeCity inc. All rights reserved.

393 <div> <p> Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> <div> <p> Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> <p> Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> <div> <h4> Studio Enterprise</h4> 392 Copyright GrapeCity inc. All rights reserved.

394 <p> 7つのプラットフォーム 数 百 のコントロール 1つの Studio WinForms WPF ASP.NET Silverlight iphone Mobile および ActiveX 対 応 ツールを 使 用 して すばらしいデスクトップ Web およびモバイルアプリを 構 築 します </p> <div> <h4> Studio for WinForms</h4> <p> 65 を 超 える.NET コントロール 他 のどこからも 取 得 できないコントロールを 含 みま す Studio for WinForms は 何 百 万 もの 行 を 含 むグリッドから 無 制 限 のポイントを 含 むグラフまで あらゆるタスクを 処 理 することができます </p> <div> <h4> Studio for WPF</h4> <p> Studio for WPF は グリッド スケジューラ グラフ レポートなどに 含 まれる 豊 富 なデータ 視 覚 化 にバインドされた 高 度 なデータから 得 られるすべてを 提 供 します </p> <div> <h4> Studio for ASP.NET AJAX</h4> <p> より 少 ないコードでより 多 くを 実 行 します 45 を 超 えるスタイルが 設 定 され 多 くの 機 能 が 搭 載 された 使 いやすいコントロールが AJAX CSS および XHTML を 含 む Web 標 準 に 構 築 されます </p> <div> <h4> Studio for Silverlight</h4> <p> 他 のどこにも 見 つけることができない きわめて 強 力 な 機 能 を 持 つ Silverlight コ ントロール ComponentOne Studio を ダウンロードしますか? Silverlight で Web の 輝 きを 再 生 し 確 認 してください <div> <h4> Studio for iphone</h4> <p> 既 存 の ASP.NET スキルセットを 使 用 して Web アプリを iphone に 適 用 します ComponentOne Studio を 使 用 しますか? iphone では iphone UX が 提 供 されます </p> 4. 以 下 の DOM 要 素 を 追 加 し ページャを 作 成 します 393 Copyright GrapeCity inc. All rights reserved.

395 <div id="pager"> 5. 以 下 のスクリプトを 使 用 して 両 方 のウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#pages").wijwizard({ navbuttons: 'none' $("#pager").wijpager({ pagecount: $("#pages").wijwizard('count'), pageindex: $("#pages").wijwizard('option', 'activeindex'), mode: "numeric", pageindexchanged: function () { var pageindex = $("#pager").wijpager("option", "pageindex"); $("#pages").wijwizard({ activeindex: pageindex </script> 6. プロジェクトを 実 行 します その 結 果 2つのウィジェットは 次 の 図 のようになります Wijwizard の 単 純 なビューの 設 定 wijwizard は ヘッダータブ 付 きとヘッダータブなしの2つの 異 なるビューをサポートしています このトピックでは ヘッダータ ブなしの wijwizard の 単 純 なビューを 作 成 する 手 順 について 説 明 します 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div id="pages"> <div><p>proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. 394 Copyright GrapeCity inc. All rights reserved.

396 Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> <div><p>morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> <div><p>mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> <div><p>duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> 395 Copyright GrapeCity inc. All rights reserved.

397 4. 以 下 のスクリプトを 使 用 して ウィジェットを 初 期 化 します <script id="scriptinit" type="text/javascript"> $(document).ready(function () { $("#pages").wijwizard(); </script> 5. プロジェクトを 実 行 します 単 純 な wijwizard は 次 の 図 のようになります Wijwizard へのアニメーションの 適 用 wijwizard ウィジェットはアニメーションをサポートします このトピックでは ウィジェットにアニメーション 効 果 を 適 用 する 手 順 について 説 明 します 1. ASP.NET MVC 4 Wijmo アプリケーションを 作 成 します 2. ソリューションエクスプローラで Views Shared フォルダを 展 開 し _Layout.cshtml をダブルクリックしてファイルを 開 きます 3. 以 下 のマークアップをページの <body> タグ 内 に 追 加 します <div id="pages"> <ul> <li> <h1> 手 順 1</h1> これは 最 初 の 手 順 です <li> <h1> 手 順 2</h1> これは2 番 目 の 手 順 です <li> <h1> 手 順 3</h1> これは3 番 目 の 手 順 です </ul> <div> <p> Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. 396 Copyright GrapeCity inc. All rights reserved.