jQuery– tag –
-
Colorbox.jsでモーダルウィンドウにスライダーを入れる
Colorbox.jsを使うとオプションの設定でモーダルウィンドウ内にスライダーを入れることができます。 ColorboxはjQueryで動くレスポンシブ対応のモーダルウィンドウです。 Colorbox - a jQuery lightboxColorbox Examplesデモページ //クラス要素を指定しな... -
Javascriptでdisplay:blockを使って切り替えるとtrタグのレイアウトがずれる原因
Javascriptでdisplay:block,display:noneを切り替えて要素の表示・非表示をする場合があります。 同じ方法でtable trの表示・非表示を切り替えた場合レイアウトズレが発生します。 原因はtrタグの初期設定されているdisplayの値がblockではないことが原因... -
jQueryUIのカレンダー「Datepicker」のオプション・カスタマイズ
「Datepicker」はjQueryのライブラリで、カレンダー機能を簡単に実装できるライブラリ。お問い合わせフォーム等で、inputのテキストフォームや、カレンダーアイコンをクリックしたときに表示されるカレンダーがありますよね？カレンダーの日付を選ぶと選ん... -
jQueryUIのカレンダー「Datepicker」の基本・ダウンロード・日本語化
「Datepicker」はjQueryのライブラリで、カレンダー機能を簡単に実装できるライブラリ。お問い合わせフォーム等で、inputのテキストフォームや、カレンダーアイコンをクリックしたときに表示されるカレンダーがありますよね？カレンダーの日付を選ぶと選ん... -
WordPressのphpにjQueryを使用して動かす
【前提】 通常のjQueryの記述は以下の$(function()~ もしくは$(document).ready(function()~~で記述しますが、 WordPressの場合には書き方が変わります。 $(function(){ // 処理 }); もしくは $(document).ready(function(){ //処理 }); WordPressでのjQue... -
areaタグをレスポンシブ対応させる方法
画像内にイメージマップをつくってリンクをつけることができるareaタグですが、 アクションを起こせる範囲を指定するため、レスポンシブ対応させるとなると手間がかかります。 【areaタグをレスポンシブ対応させる方法】 結論 CDNから読み込み、もしくはダ... -
jQueryでアコーディオン/ボタンをアニメーション回転させる
【jQueryでアコーディオン/ボタンをアニメーション回転させる】 基本的にはjQueryでアコーディオン（クリック開閉メニュー)と同様の手法 トリガーとなるボタンの位置は絶対配置で指定。 toggleClassでクラスを追加したときにCSSで回転させる。 回転アニメ... -
jQueryでアコーディオン（クリック開閉メニュー)の書き方
【jQueryでアコーディオン（クリック開閉メニュー)】 slideToggle（）を使って実装するのがかんたん。hover,clickをEventListenerにしてslideToggle（）を実行させる例がほとんど。 しかし、slideToggleの場合、css transitionのアニメーションが効かない... -
jQueryのSlideToggle()のカスタマイズパターン/アコーディオン開閉時にテキストを変更/lideUP(),slideDown()で画像を切り替える
アコーディオン処理を加えるときにとても楽ちんなのがjQueryのSlideToggle()です。短い文でかんたんにアコーディオン開閉時を実装できます。 SlideToggle()とともに「もっと見る」「閉じる」のようなボタンのテキストを変化させたいことがあります。今回は... -
【jQuery】「next()」「prev()」で要素の取得して画像を変更する。
JavaScriptのライブラリとして一般的になったのが「jQuery」です。 いまだにjQueryを使ったサイトの案件はたくさんありますので、 JavaScriptの勉強をしていく上では逃げられないライブラリになっています。 「ボタンをオン・オフしてjQueryで画像を変えた... -
jQueryを使用したスライドショー GalleryView
【概要】 jQueryを使用したスライドギャラリー。 細かいオプションが指定できる ・本家サンプル jQueryのサイトに移った模様 GalleryView | jQuery Plugins 2011/7/7 最新版はgalleryview 3.0-beta 1.1 Photo Gallery - Light Theme Photo Gallery - Dark...
1