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

羊と人間のクローン

jQuaryを用いれば予め.jsファイル内に記述した要素だけでなく、セレクターを使って既にページ内にある要素を複製することもできます。
今回は要素を格納するために変数なども用いています。

羊と人間のクローン

See the Pen 羊と人間のクローン by mine333 (@kenic_ono) on CodePen.0

こちらはremoveも可

See the Pen 羊と人間のクローン by H by mine333 (@kenic_ono) on CodePen.light

Smooth Scrollを実装するためのjQuaryプラグイン

今回はスムーススクロールを実装するためのjQuaryプラグインを紹介します。
スムーススクロールとは、ボタンを押すとトップページへ戻る動作が滑らかにおこなわれる機能の事です。
ページのスクロールを操作する場合に注意すべきは、ブラウザによってscrollTopプロパティを利用できる要素がブラウザによってhtmlの場合とbodyの場合がある点です。
SmoothScrollプラグインはこれを考慮したうえで作成されていますので、ご活用ください。

jQueryでドロワーメニューを実装する方法

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

.slideToggleで開閉可能なパネル、アコーディオン

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

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

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

[定番]レスポンシブ対応サイトのスライダーを実装したい時

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

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

Media Queries(メディアクエリ)とJavaScriptの連携について

cssでメディアクエリを設定するように、JavaScriptでもwindow.matchMediaというメソッドが使用できます。JQueryではなくJSネイティブのコードで、プラグイン使用の際にjsファイルで制御できるので便利です。この形のまま活用して、簡単なWebサイトで試してみましょう。

var $win = $(window);

$win.on('load resize', function() {  
  if (window.matchMedia('(max-width:480px)').matches) {
    // SPの処理
  } else if (window.matchMedia('(max-width:768px)').matches) {
    // TABの処理
  } else {
    // PCの処理
  }
});

例えば、drawer.jsを導入したが、スマホサイズ以外(max-width:480px)では機能を切る場合

$(function () {
  var $win = $(window);

  $win.on('load resize', function () {
    if (window.matchMedia('(max-width:480px)').matches) {
      $(".drawer").drawer();
    }
  });
});

※buttonの非表示はstyle.cssとdrawer.cssの調整が必要です。

他にも様々方法があります。

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;して非表示にしましょう。

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

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

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

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

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

‘$’ was used before it was defined.

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

/*global $: false */