3ステップでツールチップを作成「jQuery Simple Tooltip」
twitter facebook hatena google pocket ツールチップと呼ばれるその要素に関する詳細などをヒントっぽく表示する手法があり、フォームなどに使用するとユーザビリティの向上に役立てられます。 3ステップでこのツールチップを導入できるjQuery Simple Tooltipを紹介します。 sponsors 使用方法 【STEP 1】 jQuery Simple Tooltipからファイルをダウンロードします。 【STEP 2】 以下を記述します。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.simpletooltip-min.js"></script> <script> $(function(){
[WEB DESIGN] 11 Excellent Solutions for Creating Tooltips - エクセレントなTool Tip
[WEB DESIGN] 11 Excellent Solutions for Creating Tooltips – エクセレントなTool Tip Pocket Tweet エクセレントなTool Tipがまとめられた記事。各紹介は、それを実現するためのチュートリアルにリンクしてます。中でも個人的にアツいのがPanicのCodaのアレ。チュートリアルが紹介されてるので、こりゃいつか使ってやろうなんて思ってます。どれもCSSとJavascriptで作られてるので、わりと簡単に導入できそうです。いやー助かるなぁ。 11 Excellent Solutions for Creating Tooltips >>
ナンバリングされた脚注を簡単に作成できるJavaScript「jQuery Footnotes」
twitter facebook hatena google pocket ページが長くなるのを避けるため、また引用文典を文末に記載するために脚注が使用されます。 1つずつ記述してリンクするのは面倒だし、ナンバリングしていたら追記するたびに修正しなければいけません。 jQuery Footnotesでは、そんな面倒を一気に省いてくれます。 sponsors 使用方法 jQuery Footnotesから、jquery.footnotes.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.footnotes.js"></script> <script language=
JavaScriptライブラリ「mootools」でテキストにエフェクトをかける
twitter facebook hatena google pocket Mootools Function Chainingにて面白い表現が紹介されていました。 JavaScriptライブラリ「mootools」を使用し、テキストにエフェクトをかける方法です。 sponsors 使用方法 mootoolsからmootools.jsをダウロードします。 <script src="mootools-1.2.1.js" type="text/javascript"></script> <script type="text/javascript"> window.addEvent('domready', function(){ var fnChain = new Chain(); var move = $$('id名'); //エフェクトをかけたい対象のid名 move.each(functi
[JS]スムーズなスライドが気持ちいい、パンくずのスクリプト -jBreadCrumb
jBreadCrumb demo パンくずはリスト要素で実装されており、既存のパンくずに適用することも簡単です。 「jquery.jBreadCrumb.js」の最後に記述してあるオプションでは、オープンするルール、オープンしておくレベル、アニメーションのスピード、クローズ時のサイズなどを変更できます。 オープンするルールの最大文字数と最小文字数を100に、エレメント数を1に、オープンしておくレベルを終わりから2に、クローズ時のサイズを20に変更。 jBreadCrumbはjQueryのプラグインのため、動作にはjquery.jsが必要です。
滑らかにアニメーションして美しいポップアップを作成するチュートリアル:phpspot開発日誌
Coda Popup Bubbles | jQuery for Designers - Tutorials and screencasts 滑らかにアニメーションして美しいポップアップを作成するチュートリアル。 Downloadにカーソルを合わせると、フェードインしつつ次のようなポップアップが表示されるものを作成していくチュートリアルです。 jQueryとCSSを用いて実装しているようですが、jQueryによって比較的簡単に実装されている様子。 ページのレイアウトを崩さずにヒントを表示できるポップアップですが、こうしたエフェクトがよりヒントを強調できるので覚えておいてよさそうですね。 関連エントリ LightBox風に角丸で可愛く画像をポップアップしてくれる「Facebox」 Windows9Xなテーマの同一ウィンドウ内ポップアップ窓作成JavaScriptサンプル「Bride of Wi
jQueryでiCalライクなカレンダーを作るチュートリアル – creamu
jQueryでクールなカレンダーを作りたい。 そんなときにおすすめなのが、『Create astonishing iCal-like calendars with jQuery』。jQueryでiCalライクなカレンダーを作るチュートリアルだ。 このエントリーでは、↑のようなカレンダーの作り方が紹介されている。マウスオーバーするとふわっとポップアップするツールチップテキストつきだ。 ソースファイルもダウンロードできるので見てみてほしい。 デモは以下から。 View the online Demo! jQueryでiCalライクなカレンダーを作るチュートリアル、チェックして参考にしてみてはいかがだろうか。 Create astonishing iCal-like calendars with jQuery 天気がよくて気持ちいいですねー。 先日買った雑誌を読んでいます。「Casa」はまた紙面
[JS]リスト要素に自動でナンバリングを追加するスクリプト
リスト要素のclassや新しい要素に自動でナンバリングして追加するスクリプトをWeb Designer Wallから紹介します。 jQuery Sequential List demo 上記キャプチャのデモでは、「class="item1", class="item2"、、、」をスクリプトで自動追加し、Step1, Step2...の背景画像を表示させています。 元のHTMLにはclassを記述せず、下記のようなコードで実装されています。 ※キャプチャ箇所（Step1, Step2）のみ抜粋。 HTML <textarea name="code" class="html" cols="60" rows="5"> <ol id="step"> <li><h3>PhotoShop Part</h3></li> <li><h3>jQuery</h3></li> </ol> </textarea>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Custom Select boxes with jquery | 設置サンプル
http://e0166nt.com/blog-entry-506.html
[JS]jQueryで実装するアクセシブルでフレキシブルなタブ
http://www.designwalker.com/2009/02/jquery-dropdown.html