「jQuery」カテゴリーアーカイブ

jQueryで実装されるドロワーメニュー

jQueryでドロワーメニューを実装する方法を紹介します。
ドロワーメニューとは、アイコンをタップすると引き出しの様に開閉できるメニューの機能の事です。開閉部の分だけレイアウトに余裕ができるので、スマートフォンアプリやレスポンシブ対応のトップページなどにも取り入れられています。

jQueryコーディング時のエラー表示を考える

jslintとはJavaScriptのエラーチェック機能ですが、jQueryを使用する際には多くのエラーが出るためチェックを緩めることもできます。ちなみに、lintとは「糸くず」の意味で、~linterや ~lint というエラーチェックツールを見かけます。

コピペするコードはこちらですが…

貼付けの際には気をつける点があります。先頭行の波括弧{の後に貼付けて、貼付けたコードの後にカンマ,を入力します。これは、jsonファイルがデータをカンマ区切りで管理しているためです。※正しく認識されない場合は、bracketsが正常に動作しません。

とはいえ、jslintを生かしたままでもエラーの意味を考えると、

‘$’ was used before it was defined.

なので、「定義される前に$が使用された」という意味です。この定義はjQueryの本体プログラムにあるので、jslint側にスルーしてもらうために、jsファイルの1行目に以下の記述を追加すれば警告が消えます。

/*global $: false */

jQueryプラグインのCSSをメディアクエリで制御する

メディアクエリとは、Webページの見栄えを記述するCSSのバージョン3で追加された仕様の一つで、表示された画面環境に応じて適用するスタイルを切り替える機能です。

一般的には、通常のCSSを記述した後に画面サイズを限定したスタイルで上書きする方法です。

/*画面サイズ480px(spサイズ)までのスタイルを記述 */
@media screen and (max-width: 480px){ ... }

/*画面サイズ500pxから800pxまでのスタイルを記述 */
@media screen and (min-width: 500px) and (max-width: 800px) { ... }

このcssメディアクエリ内にjQueryプラグイン用cssを記述しても大丈夫ですが、以下の方法もあります

メディアクエリを使ってcssを読み込む方法

①HTMLのlinkタグのmedia属性に記述
②css内に@import記述

ひとつめはHTMLで読み込む方法

<!--media属性に画面サイズを記述-->
<link rel="stylesheet" href="css/drawer.min.css" media="screen and (max-width: 480px)">

ふたつめはCSSで読み込む方法

@import url(drawer.min.css) screen and (max-width: 480px);
/*cssファイルの先頭行で使用 ※ただし、@charsetまたは、他の@importでのcss読み込み、コメント除く*/

drawer.jsの場合は、通常の方法で最後にbuttonをdisplay:none;して非表示にしましょう。

div要素をanimate.cssでアニメしてリンク先へ

jQuaryを使えばa要素にリンクを指定しなくても.js内の記述次第で外部リンクを作ることも可能です。
a要素でリンクするとややこしい場合等はこの方法でリンクを指定してもいいかもしれません。
※SEO対策や標準的なマークアップの都合上、外部リンクには通常HTML内でa要素を用いるのが一般的です。

  $(function () {
    $("#test").on('click', function () {
        $(this).addClass("animated zoomOutUp"); //animate.cssを利用したアニメーション※animate.cssのリンクをhtmlに忘れずに
        setTimeout(function () { //setTimeoutはfunctionを「何秒後」に実行するか指定
          location.href = 'http://yahoo.co.jp'; //location.href="URL" で指定したURLへ飛ぶ
        }, 1500);
    });
  });

パララックス

パララックスメニューをjQuaryで実装する方法を紹介します。
パララックスメニューは一時期は大いに盛り上がりましたが、過度なものはスマホのスクロール等では煩わしいため避けるのが賢明です。(※以下紹介のparallax.jsはスマホでの通常の垂直スクロール操作には対応していない様子。)

とはいえ、スマホのジャイロセンサーを利用したものが目を引くので、ご参考に。

パララックスを設定したい箇所ににはクラス「.scene」を設定します。
深度は「data-depth=”x.xx”」で設定。0に近づくと深度は浅くなります。

[定番]レスポンシブでのスライダー

レスポンシブ対応サイトのスライダーを実装したいときの例を紹介します。
今回のサンプルコードには、bxsliderというCSSテンプレートを用いています。
(※bxsliderはCDNを用いて取得)
また、スライダー下のキャプションテキストが表示される画像には自作の.jsファイルを用いています。

イメージの枠を消したい場合は、cssの.bx-wrapper .bx-viewportをコメントアウトして下さい。その他、オプションが多数ありますので、検索してみましょう。

.slideToggleでアコーディオン

「アコーディオン」とは開閉可能なパネルのことで、表示領域の少ないデバイスや、ミニマルなデザインでは有効に活用できます。今回は.slideToggleメソッドと.next()メソッドで簡易的に実現しています。

.slideToggleメソッドは、jQueryオブジェクトにマッチした要素をスライドしながら、表示されている場合は非表示に、非表示の場合は表示します。また、.next()メソッドはjQueryオブジェクトにマッチした要素集合の各要素の直後の兄弟要素を取得します。

See the Pen .slideToggleでアコーディオン by mine333 (@kenic_ono) on CodePen.light