SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Infragistics NetAdvantageチュートリアル(PR)

jQueryを利用したコンポーネントで軽量かつ高機能なWebアプリづくりを!

  • このエントリーをはてなブックマークに追加

 本記事では、NetAdvantage for jQueryを利用した高機能で軽量なクライアントサイド実装について解説します。入力補助となるエディタ機能や、HTML5対応もされているレーティングやビデオ機能についても解説します。

  • このエントリーをはてなブックマークに追加

はじめに

 NetAdvantage for jQueryは、jQueryとjQuery UIの上で動作する高機能なコンポーネントセットです。高機能なグリッド表を生成するigGridをはじめ、特定の値入力に特化したEditorsコンポーネント、動画配信に対応したigVideoPlayerなどのコンポーネントが用意されています。

 NetAdvantage for jQueryはあくまでクライアントサイドのコンポーネントのため、サーバーサイドの実装を意識することなく利用できるのが特長です。また、ASP.NET MVCの親和性にも優れており、専用のHTMLヘルパーを利用することで、簡単に利用できます。

 NetAdvantage for jQueryの概要や、igGridの利用方法については、前回の記事でも扱っていますので、併せて参照してください。

必要な環境

 次の環境が必要です。

  • NetAdvantage for jQuery

 NetAdvantage for jQueryはこちらからサンプルダウンロードできます。インストールはウィザードに従って進めるだけです(トライアル版ではminサイズのファイルしかありません)。NetAdvantage for jQueryの利用方法については前回の記事を参照してください。

高機能な入力サポートEditorsコンポーネント

 NetAdvantage for jQueryには、多くのEditorsコンポーネントが存在します。

NetAdvantage for jQueryが提供している主なEditorsコンポーネント
コンポーネント名 機能
igCurrencyEditor 様々な通貨に対応し、入力値の制御もできる入力コンポーネント
igDateEditor 日付入力コンポーネント
igDatePicker カレンダー付きの日付入力コンポーネント
igMaskEditor 指定された入力マスクエディターコンポーネント
igNumericEditor 指定した範囲の数値のみ受け付ける入力コンポーネント
igPercentEditor パーセントの数値のみ受け付ける入力コンポーネント
igTextEditor 1行から複数行までの書式設定可能なテキスト入力コンポーネント

 Editorsコンポーネントでは、それぞれ用途に応じて入力できる数値や文字列を制限し、また、入力値の検証機能を提供しています。また、ローカライズもされているので、日付や通貨の表記も意識する必要がありません。

 いずれのコンポーネントも、オプションこそ異なりますが、同じ構文で利用できます。XXXの部分は、Editorsコンポーネントの名前を表します。また、すべてのEditorsコンポーネントはASP.NET MVCのHTMLヘルパーを提供しています。

Editorsコンポーネントのメソッドの構文
$(セレクタ).igXXXEditor({ オプション名: 値, ... });

 それでは、具体的な例を見ていきましょう。

オプションなしでも利用できるEditorsコンポーネント

 高機能でシンプルに利用できるNetAdvantage for jQueryの中でも、特に簡単に利用できるEditorコンポーネントが、igCurrencyEditor(通貨入力)とigPercentEditor(パーセント入力)です。これらのメソッドは、オプションなどを指定することなく、メソッドのコールだけで実行できます。

igCurrencyEditorsとigPercentEditorコンポーネントの利用例(igEditorsSample.htm)
<input id="currencyEditor" type="text" value="145000" />
<input id="percentEditor" type="text" value="31.1"/>
<script type="text/javascript">
    $('#currencyEditor').igCurrencyEditor();
    $('#percentEditor').igPercentEditor();
</script>

 実行結果は図1のとおりです。

図1 通貨入力ボックスとパーセント値入力ボックス
図1 通貨入力ボックスとパーセント値入力ボックス

 テキストボックスには数値以外の文字列や記号は入力できないため、誤ったデータが挿入されることはありません(IMEが有効の場合は記号やひらがななどの文字列を入力できますが、フォーカスが外れた段階で数値以外の入力データは消失します)。また、nullTextオプションを利用することで、フィールドが空の場合に表示させるウォーターマーク(透かし文字)を指定することも可能です。

nullTextオプションの指定例(igEditorsSample.htm)
$('#currencyEditor').igCurrencyEditor({ nullText: '貯金額を入力してください。' });

$('#percentEditor').igPercentEditor({ nullText: '出席率を入力してください。' });

 nullTextオプションは、基本的にすべてのEditorsコントロールで使用できます(図2)。

図2 未入力の際にウォーターマークを表示
図2 未入力の際にウォーターマークを表示

次のページ
日付入力を支援するigDateEditorとigDatePicker

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
Infragistics NetAdvantageチュートリアル連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLDB/PEAR/Smarty)」「独習シリーズ(ASP.NET/PHP)」「10日でおぼえる入門教室シリーズ(ASP.NET/PHP/Jakarta/JSP&サーブレット/XML)」「Pocket詳解辞典シリーズ(ASP.NET/PHP/Perl&CGI)」「今日からつかえるシリーズ(PHP/JSP&サーブレット/XML/ASP)」「書き込み式 SQLのドリル」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト ナオキ(ナオキ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6249 2011/10/28 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング