javascript

2014年03月01日

Jquery DataTablesが良い

UI周りは最近触る機会が無かったのですが、案件でDataTablesを使う機会があったのですが
非常に良かったので、そのポイントをいくつか挙げたいと思います。

動的なTable描画が簡単

これはDataTablesを使う人には当然ですね

サーバサイドとの連動、静的な描画の両方に対応

ソートや検索をサーバサイドと連動させることもできるし、静的なデータで
DataTables自体にソートさせることも可能です。
サーバサイドとの連動はそれで良いと思える部分ですが、むしろ自分は静的な対応に注目してます。
これの良いところはサーバ側でデータを吐き出してしまえば、ソートや検索(フィルタ)をJSで完結できるところです。
PCスペック、JSの性能が上がっているからこそできることなのですが、サーバサイドは極力シンプルにして
その後の処理をDataTablesに任せることができる点は非常に大きいですね。
サーバへの通信頻度をむしろ考慮するとこの作りでもアリじゃないかと思います。1万件くらいのリストならいけるんじゃないでしょうか。

-フィルタ機能の充実

fnFilterによるフィルタ機能が非常に充実しています。like検索までできるかまだ調べきれていませんが
selectboxやcheckboxの複数選択にも対応できるような仕組みになっていますね。
http://www.datatables.net/forums/discussion/7257/api-fnfilter-filter-using-an-or-on-a-single-column/p1

CMSやレポートシステムの画面作成に使うには、手間を抑えつつクオリティの高いものを出せると思います。

hiroki0907 at 23:21トラックバック(0) 

2013年11月01日

Facebookのいいね!ボタンの多言語化

Facebookソーシャルプラグインで生成されるいいね!ボタンを多言語化する方法ですが
FacebookソーシャルプラグインのJSを読み込んでいる部分でJSのURLに言語を指定する部分があるので、そこを変更します。
//日本の場合
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";

//韓国の場合
js.src = "//connect.facebook.net/ko_KR/all.js#xfbml=1";

//ロシアの場合
js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1";

変更可能な対象国は以下のFacebookから提供されているLocaleリストのXMLで確認可能です。
https://www.facebook.com/translations/FacebookLocales.xml

hiroki0907 at 03:08トラックバック(0) 

2012年06月08日

ThickboxのShiftJIS対応

もうあまりこんなことは無いと思いますが、HTML全般がShiftJISのサイトでThickboxを使いたい場合、以下のようにiframeを指定しないと文字化けします。
<a href="hoge_1.html?height=214&width=131&TB_iframe=true&modal=true" class="thickbox">

また、iframe呼び出しの場合は閉じるボタンなどのtb_removeの挙動にparentを指定する必要があります。
onclick="javascript:parent.tb_remove();"


hiroki0907 at 06:48トラックバック(0) 

2011年03月22日

Javascriptのコード量を減らすには

管理システムでjavascriptを使ったUIを構築する際にJQueryの導入でコードの肥大化、分散はある程度避けられますが、それでもちゃんと画面に依存するロジックもクラスオブジェクトのようなものを作って極力重複コードを避けなければならないと思っています。

サーバサイドだけ適正化されてスマートになってもjavascript部分はゴリゴリ書かれていて、可読性が低いというのも厳しいので、できるだけ擬似的なオブジェクト指向に則った形を目指していきたいところです。

参考にさせていただいたサイトは以下の通りです。
http://chaichan.web.infoseek.co.jp/src/javascnew05.htm

http://yanor.net/wiki/?JavaScript%2F%E3%82%AF%E3%83%A9%E3%82%B9%EF%BC%88%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%EF%BC%89%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9

http://d.hatena.ne.jp/oinusama/20090323/p1

あとはコーディングルールを徹底するとか、骨組みをちゃんと浸透させておく必要があると思います。

ExtJSの導入、研究も検討していきたいですが、当分やらなそう。

hiroki0907 at 00:43トラックバック(0) 

2011年03月21日

JQueryUI Dialogの右上の閉じるボタンを消す

JQueryUIのDialogで右上の閉じるボタンを消したい場合は以下のようにopenのイベントハンドラで関数をコールし、「ui-dialog-titlebar-close」クラスを非表示にすることで解決するようです。
$('#dialog-hoge').dialog({
modal: true,
autoOpen: false,
draggable: false,
closeOnEscape: false,
resizable: false,
open:function(event, ui){ $(".ui-dialog-titlebar-close").hide();}
});

解決方法はCSSへの記述など複数あるようで、以下のフォーラムに載っています。
http://ja.w3support.net/index.php?db=so&id=896777

hiroki0907 at 23:43トラックバック(0) 

2011年03月03日

jQueryのbindとliveの違い

JqueryMobileのサンプルでbindとliveがユーザーのタッチイベントの定義に使われていて違いが気になりました。

こちらで詳細に説明されていました。
jQueryの.bind(), .live(), .delegate()の違い

とても参考になったのでメモ。

hiroki0907 at 00:22トラックバック(0) 

2011年01月31日

IE6のときだけ指定のjsファイルを読み込む

IE6もしくはIE7のときだけ指定のjsファイルを読み込む、といったことを容易に可能にするライブラリがあります。

・ご紹介されているサイト

・本家サイト

javascript開発において、特にIE6との共存はかなり悩まされます。ユーザー側でゴリゴリ動くようなのは特にです。サイトが大手になればなるほどIE6対応のニーズはあります。

IE対策を想定した機能が実装されているところに魅力を感じます。実際に使ってみよう。

hiroki0907 at 18:13トラックバック(0) 

2010年09月10日

JQueryを使ってテーブルに行を追加する

JQueryを使ってテーブルに行を追加する場合は、tableに対してappendを使います。テーブルに行を追加するのはJQuery経由がシンプルだと思います。
$('#hoge_table').append(''
+ '<tr>'
+ '<td>aaa</td>'
+ '</tr>');

javascriptとJQueryは使う度に調べて、試してを繰り返している気がする。


hiroki0907 at 01:13トラックバック(0) 

2010年09月09日

JQueryで同じIDを持つ複数の要素に対してイベントを付与

以下のように同じIDを振った複数のselectboxに対してchangeイベントを付与するJQueryのサンプルです。
<select id="hoge" >
<option value="1">aaa</option>
</select >
<select id="hoge" >
<option value="1">bbb</option>
</select >


//以下JQueryサンプル
$("[id=hoge]").change(function(){alert('test')});

selectタグの方にonChangeを記述しても良いのですが、jsファイル内で完結させたい場合や、いくつ追加しても同じIDであればイベントを付与されるようにしたい場合は、この記述が良いです。

hiroki0907 at 13:08トラックバック(0) 

2010年08月11日

jQueryValidatePluginで任意のタイミングでバリデーションをかける

jQueryValidatePluginでは実装をすることなくsubmitされた段階で自動でバリデーションされますが、例えばbuttonやアンカーリンクを押した際といった任意のタイミングでバリデーションを呼びだすには以下のようにvalid関数を呼び出します。

以下サンプル
//バリデーションを定義
$("#sample_form").validate();
//任意で実行
$("#sample_form").valid();

jQueryValidatePluginは用途が柔軟で便利ですね。

hiroki0907 at 22:46トラックバック(0) 

現在の戦闘力
ドラゴンボール改 3 [DVD]

このブログの戦闘力

3919

「ナッパ」
クラスです。

by ブログ戦闘力チェッカー

  • ライブドアブログ