jQuery

JavaScript

2021/3/18

Javascriptでdisplay:blockを使って切り替えるとtrタグのレイアウトがずれる原因

Javascriptでdisplay:block,display:noneを切り替えて要素の表示・非表示をする場合があります。 同じ方法でtable trの表示・非表示を切り替えた場合レイアウトズレが発生します。 原因はtrタグの初期設定されているdisplayの値がblockではないことが原因です。 trの場合の初期値はblockではなく「table-row」 そのためtrの表示・非表示をする場合、displayを使ってtable-rowとnoneを切り替えるとうまくいきます。 tableで使うタグのd ...

JavaScript

2021/3/18

jQueryUIのカレンダー「Datepicker」のオプション・カスタマイズ

「Datepicker」はjQueryのライブラリで、カレンダー機能を簡単に実装できるライブラリ。お問い合わせフォーム等で、inputのテキストフォームや、カレンダーアイコンをクリックしたときに表示されるカレンダーがありますよね?カレンダーの日付を選ぶと選んだ日程がテキストフォームに値として入るといった仕組みができあがります。 カスタマイズ 用意されているオプションを利用することでカレンダーをカスタマイズできます。 当月カレンダーに先月、翌月の日付を表示させる 当月カレンダー内の月初と月末に前月と翌月の日 ...

JavaScript

2021/3/18

jQueryUIのカレンダー「Datepicker」の基本・ダウンロード・日本語化

「Datepicker」はjQueryのライブラリで、カレンダー機能を簡単に実装できるライブラリ。お問い合わせフォーム等で、inputのテキストフォームや、カレンダーアイコンをクリックしたときに表示されるカレンダーがありますよね?カレンダーの日付を選ぶと選んだ日程がテキストフォームに値として入るといった仕組みができあがります。 jQueryUIの設定 Download Builder | jQuery UIよりライブラリファイルをダウンロードします。/download/のページでどのコンポーネントをつける ...

no image

WordPress カスタマイズ

2021/3/7

WordPressのphpにjQueryを使用して動かす

前提 通常のjQueryの記述は以下の$(function()~ もしくは$(document).ready(function()~~で記述しますが、 WordPressの場合には書き方が変わります。 $(function(){ // 処理 }); もしくは $(document).ready(function(){ //処理 }); WordPressでのjQueryの書き方 jQuery(function($){〜〜 で書き始める。 jQuery(function($){ //処理      $('. ...

JavaScript

2021/2/18

areaタグをレスポンシブ対応させる方法

画像内にイメージマップをつくってリンクをつけることができるareaタグですが、 アクションを起こせる範囲を指定するため、レスポンシブ対応させるとなると手間がかかります。 areaタグをレスポンシブ対応させる方法 結論 ・javascriptライブラリ「jQuery-rwdImageMaps」で対応可能 CDNから読み込み、もしくはダウンロードしてきてライブラリを読み込ませます。 ジェネレーターでイメージマップを作成後、タグに使うimgに usemap="#image-map"を書いてrwdImageMap ...

JavaScript

2021/1/22

jQueryでアコーディオン/ボタンをアニメーション回転させる

jQueryでアコーディオン/ボタンをアニメーション回転させる 基本的にはjQueryでアコーディオン(クリック開閉メニュー)と同様の手法 トリガーとなるボタンの位置は絶対配置で指定。 toggleClassでクラスを追加したときにCSSで回転させる。 回転アニメーションはさせる場合には「transition」の指定が必要。 <ul> <li class="aco"> <a href="">メニュー親</a> < ...

JavaScript

2021/1/22

jQueryでアコーディオン(クリック開閉メニュー)

jQueryでアコーディオン(クリック開閉メニュー) slideToggle()を使って実装するのがかんたん。 hover,clickをEventListenerにしてslideToggle()を実行させる例がほとんど。 しかし、slideToggleの場合、css transitionのアニメーションが効かないので ボタンを押してボタンのアニメーションをさせる場合にはアニメーション用のスクリプトを自作しないといけない。 <div class="faq_oya"> < ...

JavaScript

2021/3/20

jQueryのSlideToggle()のカスタマイズパターン/アコーディオン開閉時にテキストを変更/lideUP(),slideDown()で画像を切り替える

アコーディオン処理を加えるときにとても楽ちんなのがjQueryのSlideToggle()です。短い文でかんたんにアコーディオン開閉時を実装できます。 SlideToggle()とともに「もっと見る」「閉じる」のようなボタンのテキストを変化させたいことがあります。今回はそのサンプルを紹介します。 jQueryのSlideToggle()のカスタマイズパターン/アコーディオン開閉時にテキストを変更する。 javaScriptでやること ・SlideToggle()を実装する・SlideToggle()の開閉 ...

JavaScript

2021/2/6

【jQuery】「next()」「prev()」で要素の取得して画像を変更する。

JavaScriptのライブラリとして一般的になったのが「jQuery」です。 いまだにjQueryを使ったサイトの案件はたくさんありますので、 JavaScriptの勉強をしていく上では逃げられないライブラリになっています。 「ボタンをオン・オフしてjQueryで画像を変えたい!」と言う時困るのが ・そもそもの画像の変える書き方がわからない ・画像を変える要素を選択する書き方がわからない というところでしょうか。 初歩的な内容ですが、とても需要があり使うことが多いため書き方を覚えておくと便利です。 jQ ...

no image

WordPress カスタマイズ

2021/2/7

jQueryを使用したスライドショー GalleryView

概要 jQueryを使用したスライドギャラリー。 細かいオプションが指定できる ・本家サンプル jQueryのサイトに移った模様 GalleryView | jQuery Plugins 2011/7/7 最新版はgalleryview 3.0-beta 1.1 Photo Gallery - Light Theme Photo Gallery - Dark Theme Your Daily Horoscope Webcomics Roundup Photo Gallery - More Customiz ...

© 2021 さくらいらぼWEB版 /個人ブログ