jQueryで動くアコーディオンを作ってみました。 CSS3のtransitionを利用していますので、IE8以下は▲,▼の表示が表示されません。 IE9以降のブラウザで御覧ください。 サンプルの解説 「タイトル」をクリックすると「中身」がぬるっと出てきます。 「タイトル」の右側にある▼マークは「中身」が開くと▲に変わります。 三角部分はcssで作成しています。画像は使っていません。 アコーディオンの中身のlistは#にリンクしています。

TOP  >  javascript , WebDesign  >  質の高いUXを与えるためのjQueryプラグイン集「9 jQuery Plugins for Improving Website Navigation」 WEBにとってUXはとても重要な要素の一つ。隅々までサイトを見ていただくためにはここがダメだと利便性が悪く、多くのユーザーに不快な思いを与えてしまいます。今日紹介するのはjQueryで質の高いUXを実現するためのjQueryプラグインを集めたエントリー「9 jQuery Plugins for Improving Website Navigation」です。 Intro.js jQueryを利用した様々な仕組みが紹介されています。クリエイティブであれば良いというものではありませんが、斬新な動きだったり、仕組みだったり、工夫を凝らしたプラグインが集められています。今日はそ

初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')

jQueryのイベント記述方法はいくつかあり、大雑把におさらいしたのが以下の3パターンです。 まず一番基本的なのが $("a").click(fn) や $("a").bind('click', fn) です。click(fn)はbind('click', fn)の省略形です。 次にjQuery1.3で $("a").live("click", fn) という機能が出来ました。liveの良いところはDOM操作で出たり消えたりするエレメントに対して再バインド無しでイベント定義ができる利便性と、内部的にはbind個所がdocumentの1か所になり複数個所へのbindが無くなることによるメモリ効率と実効速度の向上です。 更にjQuery1.4.2で $("#foo").delegate("a", "click", fn) という書き方が出来るようになりました。これは特定要素以下に限定するliv

Ajax リクエストをキューに入れて順序を制御する場合、Ajax Queue プラグインが利用されます。 // // jquery-ajax-queue_1.0.js // // レスポンスが返るまで次のリクエストを実行しない（一つずつ順番に処理） jQuery.ajaxQueue({ url: "test.php", success: function(html){ jQuery("ul").append(html); } }); // レスポンスが全て得られるまで各コールバック関数を実行しない（一括処理） jQuery.ajaxSync({ url: "test.php", success: function(html){ jQuery("ul").append("<b>"+html+"</b>"); } }); この Ajax Queue には $.ajaxQueue(options

40+ Brilliant Free jQuery Image Gallery/Slider Plugins + 14 Tutorials jQuery image galleries (also known as homepage sliders, slideshows or image carousels) have become more and more common on websites since the inception of jQuery in 2006. Designers and Photographers are especially attracted to them because they allow you to present many beautiful images in an interesting way. You can easily load

皆さんご存知のFirefoxのアドオン「firebug」コーダーとかであれば、これを入れている人はかなり多くいると思います！ しかし、中には『linker』のまーしーさんや『スグラボ』のフジカワさんのように、”いまいちFirebugを使いこなせていない”なんて人もいるのではないでしょうか？ 今回はそんな方もふくめ「FireQuery」のご紹介を仕様と思います！個人的にかなり便利だと思います。 FireQueryとは？ FireQueryは、Firebugを便利にさせる機能強化アドオンで、Firebugのコンソールで楽々jQueryを使えるようにしたり、DOM画面イベントがどこについているのかとかを確認することができるようになるツールです。 ただのFirebugでもJavaScriptのデバッグや動作の確認をすることはできたのですが、FireQueryを入れることによって、jQueryを使っ

実際にコードを書いて学べる学習コンテンツ・Try jQueryのご紹介です。jQuery公式のオンライン学習サイトっぽいですね。英語ですけどこれから学ぼうという方にはうってつけかもしれません。 実践でjQueryを学べるサイトです。スライドも完備されています。英語が苦手な方にはちょっと難しいかもですけど・・ ドメインから察するに公式のものでいいと思います・・確認はしていませんけど。内容は基本的なものからスタートします。 スライドからスタートです。 他の学習サイト同様、指示通りに進めていきます。 正解ならSuccess!の文字が出て次に進みます。 これから始めたい、という方は如何でしょうか。 Try jQuery

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結

Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilites. Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of th

About Creatorish.com Edit Creatorish.com is a captivating domain name that sparks thoughts of innovation and originality. The name is a clever combination of "creator" and "ish," suggesting a creative and imaginative mindset. It's perfect for startups that focus on creativity, design, technology, and anything that involves inventiveness. The name is short, catchy, and easy to remember, making it a

jQueryのajaxとloadの違いを教えてください キーワードを入力したらkeyupに合わせて通信して表示するプログラムを作っています jQueryのajaxを使って作っていたのですが 知恵袋で質問したら2通りの答えが返ってきたのです。 ajax-------------- $.ajax({ type: "POST", url: "keyword.php", data: { "keyword":keyword }, success: function(data){ if(data != '') { document.getElementById("disp").innerHTML = data; -------------------- load--------------- $(#'keyword').keyup(function()｛ keyword=$(#'keyword').v