Web屋メモ

Web系エンジニアのメモです。

スポンサーサイト

一定期間更新がないため広告を表示しています

- | - | - | 
blogram投票ボタン

Javascriptデータグリッド

Javascriptで簡単にデータグリッドを作るライブラリ
json形式でデータを渡せるやつで、キレイめなやつを2つ探しました

Ext JS

これはデータグリッドに限らず、いろいろできるJavascriptフレームワークです。
サンプルのページで試してみることができます。
グリッドもいろんな種類があります。
AdobeやIBM、CANON、SONY、SAPなどいろんな企業での導入実績があるようです。
問題はライセンスです。GPL3か商用ライセンスのどちらかを選ぶ形態です。
GPL3だと、ASPモデルでも、派生物をオープンソースにする必要あり!
商用ライセンスにすれば問題ないけど、米ドル支払いと手続きを英語でしなきゃならないことがネックになりそう。

Flexigrid

これはデータグリッドだけを作れるライブラリだけど、結構軽いしイイ感じ。まだbetaだけど、、
ライセンスもMITだから、派生物のソースを独占的にできる。
Flexigridのリンク先変更(2009/4/7)
Javascript | comments(0) | trackbacks(0) | 
blogram投票ボタン

jQueryが素晴らしい

javascriptライブラリはjQueryで決まりです。

数年前までjavascript(以下jsと表記)ライブラリはprototype.jsがデファクトスタンダードでしたが、2007年ごろからjQueryが注目され、シェアも逆転したっぽいです。
google、microsoft、Nokia、DELLなんかでもjQueryを採用しているらしい。

私も以前はprototype.jsscript.aculo.usを使ってましたが、jQueryを
使ってみて目からウロコでした。
軽くて簡単で、コードがキレイでメンテナンス性が良い!

エレメントを参照する場合でjs標準機能やprototype.jsと比べてみます。
js標準
id要素で指定
document.getElementById(id)
name要素で指定
document.getElementsByName(name)
タグ名で指定
document.getElementsByTagName(tagName)
getElementByIdは、ひとつのエレメントが返却されるが、
他は複数のエレメントの配列が返される。
prototype.js
上記の素のjsのものに加えてCSSクラス名での参照メソッドが追加される
document.getElementsByClassName(className)
また、
$(id)
というdocument.getElementById(id)のショートカットが提供される。
jQuery
id要素で指定
$("#id")
CSSクラス名で指定
$(".className")
タグ名で指定
$("tagName")
CSSのセレクタを同じ指定方法。
CSSを知ってる人なら、新たに何かを覚える必要なし!
しかもCSSと同じで下表のような指定もできます。
複数セレクタをグルーピング$("div,span,p")
要素の親子関係$("parent > child")
先祖子孫$("ancestor descendant")
前後関係$("prev + next")
兄弟関係$("prev ~ siblings")

さらにフィルタが充実してるので、思いのままに一発でエレメントを参照できます。
:first先頭の要素
:last末尾の要素
:not(selector)指定したセレクターを除外した要素
:even偶数番の要素
:odd奇数番の要素
:eq(index)インデックス指定した要素
:gt(index)指定したインデックスより後の要素
:lt(index)指定したインデックスより前の要素
:contains(text)指定した文字列を含む要素
:empty空要素
:has(selector)指定したセレクター要素を子孫に持つ要素
:parent何がしかの子要素(テキストも含む)を持つ要素
:hidden非表示の要素や、hidden属性のinput要素
:visible可視状態にある要素

そしてjQueryが優れているのはここからです。


$()で参照したエレメントはjQuery独自形式のオブジェクトで返ってきて、そのオブジェクトに対して一括で操作できます。
たとえばDIVタグすべてにcolor: "red"スタイルをつけるには、
$("div").css("color","red");
だけです。
複数エレメントの操作にもforなどでループする必要がないんです。

そして、jQueryのほとんどのメソッドはjQueryオブジェクトを返却するので、メソッドをチェーン状につなげていけます。
commentクラス要素すべてを青色にして、高さを50にして、アニメーションでゆっくり隠して、ゆっくり戻す時は、
$('.comment').css('background-color','blue').height(50).hide(2000).show(2000);
という感じです。
シェルで|を使ってコマンドの入出力をつなげる感じでなじみやすいし、
一連の処理をまとめてコードをキレイに保てます。 

このページを見ている状態でfirebugのコンソールで上記の2例を実行させてみてください。(firebugについてはこちらのエントリを参照)

実行速度も速い

こちらのサイトで主要ライブラリの実際の実効速度を比較できます。
(jQuery1.3〜はセレクタエンジンSizzleを使ってるので、Sizzle参照のこと)
Javascript | comments(0) | trackbacks(78) | 
blogram投票ボタン

jQueryが素晴らしい その2

前回は操作対象のエレメント指定を書きましたが、今回は操作してみます。

属性変更
HTMLタグの属性を変更します。
$().attr(属性名,値)
たとえば
<a href="before">リンク</a>
というタグのリンク先をafterに変更する場合、
Aタグのhref属性を変更すれば良いので、
$('a').attr('href','after')
とします。
このまま実行すると、Aタグすべてが変更されてしまうので、$()部分で適切なエレメントだけを指定するようにします。
属性削除
HTMLタグの属性を削除します。
$().removeAttr(属性名)
HTML編集
HTMLを変更します。
$().html(値)
テキスト編集
テキストを変更します。
$().text(値)

html()とtext()の違いは
text()がエスケープされるだけの違い。
たとえば
<span>文字列</span>
というタグの文字列を変更する時、
$('span').html('<strong>太字</strong>')
の場合は
<span><strong>太字</strong></span>
になりますが、
$('span').text('<strong>太字</strong>')
だと、
<span>&lt;strong&gt;太字&lt;/strong&gt;</span>
とHTMLエンティティがエスケープされます。

値参照
上記メソッドのうちremoveAttr()以外は値引数を省略すると値の参照ができます。
<span>文字列</span>
というタグがあった時に、
str = $('span').text()
を実行すると、str変数には
文字列
がセットされます。


まだまだメソッドあるけど長くなりそうなので、今回はここまで。
次回はCSS廻りかな

JUGEMテーマ:インターネット
Javascript | comments(0) | trackbacks(109) | 
blogram投票ボタン
  1/1P  
S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
31      
<< December 2017 >>
求人情報サイト[ InterNext Career] スカウト登録
no alt string