軽めのjQuery Advent Calendar 2012の６日目の記事です。画面下から「ニョキっ」と出現させる、エフェクト付きの表示について簡単に。
先日、いつもSaCSSでお世話になっているアミバ様…にjQueryを使って、画面下から「ニョキッ」と出現させるようなエフェクトをやるにはどうしたらいいか？と質問をされました。
jQueryにはエフェクト付きで表示・非表示を切り替えるメソッドが用意されていますが、今回はslideUp・slideDownを使います。
昨日『jQueryで選択したセレクタをハンドラ内で確認』というエントリーを書いたのですが、これを使えば独自メソッド内でliveのイベントを付けたい時にセレクタを簡単に使えると思ったので、昨日に続きメモエントリー。
$('◯◯')で選択したセレクタの◯◯の部分のみを、$('◯◯').click(function(){});などのハンドラ内で確認したい時、どう書けばいいだ？ってちょっとした疑問に思ったので、確認してみた。そのメモエントリー。
jQueryを使って、ちょっとしたhoverの機能を使いたいときは、.hover()メソッドを使っているのですが、これを.on()（.bind()）で使うのはどうやるんだろう？とかわかるようでわからなかったので、ちょっと調べてみた。
フォントサイズを変える「大・中・小」ボタンを画像も使って実装する方法
先にエントリーした内容の別版。前のはボタン部分をimgの画像として読みこんで、そのsrcを変えることで実現をしていたのですが、なんだか有用性が低かったきがしてならなかったので、もう少しシンプルに且つ画像でもCSSのボタンでもどちらでもOKなようなスクリプトに変えてみた。
【jQuery】inputのvalue値をもとにしたセレクタがうまく動かない？
jQueryを使って入力フォームにサンプル文字を入れておき、フォーカスで消すスクリプト:応用 機能追加編
先日エントリーした内容で、inputの内容でプレースホルダーとして「キーワードを入力」という文字のみを表示させていたのですが、input要素それぞれに実装する場合、それぞれのinputで任意の文字列を入れれるようにしておきたいですよね。
HTML5で実装されるplaceholdeが全ブラウザで利用できたらいいんですけど、表示されないブラウザもあるので、jQueryとカスタムデータ属性を使って実装してみました。
今回も以前にエントリーした内容の変更版。知人に「フォントサイズを変えるボタンを画像にして、アクティブなボタンを保持したい」という要望があったので、もらったソースを元に作ってみた
jQueryを使って入力フォームにサンプル文字を入れておき、フォーカスで消すスクリプト:応用 機能追加編
以前紹介した、入力フォームでプレースホルダーを実現する方法を紹介したのですが、inputのvalue値を元にセレクタの指定をしようとしたところ、うまく動作していないことに今更気づいた。
エントリーを書いた当時は問題なかったから書いていたと思うのですが、今確認しても動かないという・・・とりあえず確認してみることに。
少しのjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする
いつもブログを読んでいる『かちびと.net』に書かれていた内容で、たしかにシンプルなコードで、これは覚えておくと便利だなーなんて思ったコードだったのですがちょっとコード量が多いなんて気がしてしまったという。
で、なんとかもっとシンプルに、且つ、知っているとカッコイイ！と思うメソッドを使ってできないものかと思って試してみたところ、意外とすんなり、さらに少量化することができたのでご紹介しておきます。
jQuery で要素の CSS のプロパティの値を取得する方法 | ウェブル
内容を見ると、CSS のプロパティの値を取得する方法ってよりも、.toggle()で交互に別なイベント動かしたいよ〜！という事らしい。
見てすぐに思わず「できるよ〜」というツイートを@soraiyさんにしてしまったのですが、せっかくなので、.toggle()でも十分できることでしたので、ちょっと作ってみた！
仕事で、JSで計算ってできない？という質問が出てきたので、簡単に「できます！」と答えた。でもよくよく考えると、単純な処理だけで終えるべきか、しっかりつくり込むか考えないと。
とりあえずは単純に作ってみた。
以前にも、２回程エントリーをだしていたのですが、年末になって、この『リンクのクリック領域をブロック全体にするスクリプト』へのアクセスがちょっと増えていましたので、改めて再度まとめてみようかと思います。
jQuery：リンクのクリック領域をブロック全体にする簡単なスクリプト
紹介が滞ったりしていますが、それは置いといて、先日jQuery1.4.4がリリースされておりました。
ほとんどがバグ修正なんですが、一つだけ新機能として「.fadeToggle()」が追加されておりましたので、試してみました。
先日、jQUeryの1.4.3RC1がリリースされましたが、もう正式版がリリースされるのも間近になってることもあり、RC2がリリースされました！
jQuery 1.4.3 Release Candidate 2 Released
jQueryの新しいバージョン、1.4.3が今月中頃にリリースされる予定になっていますが、それに先立って、RC1がリリースされました。
jQuery 1.4.3 Release Candidate 1 Released
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。
CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。
結構前のエントリーで『jQueryメモ：親要素だけ消すってどうやるんだろう？』という内容を書いたのですが、最新版のjQueryではもっとシンプルな方法で親要素のみ削除できるようになったので、再度試しつつご紹介します。
Thickboxで表示したコンテンツだけを印刷できるようにするテクニックというのはあるのでしょうか？
[mixi] jQuery.js | しつもん 162
Thickboxで表示させた部分だけ印刷できるようになんてできるんだろうか・・・？なんて思ったけど、印刷ボタンつけてそこであれこれしたらできそうだなーなんて思ったので実践！！
Quick Tip: Learning jQuery 1.4's $.proxy | Nettuts+
jQuery 1.4で追加されたjQuery.proxy()、この使い方について解説がされていましたので、ご紹介。自分なりに変化させたりしていざチャレンジ！！
４回にも分けてしまったのですが、CSSをDOM読み込み前にJavaScriptで読み込むあれこれをご紹介してきました。最後は、なくても良かったのですが、外部化したCSSをjQueryで追加する方法を紹介してこのシリーズは終了にしたいと思います。
DOM操作で関わるCSSで、それをJavaScriptが使える環境時のみに読み込ませて、且つ、DOM読み込み完了前に実行しておくという方法をここまで紹介してきました。
