スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQueryでcheckedとdisabledを便利にする

JavascriptやjQueryでdisabledやcheckedを制御したり値を取ったりするのがめんどくさかったので、便利関数を作りました。
    // チェックボックスのチェック
jQuery.fn.checked = function(flag) {
if (undefined == flag) {
return undefined != jQuery(this).attr("checked");
}
return this.each(function(){
if (flag) {
if (undefined == jQuery(this).attr("checked")) {
jQuery(this).click();
}
} else {
if (undefined != jQuery(this).attr("checked")) {
jQuery(this).click();
}
}
});
}

// ボタンのdisabled
jQuery.fn.disabled = function(flag) {
if (undefined == flag) {
return undefined != jQuery(this).attr("disabled");
}
return this.each(function(){
if (flag) {
if (undefined == jQuery(this).attr("disabled")) {
jQuery(this).attr("disabled", "disabled");
}
} else {
if (undefined != jQuery(this).attr("disabled")) {
jQuery(this).removeAttr("disabled");
}
}
});
}


// チェック状態を取得する(true/false)
jQuery('input[name=aaa]').checked();

// チェックする
jQuery('input[name=aaa]').checked(true);

// チェックを外す
jQuery('input[name=aaa]').checked(false);

// Disabled状態を取得する(true/false)
jQuery('button').disabled();

// Disabledにする
jQuery('button').disabled(true);

// Disableを外す
jQuery('button').disabled(false);
スポンサーサイト

jQueryでクリックしたふりをする

jQueryでリンクをクリックしてみたかったんですが、
jQuery('#aaa').click();
では遷移しませんでした。
調べてみたらEventオブジェクトを作成してそれを投げればいいようです。
ちなみに、これだとclickのイベントハンドラーは実行されませんでした。
動作はChrome18で確認しています。

<html>
<body>
<a id="aaa" href="http://www.yahoo.co.jp">Yahoo</a>
<br/>
<a href="javascript:aaa();">ok</a>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"/></script>
<script type="text/javascript">
function aaa() {
var a = jQuery('#aaa')[0];
var e = document.createEvent('MouseEvents');
e.initEvent('click', true, true);
a.dispatchEvent(e);
}
</script>
</body>
</html>

date.jsがバグったのでmoment.jsにした

Date.jsを使ってたら日付のパースでバグってることを発見しました。

d1 = Date.parse('Fri Mar 23 16:20:00 +0900 2012');
→Fri Mar 30 2012 16:20:00 GMT+0900 (JST)

Date.jsって全然更新されないので、更新が活発なMoment.jsに乗り換えてみました。

d2 = moment('Fri Mar 23 16:20:00 +0900 2012').toDate();
→Fri Mar 23 2012 16:20:00 GMT+0900 (JST)

うまくいきました。

JavaScriptでPostgreSQLのタイムスタンプ型をTwitterのWebっぽい時間で表示する

追記
修正しました。
ソースはこちら

TwitterのWebって、一日以内だと1分前とか1時間前とか表示されて、それ以上時間が経っていると、つぶやいた時間が表示されます。
ということで、タイトル通りの変換をかけたいと思います。

PostgreSQLのタイムスタンプ型は「2010-09-11 22:52:30+09」というような表現になっています。
これをパースしてJavaScriptのDate型にした後、現在時間と比較して、ふさわしい表示を返します。

ちなみに、なんでいつものPHPでなくJavaScriptなのかというと、表示している間も経過時間をつど変更するため、クライアントで行う必要があったためです。

function makeTwitterDate(src) {
src.match(/(\d\d\d\d)-(\d\d)-(\d\d) (\d\d):(\d\d):(\d\d)/);
date = new Date(RegExp.$1, Number(RegExp.$2) - 1, RegExp.$3
, RegExp.$4, RegExp.$5, RegExp.$6);
now = new Date();
diff = now.getTime() - date.getTime();
if (diff < 1000 * 60) {
return Math.round(diff / 1000) + "秒前";
} else if (diff < 1000 * 60 * 60) {
return Math.round(diff / (1000 * 60)) + "分前";
} else if (diff < 1000 * 60 * 60 * 24) {
return Math.round(diff / (1000 * 60 * 60)) + "時間前";
} else {
var monthAry = ['Jan', 'Feb', 'Mar', 'Apl', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var hour = date.getHours();
var ampm = " AM ";
if (hour > 12) {
hour = hour - 12;
ampm = " PM ";
}
var minute = String(date.getMinutes());
if (minute.length == 1) {
minute = "0" + minute;
}
var day = date.getDate();
var prefix = "th";
switch (day) {
case 1 :
prefix = "st";
break;
case 2 :
prefix = "nd";
break;
case 3 :
prefix = "rd";
break;
}
var year = "";
if (now.getFullYear() != date.getFullYear()) {
year = ", " + String(date.getFullYear());
}
return String(hour) + ":" + minute + ampm
+ monthAry[date.getMonth()] + ' '
+ String(day) + prefix + year;
}
}

JavaScriptで削除リンクに確認を埋め込む

Webで削除というリンクがある時に、そのリンクを踏むといきなり削除するのではなく、削除確認画面をはさんで削除したいことがあります。
画面遷移して確認画面を出すのはめんどうくさいので、JavaScriptで確認のダイアログを出すようにします。
以下をクリックすると、削除確認ダイアログが表示されます。OKボタンを押すとhrefのページに遷移します。キャンセルを押すと、現在のページにとどまります。

削除

ソースは以下の通りです。
<a href="#"
onClick="return confirm('削除します。\nよろしいですか?');">

削除</a>
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。