
一個のサンプルは非常に単純な構造になっておりますゆえ、jQueryをすでにやったことがある人にとって必要ないものだということをあらかじめご了承くださいませ。 エフェクト関係とかそれ以前に、どんなことをすればどうなるのかという基礎的なサンプルです。 プラグイン関係は以前書いた記事を参照してください。 jQueryでweb制作をする時にキープしておきたい30リスト そもそもjQueryって何ですかという人は以下を。 今更ですが、jQueryにはまりました 追記:ほんとすいませんローカルで動作確認したところ動くのですが、オンラインではfirefoxしか動作確認せずに公開。 IE7では上の4つが動きません。 いくつか確認したのですが、どうしてもIE7でJavaScriptエラー。ダメすぎる自分・・・。 追記2:まいりました。他のサイトの記述を見てもミスが見つかりません。言語問題でしょうか・・・アク
nyroModalは、アニメーションを伴って表示・非表示される、高いカスタマイズ性を備えたモーダルウインドウを生成するスクリプトです。 nyroModal デモページ nyroModalが生成するウインドウには、テキストなどのコンテンツをはじめ、複数の画像を使用したギャラリーや動画、AJAXコンテンツやフォームなどを表示することができます。 また、デフォルトのままでも気持ちよく表示・非表示されるアニメーション、背景、ウインドウなどをカスタマイズすることも可能です。 nyroModalはjQueryのプラグインのため、動作にはjquery.jsが必要です。
28 05 09 2007 javascriptライブラリjQueryでcookieを超簡単に扱う方法 jQuery, Ajax javascriptでcookieを扱うのって結構めんどくさかったりしたのですが、これは超シンプル <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <!--head内▲--> <script type="text/javascript"> <!-- $.cookie('cookiename','data',{ expires: 7 });//書き込み{保存days} document.write($.cookie('cookiename'));//
こんにちは。「本が好き!」などを担当している根岸です。 【01】改めて、Ajax って、なんだろう? 最近は、Ajax を使用したサイトが増えてきました。 Ajax とはブラウザ内(リロードレス)でサーバー側との非同期通信(同期可)を行い、その結果、インタラクティブ性の高いユーザーインターフェースを構築する仕組みを指します。 2005年に登場した、 Google Maps や、 Google Suggest から一気に広まりました。 Ajaxとは、そもそも「 Asynchronous JavaScript + XML 」の略です。直訳すると「非同期な JavaScript と XML」となりますが、「なんじゃそりゃ?」で すよね。 昔ながらのWebサイトは、 (A)ウェブブラウザがページのリクエストをする (B)ウェブサーバーがリクエストされたページを HTML 形式で返す という通信を、
Technology Appleのサイトで使われているようなアコーディオンメニューを作成する方法『Slide out and drawer effect』 クールなアコーディオンメニューが作りたい。 そんなあなたにおすすめなのが、『Slide out and drawer effect』。Appleのサイトで使われているようなアコーディオンメニューを作成する方法だ。 このエントリーでは、jQueryを使ったクールなアコーディオンメニューの作り方が紹介されている。 ↓でデモが見られる。 » See the plugin version of the slide out effect とてもかっこいいので、ぜひ実装してみてはいかがだろうか。 Appleのサイトで使われているようなアコーディオンメニューを作成する方法、チェックして使っていきたいですね。 B-COMPANYからシェルフが届いて収納
The Highly Extensible CSS Interface CSS・JSを活用して高度なUIを作成するサンプル集「The Highly Extensible CSS Interface」。 デモサイトのようなリッチなUIを実現するためのサンプル集 Part I: The Foundation Part II: CSS Selectors & jQuery Part III: Adding Ajax Interactivity Part IV: Testing for Extensibility jQuery、Ajaxなどを活用してページを作成していく部分はページ作りにおいて非常に参考に出来る部分が多いです。 IE7, FireFox2, Safari2.x 以降が推奨環境となっているようです。
Technology デザイナーのための素晴らしいjQueryのチュートリアル8選『8 Fantastic jQuery Tutorials for Designers』 jQueryでクールなインターフェースを実装したい。 そんなあなたにおすすめなのが、『8 Fantastic jQuery Tutorials for Designers』。デザイナーのための素晴らしいjQueryのチュートリアル8選だ。 以下にご紹介。 ・Slide out and drawer effect アコーディオンメニュー ・Chain-able transition effects 数行のコードで大きさや透明度を変えながらボックスを動かすことができる ・jQuery Tabs リロードなしでタブを遷移 ・Creating an Editable Chart 編集できる表を作成 ・Easy Multi Sel
10 Websites That use JavaScript Animation Effectively!! The Most Important think is not -what you say, the important thing is -how you say and when you say , While some days before we are using flash for buttons, gallery etc, later now JavaScript frameworks like mootools , scriptallicious and prototype replace the flash with a light weight code and we can get the same effect like flash But how to
Want more? Buzz A powerful Javascript audio library over the HTML5 audio element. Vegas A jQuery plugin to to add beautiful fullscreen backgrounds to your webpages and create amazing Slideshows. SundayMorning A jQuery plugin to translate content on the fly. Face Detection A jQuery plugin to detect faces in pictures. markItUp! universal markup jQuery editor markItUp! is a JavaScript plugin built on
結構昔からあったんですが、使ってみると意外と素敵なので記事に残しておきます。 イメージギャラリーを作成する時などにも使えそうですし、非常に高度な動きを簡単に実装できますので便利です。 ※この記事はJQueryJavaScriptを使ったプラグインの紹介です。 何はともあれサンプルを見てみるのが早いかも 初級者用サンプルデモ 中級者用サンプルデモ1 中級者用サンプルデモ2 上級者編サンプル1 上級者編サンプル2 その他のバライティサンプル JQueryの基本的構造 基本はjquery.jsと、プラグイン用のjsファイルをまず読み込みます。 ※あくまでも基本構造の説明なので、この通りコピペしてもうごきません。 <script type="text/javascript" src="../jquery-1.2.1.js"></script> <script type="text/javascri
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ?'); }, function(){ $(this).text('ヌー'); } );
Javascript/Ajax cheat sheets >> Scott Klarr Javascript/Ajaxのチートシート集。 JavaScript言語に関するチートシート、そして、jQuery、Prototype、YUI、Scriptacuolous等のライブラリ用チートシートも。 よく使うものは印刷して貼っておきたいですね。 関連エントリ Prototype.js 1.6.0 用チートシート
すべてはここから $(DOMエレメント) $("CSSセレクタ") 例 $(document.body); $("div, #hoge, p.fuga"); セレクタ class=“hoge”のAタグにclickイベントを設定。 $(function(){ $("a.hoge").click( function(event) { window.alert("クリック"); event.preventDefault(); } ); }); ページロードが完了したら関数を実行 $(関数) class=“hoge” な a のDOMエレメントノードを保持しているjQueryオブジェクトを取得 $("a.hoge") 上記のjQueryオブジェクトが保持しているエレメントノードに対してonclickイベントを設定 $("a.hoge").click(関数) この場合$(“a.hoge”)で取れる要
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 jqzoom 画像の一部をズーム。 Shadowbox 複数のJavaScriptライブラリに対応したLightbox。 Faceb
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く