【Bootstrap】datepicker（日付選択UI）

August 29, 2013, 3:00 pm

≫ Next: 【JavaScript】 Uncaught SyntaxError: Unexpected token ILLEGAL

≪ Previous: 【JavaScript】単項 + 演算子で数値にする

$

0

0

問題

Bootstrapを使っているのですが、日付選択UIはやっぱりjqueryuiのdatepickerを使うしかないでしょうか……

jqueriy.ui.datepicker はいいと思うんだけど、読み込まないといけないファイルが増えたり、見た目の統一感が問題だったり……

こんなのがいい！

けど、こうなっちゃう

答え

jquery.ui.datepicker.jsをちょっといじくると、BootstrapのCSSを適用できて、Bootstrapっぽいdatepickerができる。

jquery.ui.datepickerのJavaScriptは完成度が高いので、そのまま使うとして、見た目はjqueryuiのCSSに頼らないようにする。

jquery.ui.datepicker.jsではカレンダー部分のHTMLを作っている_generateHTMLというメソッドや、作ったHTMLを適用・調整している_updateDatepickerというメソッドがある。このあたりをちょっと変えさせてもらう。

Bootstrap3環境で_generateHTMLを変更した例

//デフォルトの動作を少し変える
//前の月へ、次の月へのボタンを <, > に
//表示のとき一番外側にBootstrapのpanelを適用
$.datepicker.setDefaults({
	"prevText" : '&#x3c;',
	"nextText" : '&#x3e;',
	"beforeShow": function(i, o){
		$(o.dpDiv).addClass('panel panel-default');
	}
});
//オリジナルの_generateHTMLをコピーしておいて
$.datepicker.__generateHTML = $.datepicker._generateHTML;

//独自の処理を加えた_generateHTMLで上書きする
//_generateHTMLはHTMLの文字列を作っているので、文字列の置換でカレンダーのHTMLを書き換え可能
$.datepicker._generateHTML = function(inst){
	return '<div class="panel-body">'
		+ $.datepicker.__generateHTML(inst)
			//幅を200pxぐらいにしたい
			.replace('<table', '<table style="width:200px;"')
			//前の月へのボタン
			.replace('ui-datepicker-prev', 'pull-left btn btn-default btn-sm')
			//次の月への簿他
			.replace('ui-datepicker-next', 'pull-right btn btn-default btn-sm')
			//上部の年月の表示部分を中央に
			.replace('ui-datepicker-title', 'text-center')
			//アクティブな日を.btn-primaryに
			.replace('ui-state-default ui-state-active', 'btn btn-primary btn-block btn-xs')
			//当月でない日を.btn-infoで違う色に
			.replace(/ui-state-default ui-priority-secondary/g, 'btn btn-info btn-block btn-xs')
			//当月のその他の日を.btn-linkに
			.replace(/ui-state-default/g, 'btn btn-link btn-block btn-xs')
		+ '</div>';
}

これ↓は使わせてもらうけど、

これ↓からは開放されて、

こんなふう↓になる。

なお上の完成図では、見た目の調整で以下のCSSを適用した。

/* カレンダーに影をつけて目立たせる */
.ui-datepicker {box-shadow:3px 3px 5px rgba(0,0,0,0.5);}
/* 上の部分を太字にする */
.ui-datepicker-header {font-weight:bold;}
/* キーボードでの日付選択時などの強調表示 */
.ui-state-hover {background:#eee;}

DEMO

https://www.softel.co.jp/blogs/tech/archives/demo/datepicker-for-bootstrap

残課題

年月をプルダウンにしたり、複数月表示をしたり、オプションの指定によっては上記の対応では不十分な場合が考えられる。

使い方に応じて加工されたし。

追記

オプションを指定すると、非表示の予定のところが表示されることがあるようなので、場合によっては以下のCSSも指定しておくとよい。

.ui-datepicker {display:none;}

---

【JavaScript】 Uncaught SyntaxError: Unexpected token ILLEGAL

October 5, 2013, 5:00 pm

≫ Next: 【JavaScript】「ページの上に戻る」いろいろ

≪ Previous: 【Bootstrap】datepicker（日付選択UI）

$

0

0

問題

「Uncaught SyntaxError: Unexpected token ILLEGAL」ってなあに？

答え

「Uncaught SyntaxError: ～」系のエラーは、たいていタイプミスや { に対する } がないなどが原因のことが多い。

Uncaught SyntaxError: Unexpected token }

{ や ; などのJavaScriptの文法上必要な文字が抜けていることが多い。

$(function(){
);

Uncaught SyntaxError: Unexpected token ILLEGAL

何らかの不正な文字がコード内に含まれているときに発生することが多い。

$(function(){
    var a；//←全角セミコロン
});

Uncaught SyntaxError: Unexpected token o

文字列が渡されるはずのところにオブジェクトが渡された。

JSON.parse({aaa:"オブジェクト"})

【JavaScript】「ページの上に戻る」いろいろ

January 15, 2014, 4:00 pm

≫ Next: 【JavaScript】自動カナ入力

≪ Previous: 【JavaScript】 Uncaught SyntaxError: Unexpected token ILLEGAL

$

0

0

問題

よくある「ページの上に戻る」のボタンで普通に上に戻るだけではおもしろくない。

何か変わった「ページの上に戻る」をください。

答え

デモが見やすいように、わざとページを長くしておきます。

DEMO 「ページの上に戻る」いろいろ – デモ

基本は scrollTop を0に向かって変化させていけばよい。

jQueryのanimateでできる。

既存のeasing関数や自作の関数を使ってscrollTopの値を変化させると、いろんな動きができる。

同時にbodyやhtmlのmarginも変化させると上下左右に動きを追加できる。

【JavaScript】自動カナ入力

February 8, 2014, 4:00 pm

≫ Next: 【JavaScript】ある月の日数を計算する

≪ Previous: 【JavaScript】「ページの上に戻る」いろいろ

$

0

0

問題

名前を入力したら、フリガナも自動入力して欲しい！

答え

jquery.autoKana.js が使える。

https://github.com/harisenbon/autokana

入力中の文字を全角ひらがな、または全角カナにはしてくれる（一番面倒なイベント系は全部これに任せる）。

Demo

氏名
カナ

半角カナにしたい！

全角カナに変換しているところで半角に変換するカスタマイズをするとできた。

参考

AutoRuby.js（prototype.jsベースのフリガナ自動変換スクリプト）

autoKana.js

jquery.autoKana.js（autoKana.jsをjQueryベースに書き換えたもの）

【JavaScript】ある月の日数を計算する

April 13, 2014, 5:00 pm

≫ Next: 【JavaScript】F5キーでのリロード禁止

≪ Previous: 【JavaScript】自動カナ入力

$

0

0

問題

JavaScriptで、ある月が何日あるか、日数を計算するには？

答え

ある月の日数を知りたかったら、翌月の0日（=当月末日）が何日になるかを見るとよい。

function days(year, month) {
	return new Date(parseInt(year, 10), parseInt(month, 10), 0).getDate();
}

2014年11月は何日あるかというと

new Date(parseInt(2014, 10), parseInt(11, 10), 0).getDate(); // → 30

2014年12月は何日あるかというと

new Date(parseInt(2014, 10), parseInt(12, 10), 0).getDate(); // → 31

2014年2月は何日あるかというと

new Date(parseInt(2014, 10), parseInt(2, 10), 0).getDate(); // → 28

2016年2月は何日あるかというと

new Date(parseInt(2016, 10), parseInt(2, 10), 0).getDate(); // → 29

1900年2月は何日あるかというと

new Date(parseInt(1900, 10), parseInt(2, 10), 0).getDate(); // → 28

【JavaScript】F5キーでのリロード禁止

May 1, 2014, 5:00 pm

≫ Next: 【JavaScript】文字列の配列を長い順にソートする

≪ Previous: 【JavaScript】ある月の日数を計算する

$

0

0

問題

ブラウザでF5キーを押してもリロードしないようにしてください。

F5のキーコードは116なので、116だったらイベントを無効化する。

キーボードのF5を無効化するだけなので、右クリックの更新や、アドレスバーからの再読み込みなどは全く考慮していない。

$(document).on('keydown', function(e){
	if ((e.which || e.keyCode) == 116) {
		//alert("F5キーは無効化されています。");
		return false;
	}
});

【JavaScript】文字列の配列を長い順にソートする

May 2, 2014, 5:00 pm

≫ Next: 【JavaScript】符号を返す

≪ Previous: 【JavaScript】F5キーでのリロード禁止

$

0

0

問題

文字列の配列があります。

これをJavaScriptで、文字の長い順にソートしたいです。

答え

Arrayのsortは並び替え方法を指定しないと辞書順にsortするけど、指定すればいろいろな並び替えができる。

//長い順
var words = ['test', '123', 'softel', 'example', 'gifuken', 'Hello world!']
words.sort(function(a, b) {return b.length - a.length;});

>>> ["Hello world!", "example", "gifuken", "softel", "test", "123"]

---

//辞書順
var words = ['test', '123', 'softel', 'example', 'gifuken', 'Hello world!']
words.sort();

>>> ["123", "Hello world!", "example", "gifuken", "softel", "test"]

//数値としてソート
var nums = [10, 99, 456, 65, 98, 321, 654, 888, 1212, 3654]
nums.sort(function(a, b) { return a - b; });

>>> [10, 65, 98, 99, 321, 456, 654, 888, 1212, 3654]

【JavaScript】符号を返す

May 3, 2014, 5:00 pm

≫ Next: JavaScriptで入力候補機能（autocomplete）をoffにする

≪ Previous: 【JavaScript】文字列の配列を長い順にソートする

$

0

0

問題

数値の符号を返してくれる関数ないですか。

正の数なら 1、負の数なら -1、0なら0を返して欲しいです。

答え

素直に if文。

function sign(n) {
    if (n > 0)
        return 1;
    else if (n < 0)
        return -1;
    else
        return 0;
}

素直に 三項演算子。

function sign(n) {
    return (n > 0) ? 1 : (n < 0) ? -1 : 0;
}

真偽値をうまく使う。

//正の数のとき true - false、負の数のとき false - true、0のとき false - false になる
function sign(n) {
    return !(n < 0) - !(n > 0);
}

---

JavaScriptで入力候補機能（autocomplete）をoffにする

May 10, 2014, 5:00 pm

≫ Next: 【GoogleAnalytics】リンククリックの集計

≪ Previous: 【JavaScript】符号を返す

$

0

0

問題

HTML画面のフォームの入力欄で入力候補や入力履歴が出ないようにしたい。

答え

input要素それぞれには、以下のようにするとよい

<input type="text" name="xxx" value="" autocomplete="off">

form丸ごとには、以下のようにするとよい。

<form name="example" action="example.php" autocomplete="off">

それをJavaScriptでするなら、以下のようにしてできる。

$('form').attr('autocomplete', 'off');

【GoogleAnalytics】リンククリックの集計

March 14, 2015, 5:00 pm

≫ Next: 【JavaScript】動く雲っぽいものを表示する

≪ Previous: JavaScriptで入力候補機能（autocomplete）をoffにする

$

0

0

問題

Google Analytics で、バナーのクリックなどを集計したい！

答え

GoogleAnalyticsのga関数を呼ぶとできる。

clickならonclickに仕込んだり、JavaScriptの処理中に含めたりできる。

ga('send', 'event', 'カテゴリ（バナーの名前など）', 'アクション（clickなど）', 'ラベル（バナーの位置、リンク先URLなど）', '値（何らかの金額など追加可能）');

参考 アナリティクス ヘルプ イベントについて

記述例・使用例

HTML内にonclickで書く。

<a href="http://example.com/campaign/" onclick="ga('send', 'event', '何々キャンペーン', 'click', 'サイドバーのバナー', '');">何々キャンペーン実施中！</a>

JSファイルに書く。

$(function(){
	$('.campaign-button').on('click', function(){
		ga('send', 'event', '何々キャンペーン', 'click', 'サイドバーのバナー', '');
	});
});

【JavaScript】動く雲っぽいものを表示する

July 6, 2014, 5:00 pm

≫ Next: jqueryUIのautocompleteを日本語確定後に実行させる方法

≪ Previous: 【GoogleAnalytics】リンククリックの集計

$

0

0

問題

ブラウザで、流れていく雲のアニメーションみたいなのを表示したいです。

答え

領域の大きさ、背景色は、CSSかstyle属性で指定してやってください。IDはskyにした。

HTML

<div id="sky" style="width:100%; height:100px; background-color:#3E83C8;"></div>

cloud1.png と cloud2.png は適当なもこもこした半透明のPNG画像を用意してください。

JavaScript

$(function(){
	//中に入る雲を position:absolute するので
	$('#sky').css({position:"relative", overflow:"hidden"});

	//指定されたURLの画像の雲をskyの中に置く
	function addObject(url)
	{
		var speed = 30000 + Math.floor(Math.random() * 30000);
		var top = -100 + Math.floor(Math.random() * 200);
		var $div = $("<div>").css({"position":"absolute", "top":top,"left": "-200px"}).animate({
			left:$("#sky").width()
		},speed,"linear",function(){
			$(this).remove();
		})
		$div.append('<img src="' + url + '">');
		$("#sky").append($div);
	}

	//timer
	(function t() {
		if ($('#sky div').length > 100) {
			setTimeout(t, 500);
		} else {
			if (Math.random() < 0.20) {
				addObject("./cloud1.png");
			}
			if (Math.random() < 0.10) {
				addObject("./cloud2.png");
			}
			setTimeout(t, 100);
		}
	})();
});

jqueryUIのautocompleteを日本語確定後に実行させる方法

November 5, 2015, 7:10 pm

≫ Next: TinyMCEで編集画面、プレビュー画面と最終的な表示をなるべく一致させる

≪ Previous: 【JavaScript】動く雲っぽいものを表示する

$

0

0

問題

jquery.ui の autocomplete で、日本語入力が未確定の状態でも候補が表示されてしまい、邪魔だといわれました。

日本語入力が確定してからautocompleteできないでしょうか。

http://jqueryui.com/autocomplete/

答え

DEMO まず普通のautocomplete

（「あ」「か」など入力してみてください）

昔のjquery ui なら、以下のようにすれば、未確定中に候補を出さないようにできた。

//昔はこんなことをした例。今はダメ。
$('#hoge').autocomplete({
（略）
        search: function(event, ui) {
          //firefoxは未確定中にキーイベントが発生しない
          //firefox以外は未確定中のキーイベントのkeyCodeが229になるのでこれでキャンセル
          if (event.keyCode == 229) return false;
          return true;
        },
（略）
});

最近のjqueryuiはinputイベントを拾ってしまうので、これでは阻止できなくなった。

ここで、最近のブラウザであれば、日本語入力開始、終了のイベント compositionstart、compositionend が使えるので、これで阻止してみようと思う。

DEMO 日本語入力未確定中は動かないautocomplete

（「あ」「か」など入力してみてください）

jquery ui autocomplete のオプションで頑張ろうとすると詰まるが、外からautocompleteを有効化、無効化してやると簡単。

JavaScript

<script>
//jQuery UI 1.11で確認
$(function(){

    //autocomplete はごく普通に設定する
    $('#demo').autocomplete({
        source:["あいうえお","あかさたな","ああああ","あうん","あえいうえおあお","あんぱんまん","かあ","きい","くう"]
    });

    //日本語入力をスタートしたら無効化
    $('#demo').on('compositionstart', function(){$('#demo').autocomplete('disable');});

    //日本語入力が確定したら有効化
    $('#demo').on('compositionend', function(){$('#demo').autocomplete('enable').autocomplete('search');});

    //↑ IEでは、compositionendの後にinputイベントが発生しないようなので
    //IEでも確定後すぐ候補が出て欲しい場合は、わざとsearchを呼ぶ
    //IEは考慮しなくてよかったら、後ろの .autocomplete('search') は省略してよい
});
</script>

compositionstart、compositionend に対応していない古いIEなどでは、未確定中でもバシバシ候補が出てくる通常通りの動きをする。

メモ

仕様の変化に伴って、Eventの種類も多様になってますね。

https://developer.mozilla.org/en-US/docs/Web/Events

TinyMCEで編集画面、プレビュー画面と最終的な表示をなるべく一致させる

February 10, 2015, 4:00 pm

≫ Next: 【JavaScript】全角スペースは使ってよい（仕様では）

≪ Previous: jqueryUIのautocompleteを日本語確定後に実行させる方法

$

0

0

問題

TinyMCEを使って、管理画面にWYSIWYGな入力画面、確認画面を作ったのですが、登録したHTMLを表示しているWebサイトの画面と見た目が一致しないです。

どうするとよいでしょうか。

答え

TinyMCEの編集画面はiframeでできていて、そのiframe内をいかに実際の環境に似せるかがポイント。

以下のポイントを対応するとだいぶ一致すると思います（いずれも初期化オプション）。

content_css

初期化オプションで content_css を指定する。

Webサイトなどで使用しているのと同じCSSを読み込ませる。

example

tinyMCE.init({
	content_css:"../../css/style.css"
});

body_class、body_id

上で指定したCSSで、CSSを反映したい箇所が特定のclass指定の要素やid指定の要素の中だったりする場合に有効。

TinyMCEの編集画面のiframeの中のbodyタグに必要なidやclassを追加できる。

example

tinyMCE.init({
	body_class:"main"
});

doctype

doctypeも表示に影響する。

最近のTinyMCEだとHTML5のDOCTYPEがついていたり、古いTinyMCEだとDOCTYPEがなかったりするので、HTML5、HTML4、XHTMLなど明示する。

example

tinyMCE.init({
	doctype:"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">",
});

remove_linebreaks

全角スペースでインデントをつけようとすると、TinyMCEが除去したりするので、そういった調整を整形機能で消さないようにする。

example

tinyMCE.init({
	remove_linebreaks:false
});

【JavaScript】全角スペースは使ってよい（仕様では）

June 18, 2015, 5:00 pm

≫ Next: 【JavaScript】配列に要素を追加する方法

≪ Previous: TinyMCEで編集画面、プレビュー画面と最終的な表示をなるべく一致させる

$

0

0

問題

JavaScriptに全角スペースが入っているのを見つけたのですが、エラーも何も問題が発生していないです。

そんなもんなんですか。

//↓ifの後ろに全角スペースが！
if　(a > 0) {

}

答え

JavaScriptの仕様（ECMAScript 5.1の仕様）によると、以下の文字がホワイトスペースとして定義されている。

Table 2 — Whitespace Characters

Code Unit Value	Name	Formal Name
\u0009	Tab	<TAB>
\u000B	Vertical Tab	<VT>
\u000C	Form Feed	<FF>
\u0020	Space	<SP>
\u00A0	No-break space	<#x0a>
\uFEFF Other category “Zs”	Byte Order Mark Any other Unicode “space separator”	<BOM> <USP>

http://es5.github.io/#x7.2

UnicodeのカテゴリZsに属する文字は全て空白文字として扱われるとのことで、該当する文字は以下の通り。

Character	Name
U+0020	SPACE
U+00A0	NO-BREAK SPACE
U+1680	OGHAM SPACE MARK
U+2000	EN QUAD
U+2001	EM QUAD
U+2002	EN SPACE
U+2003	EM SPACE
U+2004	THREE-PER-EM SPACE
U+2005	FOUR-PER-EM SPACE
U+2006	SIX-PER-EM SPACE
U+2007	FIGURE SPACE
U+2008	PUNCTUATION SPACE
U+2009	THIN SPACE
U+200A	HAIR SPACE
U+202F	NARROW NO-BREAK SPACE
U+205F	MEDIUM MATHEMATICAL SPACE
U+3000	IDEOGRAPHIC SPACE

全角スペース (U+3000) もカテゴリZsに含まれる。

つまり、半角スペースと同様に空白文字として扱われる。

※ 使いたいわけではない！

【JavaScript】配列に要素を追加する方法

April 11, 2016, 5:00 pm

≫ Next: 【JavaScript】配列から要素を削除する方法

≪ Previous: 【JavaScript】全角スペースは使ってよい（仕様では）

$

0

0

問題

配列に要素を追加するには？

答え

先頭に要素を追加 → unshift

var arr = [ "a", "b", "c", "d", "e" ];

arr.unshift("x");

// arr → [ "x", "a", "b", "c", "d", "e" ]

末尾に要素を追加 → push

var arr = [ "a", "b", "c", "d", "e" ];

arr.push("x");

// arr → [ "a", "b", "c", "d", "e", "x" ]

指定位置に要素を追加 → splice

var arr = [ "a", "b", "c", "d", "e" ];

arr.splice(2, 0, "x");

//添え字2になる位置に1個挿入
// arr → [ "a", "b", "x", "c", "d", "e" ]

指定位置に複数の要素を追加 → splice

var arr = [ "a", "b", "c", "d", "e" ];

arr.splice(3, 0, "x", "y", "z");

//添え字3になる位置に3個挿入
// arr → [ "a", "b", "c", "x", "y", "z", "d", "e" ]

---

【JavaScript】配列から要素を削除する方法

April 12, 2016, 5:00 pm

≫ Next: 【JavaScript】 input[type=”file”]で選択した画像をimg要素で表示する

≪ Previous: 【JavaScript】配列に要素を追加する方法

$

0

0

問題

配列から要素を削除するには？

答え

それぞれ、配列から要素を削除すると同時に、戻り値で削除した要素も取得できます。

先頭の要素を削除 → shift

var arr = [ "a", "b", "c", "d", "e" ];

var x = arr.shift();

// arr → [ "b", "c", "d", "e" ]
// x → "a"

末尾の要素を削除 → pop

var arr = [ "a", "b", "c", "d", "e" ];

var x = arr.pop();

// arr → [ "a", "b", "c", "d" ]
// x → "e"

指定位置の要素を削除 → splice

var arr = [ "a", "b", "c", "d", "e" ];

// [1]（= 添字は0からスタートするので2番目の要素）から、要素を1つ削除
var x = arr.splice(1, 1);

// arr → [ "a", "c", "d", "e" ]
// x → [ "b" ]

var arr = [ "a", "b", "c", "d", "e" ];

// [2]（= 3番目の要素）から、要素を2つ削除
var x = arr.splice(2, 2);

// arr → [ "a", "b", "e" ]
// x → [ "c", "d" ]

【JavaScript】 input[type=”file”]で選択した画像をimg要素で表示する

April 18, 2016, 5:00 pm

≫ Next: 【JavaScript】ブラウザ画面にドラッグ＆ドロップされた画像をimg要素で表示する

≪ Previous: 【JavaScript】配列から要素を削除する方法

$

0

0

問題

<input type=”file”> で選択された画像をJavaScriptで取得したいです。

答え

HTML

<input type="file" id="myImage" accept="image/*">
<img id="preview">

JavaScript

$('#myImage').on('change', function (e) {
    var reader = new FileReader();
    reader.onload = function (e) {
        $("#preview").attr('src', e.target.result);
    }
    reader.readAsDataURL(e.target.files[0]);
});

DEMO

ファイルを選択すると、下にプレビューを表示します。

【JavaScript】ブラウザ画面にドラッグ＆ドロップされた画像をimg要素で表示する

April 19, 2016, 5:00 pm

≫ Next: 【Vue.js】transitionを使ってBootstrapのModalをvue.jsで表示する

≪ Previous: 【JavaScript】 input[type=”file”]で選択した画像をimg要素で表示する

$

0

0

問題

エクスプローラーなどからドラッグ＆ドロップした画像をJavaScriptで取得したいです。

答え

HTML

<div id="target" style="border: solid 5px #ccc; padding:2em; text-align:center;">
	ここに画像ファイルをドロップします。
</div>

<img id="preview">

JavaScript

var target = document.getElementById('target');
target.addEventListener('dragover', function (e) {
	e.preventDefault();
	e.stopPropagation();
	e.dataTransfer.dropEffect = 'copy';
});
target.addEventListener('drop', function (e) {
	e.stopPropagation();
	e.preventDefault();
	const reader = new FileReader();
	reader.onload = function (e) {
		document.getElementById('preview').src = e.target.result;
	}
	reader.readAsDataURL(e.dataTransfer.files[0]);
});

DEMO

ここに画像ファイルをドロップします。

メモ

JavaScriptをjQueryで書く場合、dropイベントなどを取得するために、e.originalEvent を使う必要がある。

$('target').on("drop", function(_e){
	var e = _e;
	if( _e.originalEvent ){
	    e = _e.originalEvent;
	}
	e.stopPropagation();
	e.preventDefault();

	//以下略

【Vue.js】transitionを使ってBootstrapのModalをvue.jsで表示する

February 10, 2017, 4:00 pm

≫ Next: 【Vue.js】 BootstrapのModalをVueのコンポーネントにしてみた例

≪ Previous: 【JavaScript】ブラウザ画面にドラッグ＆ドロップされた画像をimg要素で表示する

$

0

0

問題

CSSはbootstrap.cssを利用して、動きはvue.jsで、BootstrapのModalを表示したい。

答え

bootstrapのモーダルは、.fadeに.inを追加して.fade.inにすると、CSSのtransitionが効く。

アニメーション前とアニメーション後に表示状態（display）を調整するとよい様子。

単純なclassの付与、削除ならば、vueのtransitionのenter-class、enter-to-classなどの設定で対応できるのだが、bootstrapのCSSはそうではなさそうなので、以下のようにしてみた。

<transition
      v-on:enter="function(el){$(el).css('display', 'block')}"
      v-on:after-enter="function(el){$(el).addClass('in')}"
      v-on:leave="function(el){$(el).removeClass('in')}"
      v-on:after-leave="function(el){$(el).css('display', 'none')}">
  <div class="modal fade" v-show="show">>
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" v-on:click="show=false"><span>&times;</span></button>
          <h4 class="modal-title">モーダルのタイトル</h4>
        </div>
        <div class="modal-body">
          <p>モーダルの中身</p>
          <p>モーダルの中身</p>
          <p>モーダルの中身</p>
        </div>
        <div class="modal-footer">
          <button type="button" v-on:click="show=false" class="btn btn-primary">クリックすると閉じるボタン</button>
        </div>
      </div>
    </div>
  </div>
</transition>

show が true になればfadein、showがfalseになればfadeoutする。

【Vue.js】 BootstrapのModalをVueのコンポーネントにしてみた例

February 11, 2017, 4:00 pm

≫ Next: 【Vue.js】 v-if と v-show の違い

≪ Previous: 【Vue.js】transitionを使ってBootstrapのModalをvue.jsで表示する

$

0

0

問題

vue.jsでbootstrapのmodalっぽいコンポーネントを作りたい。

答え

きちんとやると、BootstrapのJavaScriptがやっていることを組み込んだ方がよいと思うけど、

vue-strap の例 – https://github.com/yuche/vue-strap/blob/master/src/Modal.vue

簡単にそれっぽいものを自作するとこんな感じでどうでしょう。

● JavaScript

Vue.component('modal', {
	props: ['show'],
	template: '<transition'
				+ ' v-on:enter="function(el){$(el).css(\'display\', \'block\')}"'
				+ ' v-on:after-enter="function(el){$(el).addClass(\'in\')}"'
				+ ' v-on:leave="function(el){$(el).removeClass(\'in\')}"'
				+ ' v-on:after-leave="function(el){$(el).css(\'display\', \'none\')}">'
		+ '<div class="modal fade" v-show="show">'
			+ '<div class="modal-dialog">'
				+ '<div class="modal-content">'
					+ '<div class="modal-header"><button type="button" class="close" v-on:click="$emit(\'end\')"><span>&times;</span></button><slot name="header"></slot></div>'
					+ '<div class="modal-body"><slot name="body"></slot></div>'
					+ '<div class="modal-footer"><slot name="footer"></slot></div>'
				+ '</div>'
			+ '</div>'
		+ '</div>'
	+ '</transition>'
});

● CSS

bootstrap.css 読み込んでおいてください

● HTML

<modal v-on:end="alert('中の閉じるボタンを押された → ダイアログ終了処理とかshow=falseとか');" v-bind:show="show">>
	<div slot="header">
		<h4 class="modal-title">モーダルのタイトル モーダルのタイトル</h4>
	</div>
	<div slot="body">
		<p>モーダルの中身</p>
		<p>モーダルの中身</p>
		<p>モーダルの中身</p>
		<p>モーダルの中身</p>
		<p>モーダルの中身</p>
	</div>
	<div slot="footer">
		<button type="button" v-on:click="alert('ダイアログ終了処理とかshow=falseとか');" class="btn btn-primary">実行</button>
	</div>
</modal>