twitter facebook hatena google pocket フォームなどユーザーに入力をさせる部分にwysiwygが利用できるとユーザーの表現が広がります。 これにともない、コンテンツもリッチになるかもしれません。 敷居が高いと思われるwysiwygエディターもjQueryプラグイン「jQRTE」を利用するとあっという間に導入できます。 sponsors 使用方法 jQRTEからファイル一式をダウンロードします。 一式をアップロードし、index.phpにアクセスすると利用できます。 というように説明も楽・・・。 手を抜きすぎた感が否めないので日本語バージョンを作成しました。 jajp.zip 上記ファイルを/locale/配下にアップロードしてください。 またindex.phpの2行目を以下のように変更ください。 $language="jajp"; wysiwygエディタ
select要素をプルダウンに拡張するjQuery.selectable.js Check Tweet 配布元：selectボックスをシンプルなプルダウンに拡張するjQuery.selectable.js ライセンス:MITライセンス select要素でセレクトボックスを作成した際に、情報量が多いと非常に選択肢が多く探すのが難しいことがある。都道府県を検索する際に多くの人が経験したことがあるだろう。 jQuery.selectable.jsはセレクトボックスをプルダウンメニューに変更し、簡単に検索できるように変更するJavaScriptライブラリだ。 使い方 jQueryと配布サイトよりダウンロードしたjquery.selectable.js、スキン用のCSSファイルをhead要素などで読み込みます。 <script type="text/javascript" src="../js/jq
使用頻度が結構多いわりに、あまり詳しく書かれている本が見当たらないので、まとめメモ。 text_field等のヘルパーを使いつつ複数の要素を配列として取得したい時がある。リレーションでいうとhas_manyな要素をまとめて作成したい時とか。Helper使わずにHTMLタグ書いちゃえって思うこともあるけども、Helper使うとやっぱり楽だ。 （Helperを使わないときは↓のようになる） <input type="text" name="book[0][name]"> 今回は特に配列な要素を新規作成したいケースで。 例えば各ユーザー（User）がお気に入りの本(Book)を3個登録したいとき。 （Userがhas_many :booksで Bookがbelongs_to :user） （今回はUserも同時に作成したい） Controller def new @user = User.new
twitter facebook hatena google pocket フォームなどでよく、デフォルトでテキストが表示されている場合があります。 何を入力すれば良いのかを示しことができるので、ユーザービリティ上有意義な方法です。 jQuery Watermark PluginはjQueryベースでこれが可能です。 sponsors 使用方法 jQuery Watermark Pluginからjquery.updnWatermark.jsを、jQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.updnWatermark.js"></script> <script type=
James Smith ? loopj.com Blog Archive jQuery Plugin: Tokenizing Autocomplete Text Entry 複数のクエリ入力に適した補完機能付ボックス実装「jquery.tokeninput.js」。 利用者に入力してもらいたい項目が多数ある場合、たとえば検索用のＵＩで、複数の検索文字列を投げたいような場合に使えそう 入力ボックスに文字列を入れると、サジェストが現れます。 Enterキーで、候補を１つのクエリにできます。で、続けて入力するとまた、サジェスト。 という感じでアイテムをどんどん追加していけるＵＩになっています。 デモページ 使いどころが難しいものかもしれませんが、使い方を考えれば、色々と使えそうですね。 jQueryプラグインなので実装も簡単です。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQuery
twitter facebook hatena google pocket フォームで項目を入力させるとき、県名など決まりきったものであれば、1文字目の入力で候補を挙げることがユーザビリティ上、好ましいです。 jQueryプラグインjQuery Simple Filterを利用するとJavaScriptを利用して簡単に作成できます。 sponsors 使用方法 jQuery Simple Filterからjquery.simpleFilter-0.5.js、jquery.quicksilver.jsを、jQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.quicksilver.
twitter facebook hatena google pocket ユーザビリティに配慮したフォーム作りのため、入力項目にうっすらテキストを表示してみましょう。 JavaScriptライブラリjQueryのプラグイン「jQuery Form Tips」を使用すると簡単に実現できます。 sponsors 使用方法 jQuery Form Tipsからjquery.formtips.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.formtips.js"></script> <script type="text/javascript"> $(document).
ToggleVal :: jQuery Plugins by Aaron Kuzemchak 入力ボックスでクリックすると消えるデフォルト値を簡単実装「ToggleVal」。 入力ボックスにデフォルトでヒント値を入れておいてクリックすると消えるあの分かりやすいインタフェース。 実際に実装するとなると、ちょっと面倒ですが、ToggleValを使えば、メソッドを1回呼び出すだけで簡単に実装できます ↓↓↓↓クリックで消える↓↓↓↓ jQueryプラグインなので、以下のように使いやすくなっています。 $("input[name='name']").toggleVal( { option } ); 実装したくなった時、ちょっと面倒でまた今度、とならないようにこれを覚えておけばよさそう。
Giva Labs - mcDropdown jQuery Plug-in | Giva CSSでクールにデザインされた階層ドロップダウンボックス実装jQueryプラグイン「mcDropdown」。 一見なんの変哲もないドロップダウンですが、「▼」のボタンをクリックして驚き。 次のようなCSSでスタイルされたカッコいいドロップダウンが出現します。 階層が深いメニューであっても、普通のcomboボックスに比べて非常に分かりやすく作ることが出来ます。 CSSでレイアウトを調整できるというのはいいですね。 しかも、このドロップダウン、自由入力にも対応しており、「a」を入力したところ、補完候補をサジェストしてくれます。 JavaScriptも駆使されて実現されたこの機能ですが、うまく使えばサイトのナビゲーションを分かりやすくすることが可能かもしれません。 ドロップダウン関連エントリ HTMLだけで
jQuery Dropdown Check List HTMLだけでは実現できないドロップダウンチェックリストの作成JavaScript。 複数選択式の選択リストは普通に作成することが出来ますが、チェックボックスを使ったわかりやすいＵＩの実現は難しいですね。 「jQuery Dropdown Check List」ならjQueryプラグインなので、非常に簡単に実現できます。 $("#s6").dropdownchecklist(); のように、１行で初期化できるところも素晴らしいですね。 一昔前にやっていれば、どうやってやってるんだろうと検討もつかなかったと思いますが、進化したものです。 関連エントリ JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
