ALERT表示をカスタマイズできるjQuery Alertをカスタマイズしてみる

jqueryalert_google_jqa

入力チェックや、警告表示に使うJavascriptのalertメソッドですが、ブラウザによって表示が全然違うので、そこを統一したいと考えました。
ちなみに、現在のMSIE、Firefox、Google Chrome、Operaだと以下のような表示です。

jqueryalert06

そこで、統一するために、Javascript(jQuery)とCSSを使って作ればよかったんですが、同じ用途のjQueryプラグインがあることがわかったので、そちらを試すことにしました。

続きを読む →

jQuery UIのdatepickerで日付が1899年や1900年になる

datepicker01

Bootstrap+jQuery+jQuery UIでインターフェースを作ることが多いのですが、そんな中はじめて陥ったDatepickerのワナをご紹介。

続きを読む →

BootstrapでjQuery UIのDatepickerを使う場合

datepicker02

日付の入力インターフェースとして、jQuery UIのDatepickerは、もはや常套手段いって過言ではないのではと個人的には思ってます。
どのように入力されるかわからない日付形式より、入力の手間も省け、定型で入力させるためによく使いますよね。

続きを読む →

選択された項目によって、カウントしたい入力文字数を変える

よくある文字数のカウントダウン。有名になったのはTwitterかな。140文字以内で入力しないといけなかったので。

で、Javascript+jQueryで単純に考えると、

<input type="text" name="comment" value=""> <strong></strong>

<script>
	$('input[type=text]').keyup(function(){
		// 制限文字数
		var limit = 140
		// 現在の文字を取得
		var str = $(this).val();
		// 残り文字数を計算
		var diff = limit - str.length;
		// 表示
		$(this).next().text("残り"+diff +"文字");
	});
</script>

となりますね。

続きを読む →

Googleマップにマーカーを追加表示する

Googleマップ

Googleマップで観光スポットを表示しているときに、近くの観光スポットをリストで表示していて、そのスポットをマウスでポイントしてやれば、そのスポットのマーカーを地図に追加して表示し、さらに現在地と追加地のマーカーが全て表示されるようにマップの拡大率を自動的に変更する・・・という仕様が必要になったので、備忘録メモ。

続きを読む →

jQueryで現在のリンクにクラスを付ける

PHPとかWPとかではなく、HTMLで静的なページを制作している場合、メニュー構造部分なんかは、そのページ毎に編集したりしないといけませんよね。

そんな時に、Dreamweaverではライブラリ機能が使えるのですが、ライブラリ機能を使うと、ページ毎に少し変えたい場合に変えれません。

<ul id="menu">
	<li><a href="index.html">HOME</a></li>
	<li><a href="cafe.html">Cafe</a></li>
	<li><a href="access.html">Access</a></li>
	<li><a href="contact.html">Contact Us</a></li>
</ul>

例えば上記のようなHTMLがライブラリとして登録されていると、指定してある全てのページに対して、同じコードが挿入されます。

続きを読む →

例えば「Handsontable」でWEB見積・請求書システムを作る場合・・・

handsontable2

たいそうな見出しをつけましたが、ようは上の画像のように、EXCELっぽいインターフェースなんだから、見積書なんぞに使えるんでねぇの?ということです。
Handsontableについては、前回の記事を参考にしてください。

続きを読む →

WEB上で表(table)をExcelっぽく使えるjQueryプラグイン「Handsontable」

handsontable2

WEBアプリケーションを作っていると、インターフェースはWEBアプリがいいんだけど、操作性はEXCELなんかの方が使いやすい!ってよくありますよね。

たとえば、フォームで格子状に「input type=”text”」を配置しても、すぐ下のテキストボックスに移動したいのに、タブキーだと何回も押さなければならなかったり、下矢印キーでは移動できなかったり・・・

そんな時に使えるのが「Handsontable」です。
紹介されているサイトはいくつかあったのですが、使い方が説明されているサイトが見当たらなかったので苦労しました・・・
なので、簡単な使い方をメモ代わりに書いておきたいと思います。

続きを読む →

jQueryのattrでdisabledを操作できない!?

jQueryでinput要素のdisabledを操作しようとしたら、ちょっと詰まったので備忘録。

続きを読む →

Twitter Bootstrapで使えるアップロードボタンの装飾

Twitter Bootstrap使ってますか?

僕はデザイナーではないので、デザインがとことん苦手です。かっこいいなぁとかこれいいなぁって思うサイトはたくさんあるのですが、自分でデザインすると、どうしてもモッサリなってしまう。なのでTwitter Bootstrapは非常にありがたいです。

続きを読む →