jQueryUIはリッチなUIを簡単に使えるライブラリです。
その名の通り、jQueryの上で動くので、jQueryを使ったことがある、
今使っているという方は簡単に扱えるはずです。
Selectableを初めて使ったのですが、つまづいたところ、
基本的な使い方など書き留めておきたいと思います。
(jQuery UI Selectbleのサンプルを元にしています)
リッチなUIにならない、表示が変、どうやらデザインが適用されてない。。。
jQueryUIをダウンロード・解凍するとjsとcssというフォルダがあると思います。
jsの中にjQueryとjQueryUIが入っているので、これらを読み込めば使えるわけです。
これだけでも、プログラムとしては動いてしまうのですが、肝心のデザイン関連(CSSやimage)は
cssフォルダに含まれています！自分だけかも知れませんがこれを忘れがち笑
/css/テーマ名/ の中にjQueryUIのCSSと 画像フォルダがありますので、
javascriptと同様適切なパス上において、linkタグで読み込んでおきましょう。
現在選択されているアイテムを取得する
サンプルのコード(View Sourceで表示されます)にもある通り、
JavaScript:
-
$(".ui-selected").each(function(){
-
//ここに処理
-
alert($(this).text());//thisがHTMLエレメントになってる
-
});
この形で走査できます。イベントで受け取る場合は、
JavaScript:
-
$("#selectable").selectable({
-
selected: function(event,ui){
-
alert($(ui.selected).text());//ui.selectedがHTMLエレメント
-
});
というような感じです。
イベントの場合は複数選択された場合、各々のアイテムについてそれぞれイベントが発生します。
また、もちろんunselectedの場合はui.unselectedで同様に要素にアクセスできます。
iKnow!ユーザ向けのFirefoxアドオンです。
Firefoxアドオン With iKnow!
使い方
１．インストール
２．右下のステータスバーに
With iKnow!(Select and Click hre!)
とメッセージが出ていることを確認
３．ブラウザ上で、覚えたい単語、気になる単語、
リストに追加したい単語などを選択
４．With iKnow!(Select and Click hre!) をクリック
５．新しいウィンドウでiKnow!のアイテムページが開かれます
左側のアイテムバンクの検索結果も参考にしてください。
ご意見・ご感想
ブログのコメントに残していただけるとうれしいです。
今後の方針
ちょっと機能が貧弱すぎるので、バージョンアップしていく予定です。
追記：１月７日 With iKnow! もご覧ください。
iKnow!用のFirefoxアドオンを作ってみました。
以下のリンクからインストールしてみてください。
With iKnow!
まだ公開申請中なので、ダウンロードして保存したあと、
ファイルをFirefoxにドラッグ＆ドロップしてください。
Firefox用のアドオンを作るのははじめてなので、
いろいろ大変だった。XULの概念は結局いまいち理解できず、
ほとんどをJavascriptでカバーした気がする。
JQueryに感謝！
アドオンの内容はいたって単純。
ブラウザでテキストを選択し、右下のステータスバーに出ている
With iKnow!
をクリックすると、iKnow!のアイテムを検索し、リストへの追加、例文表示の
ページにジャンプします。まぁ、ほんとに単純なので、説明はいらないでしょう。
iKnow!ユーザの方、ぜひ感想お待ちしております。
今はまだ自分の技術が低すぎるので、もっと勉強したら、バージョンアップ版
作成しようとおもってます！
また、Firefoxアドオンを作ってみよう！という方、
自分自身ももっと便利なiKnow!アドオンの登場を、楽しみに待っています。
ど素人の書いたコードですが、開発の参考になれば、ご利用ください。
MITライセンスです。
JQueryを使って
<tagName:xmlns>
のようにxmlns属性がついた(コロン付き)のタグにアクセスする場合、
$("tagName:xmlns")
$("xmlns:tagName")
$("xmlns")
$("tagName")
のいずれでもうまくいかない。
正解は
$("tagName//xmlns")
$("xmlns//tagName")
PHPでXMLを扱う場合はSimpleXMLかXpathを使うと思うが、
Xpathの方が簡単。
SimpleXMLで名前空間付きタグの一覧を取得する
に両方のやり方について、解説されています。
