Tag Archives: jQuery

Knockout.js で jQuery UI ‘sortable’を使う

前回に引き続き、勉強中の Knockout の記事です。 今回は、リッチなUIを手軽に実装できる jQuery UI との組み合わせを検証してみました。 jQuery UI ‘sortable’ とは sortable とは jQuery UI に含まれる機能で、リスト要素などの各アイテムをドラッグ&ドロップで並び替えできるようにするものです。 sortable の動きについては jQuery UI Demos & Documentation を見ていただければわかると思います。 Knockout と組み合わせる デモはこちらです(別画面で開きます) JSFIDDLE でも公開しました Knockout で jQuery UI などのプラグインをバインドで実行できるようにするため、カスタムバインディングを作成します。 今回は、名前もそのまま「sortable」というカスタムバインディングを作成しました。 ko.sortable.js 4.35KB ライセンスフリー ↑右クリックして「名前をつけて保存」してください。 knockout.js の後に読み込まれるように設置すればOKです。 次のサイト・ページを参考にしました。 ・http://stackoverflow.com/questions/4146751/knockoutjs-with-jquery-ui-sortable ・http://jsbin.com/knockoutsortable/20/edit HTML で、通常の foreach バインディング(もしくは template バインディング)とともにバインドします。 (相応の ViewModel が適用されているものとします。) 1 2 … Continue reading →

Posted in: Javascript, Web

【jQuery】要素の”外側”のクリックイベントを捕捉「skOuterClick」

jQueryでダイアログボックスのような機能を開発していたとき、ふと「ある要素”以外”」にクリックイベントハンドラを仕掛けられたらいいのにと思いました。 そんな思いでプラグインを探していたところ、kawama.jpさんの記事 jqueryで指定要素”以外”のクリックイベントを実装するouterClickプラグイン にたどり着きました。 残念なことに現在は肝心のプラグインが公開されておらず、リンク切れになってしまっている模様です。ほかを探してみましたが、探し方が悪いのか一向に見つからず…。 ということで、outerClickプラグインのスコブト版、その名も「skOuterClick」を作りました!

Posted in: Javascript, Web

【jQuery】真・入力欄にフォーカスすると消えるヒントを表示する方法

まずは、こちら↓をご覧下さい。 名前を入力して下さい SE時代にWeb系の試験をしていて、「~を入力して下さい」ように「ヒント」として初期値を表示しておいてフォーカスが当てられると初期値を消去するフォーム部分にてバグが発覚したことがあります。 当時は「仕様です」という言葉でクローズされたのですが・・・。 今回は「仕様です」と言わずに済むスマートな実現方法を紹介します。

Posted in: Javascript, Web