jQuery EasyUI を使いこなしてみる (ProgressBar 編)

コンピューティング jQuery

こんにちは。カッワーリーを聴きながら気分はパキスタン、で仕事中な野良プログラマ Mariyudu です。

jQuery EasyUI、スゲぇ

最近、いくつかのアルファブログでもちらほら取り上げられつつあるようですが、jQuery EasyUI っていう jQuery 用の U/I ライブラリが何気に凄いです。Web アプリのコントロールパネルなんかを作ろうとすると必要になるパーツやウィジェットがだいたい網羅されていて、ぱっと見た目は Ext JS みたいでもあります。グッドなのは

  • jQuery ベースなので、jQuery ユーザには学習コストが低くて他のライブラリとの併用も出来て嬉しい。
  • シンプルにできていて見通しが良く、困った時やちょっと変わった事をしたい時もさほど苦労しない。
  • ライセンスが GPL(商用ライセンスは若干の制限付)。

ってとこでしょうか。

欲しい所から使っていく

OSS を使うとき、私はそれがどれだけ自分の仕事にベネフィットをもたらしてくれるか? というプラグマティックな評価というか、取り組み方をしています。実際、このプロダクトを知ったのは、バーの中にパーセンテージだけじゃなくて任意の文字列を埋め込めるプログレスバーを探していた時でした。なので、jQuery EasyUI は多くの機能を持ちますが、今回はインストール(デプロイ)とプログレスバーの使い方を紹介します。

インストール(デプロイ)

EasyUI のドキュメントページには特別インストール手順等は無いようですが、デモページの HTML ソースを見ればどんなふうにデプロイすれば良いかは分かります。とはいえ、初心者向けに一応書き留めておきますね。まずは、サイトのドキュメントルートに「jquery-easyui-1.2.4」みたいな EasyUI 用フォルダを作成します。それからダウロードページから得た Zip ファイルを解凍して、jquery-1.6.min.js・jquery.easyui.min.js・locale・plugins・themes をEasyUI 用フォルダにコピーするだけで OK です(下図)。

使用の際は head タグ内に以下のように記述して下さい。

<link rel="stylesheet" type="text/css" href="/jquery-easyui-1.2.4/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="/jquery-easyui-1.2.4/themes/icon.css" />
<script type="text/javascript" src="/jquery-easyui-1.2.4/jquery-1.6.min.js"></script>
<script type="text/javascript" src="/jquery-easyui-1.2.4/jquery.easyui.min.js"></script>

プログレスバーの使い方

プログレスバーを使うには、配布元のデモページにあるように、div 等のブロック要素を用意して、クラスに easyui-progressbar を指定してやり、CSS でサイズを指定するだけです。jQuery UI のプログレスバーの様に初期化してやる必要さえありません。ただ、このやりかただとプログレスバーを動的に増やす場合等に「?」となってしまうかも知れないですね。プログレスバーを動的に作成する時はこんなふうにします。

// ブロック要素を生成して、適当な親要素に追加してやる
var pbar = $('<div id="PBar" class="easyui-progressbar" style="width:400px;"></div>');
$('#SomeBlockElement').append( pbar );
// プログレスバー初期化(バー内テキストの書式を指定したり、バーの色をデフォルトから変えたり)
pbar
	.progressbar({text:'処理その1 : {value} %'})
	.find('.progressbar-value').css('background-color','#fc6');

プログレスバー初期化の際に、バーのテキストを「処理その1 : 99 %」という書式に指定してます。また、バーの色はデフォルトだと濃いオレンジなので、これを変えたい場合は初期化後に生成された progressbar-value というクラスの要素について background-color を変えてやればいいみたいです。この処理の実例(下図)を http://mariyudu.net/labo/easyuiDemo に用意しましたので、ご覧頂ければと。

という訳で jQuery EasyUI、すっかり気に入っちゃいました。今後も継続的に他の部品など試してみるつもりでので、いいネタがあればまた報告します。それでは。