jQuery UI datepickerのダウンロード、設置、日本語化

ダウンロード

ダウンロードが英語サイトの上、結構ややこしく、どこのサイトを見てもなかなかピンとくるものがなく苦労した。下記サイトが一番わかりやすいと思います。

https://jqueryui.com/

画像のように「Stable」をクリックすると設置に必要なファイル群一式がダウンロードできます。

設置

CSS

<link href="css/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="css/jquery-ui.structure.css" rel="stylesheet" type="text/css">
<link href="css/jquery-ui.theme.css" rel="stylesheet" type="text/css">

Javascript

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script>
$(function(){
  $(".datepicker").datepicker();
});
</script>

最初の「.datepicker」がHTMLのクラスを指定しているので、HTML側で「class=”datepicker”」を指定。

HTML


<form action="" method="get">
<input type="text" class="datepicker" name="希望日" value="" placeholder="クリックして日付を入力"></input>
</form>

先程のJavascriptで設定された「class=”datepicker”」を指定。

↓ひとまずカレンダー表示

日本語化

ちょっとだけややこしいけど、これが一番確実な方法。

https://github.com/jquery/jquery-ui/blob/master/ui/i18n/datepicker-ja.js

上記サイトにアクセスして、右側にある「Raw」ボタンをクリックするとテキストが表示されるので、全て選択して「datepicker-ja.js」として保存する。

/* Japanese initialisation for the jQuery UI date picker plugin. */
/* Written by Kentaro SATO (kentaro@ranvis.com). */
( function( factory ) {
	if ( typeof define === "function" && define.amd ) {

		// AMD. Register as an anonymous module.
		define( [ "../widgets/datepicker" ], factory );
	} else {

		// Browser globals
		factory( jQuery.datepicker );
	}
}( function( datepicker ) {

datepicker.regional.ja = {
	closeText: "閉じる",
	prevText: "&#x3C;前",
	nextText: "次&#x3E;",
	currentText: "今日",
	monthNames: [ "1月","2月","3月","4月","5月","6月",
	"7月","8月","9月","10月","11月","12月" ],
	monthNamesShort: [ "1月","2月","3月","4月","5月","6月",
	"7月","8月","9月","10月","11月","12月" ],
	dayNames: [ "日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日" ],
	dayNamesShort: [ "日","月","火","水","木","金","土" ],
	dayNamesMin: [ "日","月","火","水","木","金","土" ],
	weekHeader: "週",
	dateFormat: "yy/mm/dd",
	firstDay: 0,
	isRTL: false,
	showMonthAfterYear: true,
	yearSuffix: "年" };
datepicker.setDefaults( datepicker.regional.ja );

return datepicker.regional.ja;

} ) );

上記からもダブルクリックで全て選択、コピペ可能。

保存したファイルをHTMLへ設置

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>

↓ここに追記
<script type="text/javascript" src="js/datepicker-ja.js"></script>

<script>
$(function(){
  $(".datepicker").datepicker();
});
</script>

↓日本語化後

もうちょっとカスタマイズ

/* Japanese initialisation for the jQuery UI date picker plugin. */
/* Written by Kentaro SATO (kentaro@ranvis.com). */
( function( factory ) {
	if ( typeof define === "function" && define.amd ) {

		// AMD. Register as an anonymous module.
		define( [ "../widgets/datepicker" ], factory );
	} else {

		// Browser globals
		factory( jQuery.datepicker );
	}
}( function( datepicker ) {

datepicker.regional.ja = {
	closeText: "閉じる",
	prevText: "&#x3C;前",
	nextText: "次&#x3E;",
	currentText: "今日",
	monthNames: [ "1月","2月","3月","4月","5月","6月",
	"7月","8月","9月","10月","11月","12月" ],
	monthNamesShort: [ "1月","2月","3月","4月","5月","6月",
	"7月","8月","9月","10月","11月","12月" ],
	dayNames: [ "日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日" ],
	dayNamesShort: [ "日","月","火","水","木","金","土" ],
	dayNamesMin: [ "日","月","火","水","木","金","土" ],
	weekHeader: "週",
	dateFormat: "yy/mm/dd",
	firstDay: 0,
	isRTL: false,
	showMonthAfterYear: true,
	yearSuffix: "年",
	showButtonPanel: true // "今日"ボタン, "閉じる"ボタンを表示する
 };
datepicker.setDefaults( datepicker.regional.ja );

return datepicker.regional.ja;

} ) );

33行目の「”今日”ボタン, “閉じる”ボタンを表示する」のオプションを追加。

↓完成図

レスポンシブに対応した画像スライダーjQuery「Nivo Slider」の導入手順

必要ファイルのダウンロード

Nivo Slider」このページの、少しわかりづらいですが右メニューの「Download ZIP」のボタンをクリックすると一式ダウンロードできます。(2015.12.1現在)

設置場所とソースコピー

解凍して出来る

/Nivo-Slider-master/demo/demo.html

から下記HTMLをコピーして、bodyタグの中のスライダーを表示したい部分にペーストします。

<div class="slider-wrapper theme-default">
	<div id="slider" class="nivoSlider"> <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" /> <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a> <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" /> <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" /> </div>
	<div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>
</div>

画像ファイルの設置

解凍して出来る「Nivo-Slider-master」フォルダの中の「demo」の中の「images」フォルダをそっくりコピーして、移植先の「htdocs(ドキュメントルート)」の下に張り付けます。

CSSファイルの設置とリンク

テーマ用CSS

解凍して出来る「Nivo-Slider-master」フォルダの中の「themes」フォルダをそっくりコピーして、移植先の「htdocs(ドキュメントルート)」の下に張り付けます。

htmlでファイルをリンクさせます。

<link href="themes/default/default.css" rel="stylesheet" type="text/css" />
<link href="themes/bar/bar.css" rel="stylesheet" type="text/css" />

デフォルトでは「default」、「light」、「dark」と簡単にテーマを切り替えられるようになっていて

<link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />

も設定されていますが、今回は「default」しか使わないので、省略します。

その他のCSS

「htdocs(ドキュメントルート)」の下に「css」フォルダを作ります。そこに
解凍してできたファイル群から下記の2つのcssファイルをコピーして
/Nivo-Slider-master/demo/style.css
/Nivo-Slider-master/nivo-slider.css
移植先の「htdocs(ドキュメントルート)」の下の「css」フォルダにペーストします。

htmlでファイルをリンクさせます。

<link href="css/nivo-slider.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />

javascriptの設置とリンク

「demo.html」の「/body」タグの直前の下記javascriptのコードをコピーして

<script type="text/javascript">
  $(window).load(function() {
    $('#slider').nivoSlider();
  });
</script>

移植先のhtmlの「/body」タグの直前にペーストします。 「htdocs(ドキュメントルート)」の下に「js」フォルダを作ります。そこに 解凍してできたファイル群から下記の2つのjavascriptファイルをコピーして /Nivo-Slider-master/demo/scripts/jquery-1.9.0.min.js /Nivo-Slider-master/jquery.nivo.slider.js htmlでファイルをリンクさせます。

<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>

この段階でとりあえずまともに動くようになるはずです。あとは画像を差し替えて完成です。

ソース全文

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<title>Nivo Slider Demo</title>
<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper"> <a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>
	<div class="slider-wrapper theme-default">
		<div id="slider" class="nivoSlider"> <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" /> <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a> <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" /> <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" /> </div>
		<div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>
	</div>
</div>
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="../jquery.nivo.slider.js"></script>
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
</body>
</html>

レスポンシブに対応したナビゲーションメニューjQuery「MeanMenu」の導入手順

必要ファイルのダウンロード

MeanMenu」こちらページの「MEANMENU ZIP DOWNLOAD」のボタンをクリックすると実際に動作するデモサイトの圧縮したものをダウンロードできます。

設置場所の確認

デフォルトでは「nav」が「header」の中に配置されていて

<header>
 <nav>
  <ul>
   <li><a href="#">Top Level Link</a>

のようになっています。

今回新しく設置する移植先は

<header>
 <h1>Site Title</h1>
</header>
<nav>
 <ul>
  <li><a href="#">Top Level Link</a>

上記のようのheaderタグの中ではなく、headerタグと並列にnavタグを並べて設置することとします。

htmlのコピペ

デフォルトの「demo.html」の「nav」の中身をそっくり移植先のhtmlにコピペします。

<nav>
 <ul>
  <li><a href="#">Top Level Link</a>
   <ul>
    <li><a href="#">Second Level Link</a>
     <ul>
      <li><a href="#">Third Level Link</a></li>
      <li><a href="#">Third Level Link</a></li>
      <li><a href="#">Third Level Link</a>
       <ul>
        <li><a href="#">Fourth Level Link</a></li>
        <li><a href="#">Fourth Level Link</a></li>
        <li><a href="#">Fourth Level Link with extra long name so it wraps</a>
         <ul>
          <li><a href="#">Fifth Level Link</a></li>
          <li><a href="#">Fifth Level Link</a></li>
          <li><a href="#">Fifth Level Link</a></li>
         </ul>
        </li>
       </ul>
      </li>
     </ul>
    </li>
    <li><a href="#">Second Level Link</a></li>
    <li><a href="#">Second Level Link</a></li>
   </ul>
  </li>
  <li><a href="#">Top Level Link</a></li>
  <li><a href="#">Top Level Link</a></li>
  <li><a href="#">Top Level Link</a></li>
 </ul>
</nav>

 

インラインCSSのコピペ

デフォルトの「demo.html」のtitleタグの下にあるCSSを全て移植先のtitleタグの下にコピペします。注意点はセレクタが「header nav」となっているところを移植先に合わせて「nav」に全て修正します。

デフォルトで

前略

header nav {
text-align: center;
background: #efefef;
}
header nav ul {
margin: 0;
padding: 1em;
list-style-type: none;
}
header nav ul li {
display: inline;
margin-left: 1em;
}
header nav ul li:first-child {
margin-left: 0;
}
header nav ul li ul {
display: none;
}

以下略

となっているところを

前略

nav {
text-align: center;
background: #efefef;
}
nav ul {
margin: 0;
padding: 1em;
list-style-type: none;
}
nav ul li {
display: inline;
margin-left: 1em;
}
nav ul li:first-child {
margin-left: 0;
}
nav ul li ul {
display: none;
}

以下略

のように修正します。

javascriptのコピペ

デフォルトの「demo.html」の「body」タグの直前のjavascriptを移植先の「body」タグの直前へコピペします。

<script>
	jQuery(document).ready(function () {
	    jQuery('nav').meanmenu();
	});
</script>

 

注意点は先程と同様にjavascriptの5行目あたりの

jQuery('header nav').meanmenu();

の部分を

jQuery('nav').meanmenu();

jQuery(‘nav’).meanmenu();
と修正します。

「meanmenu.css」ファイルのリンク

移植先のhtmlに「meanmenu.css」をリンクさせます。同じ階層に設置する場合は

<link href="meanmenu.css" rel="stylesheet" type="text/css" />

「css」フォルダに設置する場合は

<link href="css/meanmenu.css" rel="stylesheet" type="text/css" />

等自分の環境に合わせてリンク設定する。

「jquery.meanmenu.js」、「jquery-1.11.1.min.js」ファイルのリンク

CSSと同様に、移植先のhtmlに「jquery.meanmenu.js」をリンクさせます。記述場所は先程記述した「body」タグの直前に記述したjavascriptの直前。「jquery-1.11.1.min.js」は「http」から始まっているのでそのままそっくりコピペします。

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.meanmenu.js"></script>

とりあえずここまでで問題がなければ、ブラウザの幅を狭くしていくと、ナビゲーションメニューがスマホ用のものに切り替わります。

移植後のソース全文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>meanmenu</title>
<style>
/* Basic CSS */

html {
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: aliased;
}
body {
	margin: 0;
	padding: 0;
	font: 16px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
h1 {
	font-size: 28px;
	font-weight: 100;
	text-align: center;
}
h2 {
	font-size: 18px;
	font-weight: 100;
	text-align: center;
	margin-top: 40px;
}
nav {
	text-align: center;
	background: #efefef;
}
nav ul {
	margin: 0;
	padding: 1em;
	list-style-type: none;
}
nav ul li {
	display: inline;
	margin-left: 1em;
}
nav ul li:first-child {
	margin-left: 0;
}
nav ul li ul {
	display: none;
}
a {
	color: #f77564;
}
a:hover {
	color: #333;
}
a, a:hover {
	-o-transition: color 0.25s ease-in;
	-webkit-transition: color 0.25s ease-in;
	-moz-transition: color 0.25s ease-in;
	transition: color 0.25s ease-in;
}
section, article, header {
	display: block;
	float: left;
	width: 100%;
}
article {
	width: 96%;
	padding: 3em 2%;
}
</style>
<link href="css/meanmenu.css" rel="stylesheet" type="text/css" />
</head>

<body>
<header>
	<h1>Site Title</h1>
</header>
<nav>
	<ul>
		<li><a href="#">Top Level Link</a>
			<ul>
				<li><a href="#">Second Level Link</a>
					<ul>
						<li><a href="#">Third Level Link</a></li>
						<li><a href="#">Third Level Link</a></li>
						<li><a href="#">Third Level Link</a>
							<ul>
								<li><a href="#">Fourth Level Link</a></li>
								<li><a href="#">Fourth Level Link</a></li>
								<li><a href="#">Fourth Level Link with extra long name so it wraps</a>
									<ul>
										<li><a href="#">Fifth Level Link</a></li>
										<li><a href="#">Fifth Level Link</a></li>
										<li><a href="#">Fifth Level Link</a></li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="#">Second Level Link</a></li>
				<li><a href="#">Second Level Link</a></li>
			</ul>
		</li>
		<li><a href="#">Top Level Link</a></li>
		<li><a href="#">Top Level Link</a></li>
		<li><a href="#">Top Level Link</a></li>
	</ul>
</nav>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.meanmenu.js"></script>
<script>
	jQuery(document).ready(function () {
	    jQuery('nav').meanmenu();
	});
</script>
</body>
</html>