[B! スニペット][jQuery] ColdSleepのブックマーク

ColdSleep id:ColdSleep

スニペットとjQueryに関するColdSleepのブックマーク (5)

jQuery Snippets #3 - NxWorld
基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの第3弾です。動きをすぐ確認できるデモなどは基本的に用意していないので、実際の動きを確認したい場合などは自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して確認してください。要素の幅・高さを取得する jQueryを使って要素の大きさを取得する方法で、下記のように幅だけを取得するもの以外にもpaddingやborderも含めての大きさを取得することもできます。また、ここでは高さを取得したい場合はwidthの部分をheightに変更すれば取得できます。 // width $('element').width() // width + padding $('element').innerWidth() // width + padding + bord
ColdSleep 2015/11/26
jQuery

スニペット
リンク
jQuery Snippets #4 - NxWorld
基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの第4弾です。動きをすぐ確認できるデモなどは基本的に用意していないので、実際の動きを確認したい場合などは自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して確認してください。 hoverでon/off切り替えまずbtn_01_off.png, btn_01_on.pngのように同じ拡張子で且つ画像名が_offと_on部分のみ異なるホバー前後の画像を用意しておきます。あとは、HTMLが<a href="#"><img src="btn_01_off.png" alt="ボタン" /></a>のような記述を想定のときにjQueryを下記のように記述することで、ホバー時に画像がオン画像へと切り替わります。 $('a img').hover(functi
ColdSleep 2015/11/26
jQuery

スニペット
リンク
jQuery Snippets #2 - NxWorld
ColdSleep 2015/11/26
jQuery

スニペット
リンク
jQuery Snippets #1 - NxWorld
基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの第1弾です。今まで頻繁に使うものや覚えておきたいと思ったもの、今後使う機会ありそうなものを見つけた場合は、とりあえずEvernoteやJSFiddleなどに突っ込んでおいたりエディタへスニペット登録したりという感じだったのですが、それらをスッキリさせたくなった＋日頃参考にさせてもらっているかちびとさんの「jQueryスニペット」みたいなのをパクry… 自分用にほしかったので、ある程度溜まったらこのブログにまとめていくことにしました。この動きならわざわざjQuery使わないといった脱jQueryな感じの記事もよく見かけるし、自分も案件によっては使わないことが稀にあったりはしますが、やっぱりjQueryだといろいろと短い記述で容易に指定できたり、ちょっと特殊な動きの場合でもプラグインを使っ
ColdSleep 2015/11/19
jQuery

スニペット
リンク
[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips
jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用でも無料で利用できます。ページの上に戻るボタン画像のプリロード画像がロードされているかチェックリンク切れの画像を自動修復ホバーのトグル入力欄を使用できなくする aタグのクリックイベントだけを利用するアニメーションを簡単に設定するシンプルなアコーディオン異なる高さのdiv要素を揃える外部リンクを新しいタブ・ウインドウで開くテキストが無い要素は非表示にするページの上に戻るボタン
ColdSleep 2015/10/26
jQuery

スニペット
リンク
1