めも。
Javascriptは関数内部に常にargumentsという変数を持っており、渡された引数は全てここに格納されている。
下記のように参照可能。
function hoge() {
for(var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
【Javascript】引数が可変長のメソッドを定義する。
【Javascript】windowの幅と高さを正確に取得する。
現在表示しているウィンドウの幅と高さを正確に知るには下記変数を参照すれば良い。
window.innerWidth window.innerHeight
今までjQueryの「$(window).innerHeight(), $(window).innerWidth()」を使っていたけれど、
このメソッドを使うよりも素直にwindowオブジェクトを直接参照したほうが信頼できる模様。
※jQueryの関数で取得した場合たまに高さがおかしい場合があったので
【jQuery】秒速でタブUIメニューを実装する。
まずリストタグでメニューを定義。
var tabMenu = $('<ul>', {class: 'tab-menu'});
tabMenu.append($('<li>', {class: 'active'}).append($('<a>', {href: '#'}).html('タブ1')));
tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ2')));
tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ3')));
tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ4')));
tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ5')));
tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ6')));
tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ7')));
次に各タブのコンテンツ要素を定義
var tabContent = $('<div>', {class: 'tab-content'});
tabContent.append($('<div>').html('コンテンツ1'));
tabContent.append($('<div>').html('コンテンツ2'));
tabContent.append($('<div>').html('コンテンツ3'));
tabContent.append($('<div>').html('コンテンツ4'));
tabContent.append($('<div>').html('コンテンツ5'));
tabContent.append($('<div>').html('コンテンツ6'));
tabContent.append($('<div>').html('コンテンツ7'));
最後に挙動実装。
var tabs = tabMenu.children();
var contents = tabContent.children();
$.each(contents, function(key, elem) {
if(key != 0) {
$(elem).hide();
}
$(tabs[key]).click(function() {
var that = this;
var index = 0;
$.each(tabs, function(key) {
if(this == that) {
index = key;
}
});
$.each(contents, function(key) {
if(index == key) {
$(this).show();
$(tabs[key]).addClass('active');
} else {
$(this).hide();
$(tabs[key]).removeClass('active');
}
});
return false;
});
});
完了！！うん！！簡単だね！！
【Javascript】改行コードをbrタグに変換する。
PHPでいうnl2br。
str.replace(/[\n\r]/g, '<br>');
【Javascript】Javascriptにて文字列のピュニコード変換を行う。
下記ライブラリを用いる。
https://github.com/wealandwoe/punicode.js
要求ファイルは読み込み方などはリポジトリの「punycode.html」を参照されたし。
// ピュニコード変換を行う
var encoded = Punycode.encode('日本語');
// ピュニコードから文字列に復元する
var decoded = Punycode.decode(encoded);
これは便利！神ライブラリ！
※ちなみにURLとして利用したい場合は変換結果に「xn--」のプレフィックスを付けなければならないので注意。
【Javascript】配列の要素を特定の指定文字列で連結する。
join()を用いる。
下記例。
[1,2,3,4,5,6,7,8,9,10].join('<>');
↓
"1<>2<>3<>4<>5<>6<>7<>8<>9<>10"
join()の第1引数に文字列を渡すとその文字列で配列を連結してくれる。
ちなみに指定しなかった場合は「,（カンマ）」で繋がれてしまうので、デリミタを無くしたい場合は空白文字列「”」を渡せばOK。
【Javascript】iOSやアンドロイのホームスクリーンへの追加を促す吹き出しを簡単に実装する。
かなり便利なライブラリを見つけたのでメモ。
http://cubiq.org/add-to-home-screen
これを使うとデバイス、OS、言語を自動判定して適切なメッセージを自動で表示してくれる。ガチでマジで超絶便利な神ライブラリ。
ユーザーごとに表示回数や表示頻度の管理も行えて、毎回表示されて糞うざい！といった現象も回避できる。
加えてmetaタグの「apple-touch-icon-precomposed」もしくは「apple-touch-icon」を設定していると、それを自動検出してそのアイコン画像をポップアップ内に表示してくれたりもする。
これは最強ですわ。
【bootstrap3】モーダルウィンドウの出現タイミングと挙動を自分で制御する。
通常bootstrapのモーダルはHTMLのdata属性に特定の値を記述して動作をバインディングするが、任意の要素や挙動を設定したい場合は下記の通りスクリプトを記述すればよい。
// modal()メソッドを呼び出した瞬間モーダルが起動する。
$('#target').modal({
backdrop: 'static'
});
上記はモーダル起動した時、窓の外をクリックされてもモーダルが閉じないようにするためのオプション。
発火タイミングはクリックなりオンロードなりお好みでどうぞ。