入力チェックや、警告表示に使うJavascriptのalertメソッドですが、ブラウザによって表示が全然違うので、そこを統一したいと考えました。
ちなみに、現在のMSIE、Firefox、Google Chrome、Operaだと以下のような表示です。
そこで、統一するために、Javascript（jQuery）とCSSを使って作ればよかったんですが、同じ用途のjQueryプラグインがあることがわかったので、そちらを試すことにしました。
jQuery UIのdatepickerで日付が1899年や1900年になる
BootstrapでjQuery UIのDatepickerを使う場合
日付の入力インターフェースとして、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マップで観光スポットを表示しているときに、近くの観光スポットをリストで表示していて、そのスポットをマウスでポイントしてやれば、そのスポットのマーカーを地図に追加して表示し、さらに現在地と追加地のマーカーが全て表示されるようにマップの拡大率を自動的に変更する・・・という仕様が必要になったので、備忘録メモ。
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見積・請求書システムを作る場合・・・
WEB上で表(table)をExcelっぽく使えるjQueryプラグイン「Handsontable」
WEBアプリケーションを作っていると、インターフェースはWEBアプリがいいんだけど、操作性はEXCELなんかの方が使いやすい！ってよくありますよね。
たとえば、フォームで格子状に「input type=”text”」を配置しても、すぐ下のテキストボックスに移動したいのに、タブキーだと何回も押さなければならなかったり、下矢印キーでは移動できなかったり・・・
そんな時に使えるのが「Handsontable」です。
紹介されているサイトはいくつかあったのですが、使い方が説明されているサイトが見当たらなかったので苦労しました・・・
なので、簡単な使い方をメモ代わりに書いておきたいと思います。
jQueryのattrでdisabledを操作できない！？
Twitter Bootstrapで使えるアップロードボタンの装飾
Twitter Bootstrap使ってますか？
僕はデザイナーではないので、デザインがとことん苦手です。かっこいいなぁとかこれいいなぁって思うサイトはたくさんあるのですが、自分でデザインすると、どうしてもモッサリなってしまう。なのでTwitter Bootstrapは非常にありがたいです。