jQueryプラグイン

スマホサイトをよりパンクでカッコイイものに仕上げるためのjQueryプラグインをご紹介していきます。
スライドショー、イメージギャラリー、その他いろんな動きなどを簡単に実装できるので一度使ってみて下さい。
ただjQueryプラグインの多くはスマホ用に作られているわけではないのでうまく動かないものもあります。
ここでは実際に試してみて使えたものだけをご紹介していきます。
※ファイルは各配布サイトよりダウンロードしてください。このページでは使い方のご紹介となります。

 

FlexSlider


  • 水平/垂直方向のスライドとフェードアニメーション
  • 表示サイズに応じて自動調整
  • スワイプ操作可能など
  • >> 配布サイトはこちら

  • 【ダウンロード後の使うファイル】
  • jquery.flexslider.js
  • flexslider.css
  • imagesの中のbg_direction_nav.png
    ※flexslider.cssとimagesは同じ階層に置いてください。

 

 

(1)使用方法

画像1

画像2

画像3

 

【HTMLソースコード】

						<!DOCTYPE html>
						<html>
							<head>
								<meta charset="utf-8">
								<title>sample</title>
								<meta name="viewport" content="width=device-width, initial-scale=1">
								<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
								<link rel="stylesheet" href="jqm-plugin/css/flexslider.css" />
								<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
								<script type="text/javascript" src="jqm-plugin/js/jquery.flexslider.js"></script>
								<script type="text/javascript" src="jqm-plugin/js/test1.js"></script>
								<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
							</head>
							<body>
								<div id="home" data-role="page">
									<div data-role="header" data-theme="d">
										<h1>FlexSlider</h1>
									</div>
									<!---画像1------------->
									<div data-role="content">
										<div class="flexslider">
											<ul class="slides">
												<li><img src="gazou/plugin1-1.png" /></li>
												<li><img src="gazou/plugin1-2.png" /></li>
												<li><img src="gazou/plugin1-3.png" /></li>
												<li><img src="gazou/plugin1-4.png" /></li>
											</ul>
										</div>
									</div>
								</div>
							</body>
						</html>
					

 

【test1.jsファイルに記述するコード】

						$(window).load(function() {
							$('.flexslider').flexslider();
						});
					

 

  1. まず、htmlのhead内に「flexslider.css」「jquery.flexslider.js」「test1.js」を読み込ませておいてください。
    ※2つのjavascriptファイルはhead内の「jQueryとjQueryMobile」の間に置く(HTMLコード9~12行目のように)。
  2. 上記HTMLコードのように、表示させる画像の分だけliタグで囲み、それをclass="slides"を追加したulタグで囲みます。
  3. で、さらにclass="flexslider"を追加したdivで囲むかたちで記述して終わりです(画像1)。
  4. 画像1はコンテンツ内、画像2はヘッダー内、画像3はページ内にFlexSliderをそれぞれ置いた場合です。

 

 

(2)オプション、デザイン変更、キャプション

アニメーションをスライドに変更、コントロールナビ無し等いろいろオプションがあります。
オプションの使用例や一部のオプションをご紹介します。


画像4

画像5

画像6

 

【画像4について】


						<!---HTMLに下記を記述-------->
						<div class="flexslider">
							<ul class="slides">	
								<li data-thumb="gazou/plugin1-1.png">
									<img src="gazou/plugin1-1.png" />
								</li>
								<li data-thumb="gazou/plugin1-2.png">
									<img src="gazou/plugin1-2.png" />
								</li>
								<li data-thumb="gazou/plugin1-3.png">
									<img src="gazou/plugin1-3.png" />
								</li>
								<li data-thumb="gazou/plugin1-4.png">
									<img src="gazou/plugin1-4.png" />
								</li>
							</ul>
						</div>
					


						//test1.jsファイルに下記を記述
						$(window).load(function() {
							$('.flexslider').flexslider({
								animation: "slide",
								controlNav: "thumbnails"
							});
						});
					

HTMLのliタグにdata-thumb="画像"、test1.jsファイルに「controlNav: "thumbnails"」のオプションを追加すると、
画像4のようにコントロールナビ部分がサムネイル画像になります。
また「animation: "slide"」オプションを追加することでアニメーションをスライドにできます。

 

【画像5について】


						//test1.jsファイルに下記を記述
						$(window).load(function() {
							$('.flexslider').flexslider({
								animation: "slide",
								animationLoop: false,
								controlNav: false,
								itemWidth: 150
							});
						});
					

「itemWidth」オプションで画像のサイズを調整できます。「150」くらいにすると画像5のように画像2枚を一度に表示できます。
「animationLoop: false」でループなし、「controlNav: false」で下のコントロールナビなしにできます。

 

【その他オプションについて】

下記のオプションも設定する事ができます。
他にもいろいろあるので詳細は配布サイトをご確認ください。

  • animation:"slide"でアニメーションがスライドになります。
  • slideshowSpeed:7000でオートスライドのスピードを設定(数値はテキトーに変更して下さい)
  • animationSpeed:600でアニメーションのスピードを設定(数値はテキトーに変更して下さい)
  • reverse: trueでアニメーション方向を逆にします。
  • animationLoop:falseでループなし
  • slideshow:falseでオートスライドなし
  • direction:"vertical"で縦方向にスライドします。
  • controlNav:falseで下のコントロールナビなし
  • controlNav:"thumbnails"でサムネイル画像を表示できます(liタグにdata-thumbを追加すること)
  • itemWidth:150で画像サイズを調整(数値はテキトーに変更してください)
  • startAtで最初に表示する画像を選択できます。liタグで設定した画像で上から0,1,2,3…となります。
    たとえばplugin1-3.pngの画像を最初に設定するならstartAt:2になります。
  • start: function(){}   最初の画像をロード完了した時のコールバック関数
  • before: function(){}   画像切替え前のコールバック関数
  • after: function(){}  画像切替え後のコールバック関数
  • end: function(){}  最後の画像に切替わる前(切替る瞬間)のコールバック関数

 

【画像6について】

flexslider.css内で左右ボタンの位置・パス、その他デザインの変更などが出来ます。
その一例で今回は背景を黒色にデザイン変更してみました。
flexslider.cssの42行目部分を変更するとできます。

また下記のようにhtmlのliタグの中にpタグで囲んだテキストを入れるとキャプション的な文字を表示できます。


						
  • 画像のキャプション

  •  

     

     

    (3)2013/6/4 追記:CSSのカスタマイズ、コールバック関数について

    画像6-1

    画像6-2

    画像6-3

     

     

    【画像6-1について】

    境界線なし、コントロールナビの色を変更する場合は下記のようにCSS上書きしてください。

    
    						/*--境界線なし---*/
    						.flexslider{
    							border:none;
    							box-shadow:none;
    						}
    
    						/*--コントロールナビ色変更--*/
    						.flex-control-paging li a {
    							background:#f98e8e;
    						}
    						.flex-control-paging li a:hover{
    							background:#f60101;
    						}
    						.flex-control-paging li a.flex-active{
    							background:#f60101;
    						}
    					

    ※コントロールナビの色は好きな色を設定してください。

     

     

    【画像6-2について】

    左右の次/前へボタンは imagesフォルダの中の画像「bg_direction_nav.png」を差替えることで変更できます。
    今回はこんな感じの黒いやつを作成して差替えてみました(左)。右はデフォルトの次/前へボタン画像です。


    作成した画像

    デフォルト画像

    いろいろ自分好みの画像を作って差替えてみてください。
    上の作成した画像を使用する場合は右クリックからの「名前を付けて保存」でお願いします。

     

     

    【画像6-3について】

    flexsliderのオプションに用意されているコールバック関数の一例です。

    • start: function(){}   最初の画像をロード完了した時のコールバック関数
    • before: function(){}   画像切替え前のコールバック関数
    • after: function(){}  画像切替え後のコールバック関数
    • end: function(){}  最後の画像に切替わる前(切替る瞬間)のコールバック関数

    今回は「end」を使って最後の画像に切替わる前(切替る瞬間)にアラートを出す感じにしてみました。

    
    						//test1.jsファイルに下記を記述
    						$(window).load(function() {
    							$('.flexslider').flexslider({
    								animation: "slide",
    								controlNav: "true",
    								end: sample1
    							});
    						});
    
    						function sample1(){
    							alert("こんにちは");
    						}
    					

    以上で、jQueryプラグイン「FlexSlider」のご紹介は終わりです。
    いろいろ試してみてください。

     

     

     

    (4)2013/8/30 追記:FlexSlider 2.2.0以降のバージョンの使用方法

    画像6-4

    画像6-5

    画像6-6

     

    【HTMLソースコード】
    
    						<!DOCTYPE html>
    						<html>
    							<head>
    								<meta charset="utf-8">
    								<title>sample</title>
    								<meta name="viewport" content="width=device-width, initial-scale=1">
    								<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    								<link rel="stylesheet" href="flexslider.css" />
    								<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    								<script type="text/javascript" src="jquery.flexslider-min.js"></script>
    								<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    								<script>
    									$(window).load(function() {
    										$('.flexslider').flexslider({
    											animation: "slide"
    										});
    									});
    								</script>
    								<style>
    									/*--境界線なし---*/
    									.flexslider{
    										border:none;
    										box-shadow:none;
    									}
    								</style>
    							</head>
    							<body>
    								<div id="home" data-role="page">
    									<div data-role="header" data-theme="d">
    										<h1>FlexSlider v2.2.0</h1>
    									</div>
    									<!----画像6-4------------>
    									<div data-role="content">
    										<div class="flexslider">
    											<ul class="slides">
    												<li><img src="slide1.jpg"></li>
    												<li><img src="slide2.jpg"></li>
    												<li><img src="slide3.jpg"></li>
    											</ul>
    										</div>
    									</div>
    								</div>
    							</body>
    						</html>
    					

     

    使用方法などは普通のflexsliderと変わりませんが、
    使用するファイルが下記のものに変わります。

     

    【ダウンロード後の使うファイル】
    • jquery.flexslider-min.js
    • flexslider.css
    • fontsフォルダ
    • ※flexslider.cssとfontsフォルダは同じ階層に置いてください。
      ※fontsフォルダの中は「flexslider-icon.eot」「flexslider-icon.svg」「flexslider-icon.ttf」「flexslider-icon.woff」の4つです。

       

      画像6-4は「data-role="content"」内に設置、画像6-5は「data-role="page"」内に設置、画像6-6は「data-role="page"」内に設置しCSSで周りの境界線を消したものになります。

     

    以上で、jQueryプラグイン「FlexSlider version2.2.0使用方法」のご紹介は終わりです。
    今回は基本的な使い方のみのご紹介でしたが、もう少しカスタマイズなども次回ご紹介できればと思います。


     

     

    NivoSlider



    • 【ダウンロード後の使うファイル】
    • jquery.nivo.slider.js
    • nivo-slider.css
    • themesフォルダの中の各CSSファイルと素材

     

     

    (1)使用方法

    画像7

    画像8

    画像9

     

    【HTMLソースコード】
    
    						<!DOCTYPE html>
    						<html>
    							<head>
    						        <meta charset="utf-8">
    						        <title>sample</title>
    						        <meta name="viewport" content="width=device-width, initial-scale=1">
    						        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    						        <link rel="stylesheet" href="jqm-plugin/css/nivo-slider.css" />
    						        <link rel="stylesheet" href="jqm-plugin/css/default.css" />
    						        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
    						        <script type="text/javascript" src="jqm-plugin/js/jquery.nivo.slider.js"></script>
    						        <script type="text/javascript" src="jqm-plugin/js/test1.js"></script>
    						        <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    							</head>
    							<body>
    								<!---画像7--------------------->
    								<div id="home" data-role="page">
    									<div data-role="header" data-theme="d">
    										<h1>NivoSlider</h1>
    									</div>
    									<div data-role="content">
    										<div class="slider-wrapper theme-default">
    											<div id="slider" class="nivoSlider">
    												<img src="gazou/image01.jpg" alt="" />
    												<img src="gazou/image02.jpg" alt="" />
    												<img src="gazou/image03.jpg" alt="" />
    												<img src="gazou/image04.jpg" alt="" />
    											</div>
    										</div>
    									</div>
    								</div>
    							</body>
    						</html>
    					

     

    【test1.jsファイルに記述するコード】
    
    						$(window).load(function() {
    						    $("#slider").nivoSlider();
    						});
    					

     

    上記コードはthemesフォルダの中の「default(cssと素材一式)」を使用した例です。

    1. まずhead内に「jquery.nivo.slider.js」「test1.js」「nivo-slider.css」「default.css"」を読み込ませておいてください。
    2. 上記HTMLコードのように表示させる画像を「id="slider" class="nivoSlider"」のdivで囲み、さらに「class="slider-wrapper theme-default"」のdivで囲んで終了です
    3. 画像7はコンテンツ内に、画像8はヘッダー内にNivoSliderを設置した場合です
    4. 「default」以外のテーマを使う場合ですが、たとえば「dark」を使う場合は、head内に「dark.css」を読み込ませて、dark用素材をdark.cssと同じ階層に置いた後、 HTMLの「div class="slider-wrapper theme-default"」を「div class="slider-wrapper theme-dark"」に変更してください。ほかのテーマも同様のやり方で行います。
    5. 画像9は「dark」を使用しコンテンツ内にNivoSliderを設置した場合です。
    6. 各画像のimgタグをaタグで囲み画像ごとにリンクをつけることも可能です。

     

     

    (2)オプション、デザイン変更など

    オプションの使用例や使用方法についてご紹介します。


    画像10

    画像11

    画像12

     

    【画像10について】

    
    						<!---HTMLに下記を記述----------->
    						<div class="slider-wrapper theme-default">
    							<div id="slider" class="nivoSlider">
    								<img src="gazou/image01.jpg" data-thumb="gazou/image01.jpg" alt="" />
    								<img src="gazou/image02.jpg" data-thumb="gazou/image02.jpg" alt="" />
    								<img src="gazou/image03.jpg" data-thumb="gazou/image03.jpg" alt="" />
    								<img src="gazou/image04.jpg" data-thumb="gazou/image04.jpg" alt="" />
    							</div>
    						</div>
    					

    
    						//test1.jsに下記を記述
    						$(window).load(function() {
    						    $("#slider").nivoSlider({
    								controlNavThumbs:true
    							});
    						});
    					

    ※テーマは「default」を使用してます。

    HTMLのimgタグ内に「data-thumb="サムネイル画像"」、test1.jsファイルに「controlNavThumbs:true」のオプションを追加するとコントロールナビ部分がサムネイル画像になります。
    また、サムネイル画像部分の設定がデフォルトで幅120pxなので上記のままだとスマホ画面に収まらず横一列になりません。
    default.cssの「91行目をwidth: 65px;」「14行目をmargin-bottom:0px;」にすると画像10のようになります。
    ※91行目のwidthはサムネイル画像数などを考慮して調整してみてください。

     

    【画像11について】

    
    						<!---HTMLに下記を記述----------------->
    						<div class="slider-wrapper theme-default">
    							<div id="slider" class="nivoSlider">
    								<img src="gazou/image01.jpg" alt="" title="イメージ01" />
    								<img src="gazou/image02.jpg" alt="" title="イメージ02" />
    								<img src="gazou/image03.jpg" alt="" title="イメージ03" />
    								<img src="gazou/image04.jpg" alt="" title="イメージ04" />
    							</div>
    						</div>
    					

    
    						//test1.jsに下記を記述
    						$(window).load(function() {
    						    $("#slider").nivoSlider({
    								effect:"sliceUp",
    								controlNav:false
    							});
    						});
    					

    ※テーマは「default」を使用してます。

    HTMLのimgタグ内に「title="テキスト"」を追加するとキャプション的な文字を表示できます。
    また、「effect:"sliceUp"」オプションはアニメーションをスライスアップに変更し(デフォルトはランダム)、 「controlNav:false」オプションは下部のコントロールナビを表示しないようにします。

     

    【その他オプションについて】

    そのほか下記のオプションが設定できます。

    【オプション】

    • effect: "random" //アニメーションの種類設定(デフォルトはランダム。他は※1参照。)
    • slices: 15 //スライスの数
    • boxCols: 8 //アニメーション時の四角の数(横)
    • boxRows: 4 //アニメーション時の四角の数(縦)
    • animSpeed: 500 //アニメーションのスピード
    • pauseTime: 3000 //アニメーション(画像切替え)の間隔
    • startSlide: 0 //初めに表示する画像
    • directionNav: true //「前・次へ」の表示・非表示
    • controlNav: true //コントロールナビ表示・非表示
    • controlNavThumbs: false //サムネイル画像を使用する・しない
    • pauseOnHover: true //マウスホバー時に切り替えを一時停止
    • manualAdvance: false //オートスライドにする・しない
    • prevText: "Prev" //「前へ」のテキスト
    • nextText: "Next" //「次へ」のテキスト
    • randomStart: false //最初に表示する画像をランダムに設定
    • beforeChange: function(){ } //画像切替え前のコールバック関数(切り替え前に行われる処理)
    • afterChange: function(){ } //画像切替え後のコールバック関数
    • slideshowEnd: function(){ } //すべての画像を表示したあとのコールバック関数
    • lastSlide: function(){ } //最後の画像が切替る時のコールバック関数
    • afterLoad: function(){ } //画像のロードが完了した時のコールバック関数

    ※数値などは適当に変更してください。

     

    【※1:effectに設定できるアニメーション】

    • sliceDown
    • sliceDownLeft
    • sliceUp
    • sliceUpLeft
    • sliceUpDown
    • sliceUpDownLeft
    • fold
    • fade
    • random
    • slideInRight
    • slideInLeft
    • boxRandom
    • boxRain
    • boxRainReverse
    • boxRainGrow
    • boxRainGrowReverse

     

    【画像12について】

    画像12は「lastSlide: function(){}」オプションを使い、「最後の画像が切替る時ページの背景色が黒色に変わる」という内容にしたものです。

    
    						//test1.jsファイルに下記を記述
    						$(window).load(function() {
    							$("#slider").nivoSlider({
    								lastSlide: test01
    							});
    						});
    
    						function test01(){
    							$("#home").css("background","#000000");
    						}
    					

     

    以上で、jQueryプラグイン「NivoSlider」のご紹介は終わりです。
    そのほか、使用するテーマのCSS内で画像素材のパスやNivoSliderのデザインの変更などが出来ます。
    いろいろ試してみてください。


     

     

    Swipebox



    • 【ダウンロード後 使うファイル】
    • jquery.swipebox.js
    • swipebox.css
    • imgフォルダ
    ※imgフォルダとswipebox.cssファイルは同じ階層に置いてください。

     

     

    (1)使用方法

    画像13

    画像14

    画像15

     

    【HTMLソースコード】
    
    						<!DOCTYPE html>
    						<html>
    							<head>
    						        <meta charset="utf-8">
    						        <title>勝手にスマホサイトまとめ</title>
    						        <meta name="viewport" content="width=device-width, initial-scale=1">
    						        <link rel="stylesheet" href="swipebox.css" />
    						        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    						        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    						        <script type="text/javascript" src="js/jquery.swipebox.js"></script>
    						        <script type="text/javascript" src="js/test.js"></script>
    						        <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    							</head>
    							<body>
    
    								<div id="#home" data-role="page">
    									<div data-role="header">
    										<h1>swipebox</h1>
    									</div>
    									<div data-role="content">
    										<a href="images/big/dsquared2.png" class="swipebox" title="dsquared">
    											<img src="images/small/dsquared.png">
    										</a> 
    										<a href="images/big/jeep2.png" class="swipebox" title="jeep">
    											<img src="images/small/jeep.png">
    										</a>
    									</div>
    								</div>
    
    							</body>
    						</html>
    					

     

    【test.jsファイルに記述するコード】
    
    						$(document).ready(function(){
    							$(".swipebox").swipebox();
    						});
    					

     

    • (1)上記HTMLコードのhead内のように「swipebox.css」「jquery.swipebox.js」「test.js」を読み込ませてください。
    • (2)小さい画像と大きい画像を用意して「big」「small」フォルダにそれぞれまとめた後、HTMLに
    
    						<a href="images/big/大きい画像" class="swipebox" title="画像のタイトル">
    							<img src="images/small/小さい画像">
    						</a>
    					

    のように記述して終了です。

    • (3)画像13の画像をタップすると画像14の様に背景が暗くなり大きい画像が表示されます。
      この画面をタップすると画像15のように上に「画像タイトル」、下に「閉じるボタン」「次へ/前へボタン」が表示されます。
      もちろんスワイプで次画像に切り替えることも可能です。

     

     

     

    (2)デザイン変更など

    またCSS上書きして一部デザインの変更をしてみたので一応ご紹介します。
    ※下記内容を記述したcssファイルを作成し、head内の「swipebox.css」の後に読み込ませておいてください。



    画像16

    画像17

    画像18

     

    ■画像16:背景色変更

    【css】
    
    						/*--背景色--*/
    						#swipebox-overlay {
    							background:#c0c0c0;
    						}
    					

    「#swipebox-overlay」をbackgroundを上書きすることで画像16のように背景色をかえることができます。

     

     

    ■画像17:タイトル・ヘッダー部分

    【css】
    
    						/*--タイトル・ヘッダー部分変更----*/
    						#swipebox-caption{
    							color:#000000 !important;
    							font-size: 18px;
    							font-weight:bold;
    							background:#efefef;
    							text-shadow:none;
    							box-shadow:none;
    							border:1px solid #000000;
    						}
    					

    「#swipebox-caption」を上書きすることで画像17のようにタイトル・ヘッダー部分の色など変更ができます。

     

     

    ■画像18:フッター部分

    【css】
    
    						/*--フッター部分変更----*/
    						#swipebox-action{
    							background:#3480ce;
    						}
    					

    「#swipebox-action」を上書きする事で画像18のようにフッター部分の色の変更などができます。

     

    イメージギャラリー的なもの以外にもいろいろ使えそうです。
    というかすごく使いやすいです。いろいろ試してみて下さい。


     

     

    Sidr



    • 【ダウンロード後 使うファイル】
    • jquery.sidr.min.js
    • jquery.sidr.dark.css
    • jquery.sidr.light.css

     

     

    (1)使用方法

    画像19

    画像20

    画像21

     

    【HTML】
    
    						<!DOCTYPE html>
    						<html>
    							<head>
    						        <meta charset="utf-8">
    						        <title>Sidr</title>
    						        <meta name="viewport" content="width=device-width, initial-scale=1">
    						        <link rel="stylesheet" href="jquery.sidr.light.css" />
    						        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
    						        <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    						        <script type="text/javascript" src="jquery.sidr.min.js"></script>
    						        <script type="text/javascript" src="test.js"></script>
    						        <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
    							</head>
    							<body>
    								<div data-role="page">
    									<div data-role="header">
    										<h1>Sidr</h1>
    									</div>
    									<div data-role="content">
    										<!--ボタン-->
    										<a class="menu_1" href="#sidr" data-role="button">menu open</a>
    										<!--メニュー内容-->
    										<div id="sidr">
    											<ul>
    												<li><a href="#">メニュー1</a></li>
    												<li><a href="#">メニュー2</a></li>
    												<li><a href="#">メニュー3</a></li>
    												<li><a href="#">メニュー4</a></li>
    												<li><a class="menu_1" href="#sidr">close</a></li>
    											</ul>
    										</div>
    									</div>
    								</div>
    							</body>
    						</html>
    					

     

    【test.js に記述】
    
    						$(document).ready(function() {
    							$('.menu_1').sidr();
    						});
    					

     

    • (1)上のHTMLのhead内のように「jquery.sidr.light.css」「jquery.sidr.min.js」を読み込ませてください。
    • (2)「test.js」を用意し、上の内容を記述して、これもhead内に読み込ませてください。
    • (3)HTMLのページのコンテンツ内に
    
    						menu open
    
    						
    					

    のように記述して終了です(画像19)。
    「menu open」ボタンを押すと、画像20のように左からメニューが出てきます。
    今回「jquery.sidr.light.css」を読み込ませていますが、「jquery.sidr.dark.css」を読み込ませると
    画像21のようにカンタンにテーマ変更できます。

    「メニューを閉じる(close)」ボタンについては、「menu open」ボタンの<a>タグと同じように 「class="menu_1" href="#sidr"」を使います。閉じるボタンを入れておけば、メニュー開いた後も、閉じるボタンで普通に閉じることができます。

    また、デフォルトでは左から出るようになっていますが、左右どちらからでもメニューを出す設定ができます。

     

     

    ■左右からメニューを出す方法


    画像22

    画像23

    画像24

     

     

    【HTML】
    
    						<div data-role="content">
    							<!--ボタン:左メニュー用-->
    							<a class="left_menu_btn" href="#left_menu" data-role="button">left menu</a>
    							<!--ボタン:右メニュー用-->
    							<a class="right_menu_btn" href="#right_menu" data-role="button">right menu</a>
    
    							<!--メニュー内容:左-->
    							<div id="left_menu">
    								<h2>左メニュー</h2>
    								<p>テキストテキストテキストテキストテキストテキスト
    								テキストテキストテキストテキストテキストテキスト</p>
    								<p><a class="left_menu_btn" href="#left_menu" data-role="button">close</a></p>
    
    							</div>
    							<!--メニュー内容:右-->
    							<div id="right_menu">
    								<h2>右メニュー</h2>
    								<p><img src="sample.jpg" width="100%"></p>
    								<p><a class="right_menu_btn" href="#right_menu" data-role="button">close</a></p>
    							</div>
    						</div>
    					

     

    【test.js】
    
    						$(document).ready(function() {
    							//左
    							$('.left_menu_btn').sidr({
    								name:'left_menu',
    								side:'left'
    							});
    							//右
    							$('.right_menu_btn').sidr({
    								name:'right_menu',
    								side:'right'
    							});
    						});
    					

     

    HTMLのコンテンツ内、test.jsを上のように記述し直してください(画像22)。
    「left menu」ボタンを押すと画像23のように左から、「right menu」ボタンを押すと画像24のように右から、メニューが出てきます。 メニュー内容部分は、<li>タグだけでなく、普通にテキストや画像なども入れることができますので、いろいろ入れてみてください。