ボタンとかフォームを無効化させたい時用。そのまんまだけどメモ。
■無効化したいとき
var elem = $('button');
elem.attr('disabled', 'disabled');
■有効にしたいとき
var elem = $('button');
elem.removeAttr('disabled');
いじょう。かんたん。
jQueryでinput要素のdisabledを操作する。
jQueryでGrowlウィンドウを実装する。
右上にぽこっと出てくるあれ。ちょっとした機能だけど実装するとかっこいい。
1, まずはココ←から「pnotify」をダウンロード
2, 以下の通り必要なファイルを読み込む。head内が無難かと。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.pnotify.js"></script> <link href="jquery.pnotify.default.css" media="all" rel="stylesheet" type="text/css" /> <link href="jquery.pnotify.default.icons.css" media="all" rel="stylesheet" type="text/css" /> // ※公式と同様のスタイルにするためにはbootstrap.cssを読み込む必要があるので注意
3, Growlウィンドウを出したいタイミングで下記コードを呼び出す
$.pnotify({
title: 'Success Title',
text: 'Test Message',
type: 'success'
});
デモ←クリック（右上に表示されます。）
※bootstrap.cssを読み込んでいないため、全く装飾されていないウィンドウが表示されます。
ほかにも色々な出し方があるので、詳しくは公式サイトを参照されたし。↓
http://sciactive.github.io/pnotify/
CSSでグラデーション状の仕切り線を作成する。
ラインの両端を背景色になじませることで、リッチな仕切り線を作成できる。
上記の例は以下のようなコードで実装可能。
■HTML
<hr class="gradLine gray"> <hr class="gradLine blue"> <hr class="gradLine green"> <hr class="gradLine red">
■CSS
body {
background-color:#000;
}
.gradLine {
border: 0;
height: 1px;
}
.gradLine.gray {
background: -webkit-linear-gradient(left, #000 0%, #ccc 30%, #ccc 70%, #000 100%);
}
.gradLine.blue {
background: -webkit-linear-gradient(left, #000 0%, #00bfff 30%, #00bfff 70%, #000 100%);
}
.gradLine.green {
background: -webkit-linear-gradient(left, #000 0%, #adff2f 30%, #adff2f 70%, #000 100%);
}
.gradLine.red {
background: -webkit-linear-gradient(left, #000 0%, #ff6347 30%, #ff6347 70%, #000 100%);
}
上記はWebkit系のブラウザのみでしか動作しないので注意。マルチブラウザ対応にする場合は、linear-gradientプロパティに対して適宜ベンダープレフィックスを追加してやる必要がある。
jQuery基本操作まとめ。
いまさら感否めないけど、おさらいの意もこめて。
■セレクタ編
$('div, span') // 複数の要素を指定。
$('div span') // 親要素の子孫を指定。この場合div中のどこかにあるspanを選択。
$('div > span') // 親要素直属の子供を指定。子孫要素は無視される。
$('h1 + p') // 要素の前後関係を指定する。この場合h1直後にあるpが選択される。
$('div[class=header]') // 指定した要素、属性、値を持つ要素を選択。
$('tr:odd') // 偶数番目の要素を指定。
$('tr:even') // 奇数番目の要素を指定。
$('tbody:nth-child(5)') // n番目の子要素を指定。(even)、(odd)を渡せば奇数、偶数を指定可能。
$('tbody:first-child') // 最初の子要素を指定。
$('tbody:last-child') // 最後の子要素を指定。
$('ul li:only-child') // 単一の子要素を指定。この場合ulの中に単一のliを持つものがあれば選択される。
$('input:checked') // チェックボックスにてチェックされた要素を指定。
$('select option:selected') // セレクトボックスにて選択された要素を指定。
■メソッド編
.css() // 指定した要素のstyleを設定する。プロパティ名のみを指定した場合、現在の設定値を返却する。 .attr() // 指定した要素の属性を設定する。属性名のみを指定した場合、現在の値を返却する。 .text() // 指定した要素のテキストを操作する。パラメーターを指定しなかった場合、現在のテキスト要素を返却する。 .html() // 指定した要素のHTMLを操作する。パラメーターを指定しなかった場合、子のHTML要素を返却する。text()関数と違い文字列のサニタイズは行われない。 .addClass() // 指定した要素に引数で渡したクラスを追加する。 .removeClass() // 指定した要素に引数で渡したクラスが存在していれば削除する。 .toggleClass() // 引数で渡したクラスが指定要素中に存在していれば削除し、無ければ追加する。 .width() // 指定した要素の幅をピクセル単位で操作する。パラメーターを渡さなかった場合現在の幅を返却する。 .height() // 指定した要素の高さをピクセル単位で操作する。パラメーターを渡さなかった場合現在の高さを返却する。 .val() // input要素のvalueを操作する。パラメーターを渡さなかった場合、現在のvalue値を返却する。
■イベント系メソッド編
.click() // 要素がクリックされた際に処理を行う。 .change() // input要素の値が変更された際に処理を行う。 .hover() // マウスオーバー、アウトをトリガーに処理を行う。第1引数にオーバー時の処理を、第2引数にアウト時の処理を指定する。 .resize() // ウィンドウサイズが変更された際に処理を行う。 .scroll() // スクロールアクションが発生した際に処理を行う。
これだけ抑えてれば大体の処理は実現できるかと。（思う！！）
Javascriptにて文字列から指定文字を取り除く。
まずは、特定の一文字を取り除く方法。
var str = '123,000,000,000'; res = str.replace(/,/, ''); console.log(res); ↓ // 123000,000,000
上記は文字列中のカンマ（,）を取り除く場合の例。一番最初に発見したカンマのみ空白文字に置換、文字列を返却して終了。
次に、文字列中全てのカンマを取り除きたい場合。
正規表現の最後にオプションを指定することで、ヒットした全ての文字を置換することが可能。
var str = '123,000,000,000'; res = str.replace(/,/g, ''); console.log(res); ↓ // 123000000000
2行目の通り、正規表現の最後に「g」オプションを渡してやることで再帰的に対象文字列を置換してくれる。
jQueryにてappend()したエレメントをfadeIn()させたい時。
めも。処理の順番が重要。
// 追加したい要素を定義
var html = '<tr><td>Append</td><td>Element</td></tr>';
$(html).hide().appendTo('tbody.target').fadeIn(150);
上記はclass=”target”のtbodyへ、2行目の要素を追加しフェードインさせる際の例。
まず最初にhide()で要素を隠してから追加、最後にフェードインするという流れ。
jQueryUIでMacのログオン失敗時っぽい挙動を再現する。
パスワードが違うとぶるぶる左右にゆれるあれ。
1, まずはjQueryUIを読み込む。下記はgoogleのホスティングサービスを利用した例。まぁどこで読み込んでもいいけどhead内が無難かと。
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
2, そしたら使いまわしやすいようにぶるぶる専用の関数を作ってみる
function shake(elem){
var shakeTimes = 3;
$(elem).effect('shake', {times:(shakeTimes)}, 300);
}
※shakeTimesは何回左右にゆれるかを指定
※3行目、最後の因数に総処理時間をミリ秒で指定
3, 作った関数へぶるぶるさせたいエレメントを渡してあげれば完了
target = $('div.error');
shake(target);
上記はclass=”error”のdiv要素をぶるぶるさせる時の例。
jQueryUIめっちゃたのしい。
JavascriptにてPHPのnumber_format()的な処理を行う方法。
数列の3桁ごとにカンマを挿入したい時用。
渡した値が数値以外だった場合は文字列型の0を返却。
function numberFormat(int){
value = String(int);
while(value != (value = value.replace(/^(-?\d+)(\d{3})/, '$1,$2')));
if(isNaN(parseInt(value))) value = '0';
return value;
}
これは便利。