2月 162012
 

ブログを開設してから1ヶ月ちょっとだが、はてブされるエントリが出てきたので、ブログ内で被はてブ数を表示させるようにしてみる。ブックマーク数を画像で取得するAPIによると、被はてブ数のアイコンを表示させるには

<img src="http://b.hatena.ne.jp/entry/image/エントリーのURL" />

というimgタグを使えばいい。さらに、アイコンを該当するはてブにリンクさせるには

<a href="http://b.hatena.ne.jp/entry/エントリーのURL">
  <img src="http://b.hatena.ne.jp/entry/image/エントリーのURL" />
</a>

というaタグで囲めばいい。

まずはここまでを実現するJavaScriptを書いてみる。
Continue reading »

2月 072012
 

フォームで入力可能な文字種を制限したい場合に使えるjQueryのプラグインを作ってGitHubにアップしてみた。使い方は至って簡単。jQuery本体とjquery.klimit.jsをHTMLに読み込んで、キー入力制限をしたいフォーム(inputタグ)のclass属性にklimit-*を追加するだけ。

プラグインでデフォルトで用意したクラスは以下の通り。

  • klimit-digit:10進数のみ入力可能
  • klimit-hex:16進数のみ入力可能
  • klimit-lower:英小文字のみ入力可能
  • klimit-upper:英大文字のみ入力可能
  • klimit-alpha:英字のみ入力可能
  • klimit-alnum:英数字のみ入力可能
  • klimit-graph:英数字と記号のみ入力可能
  • klimit-mail:メールアドレスに使用できる文字のみ入力可能

klimit-hexklimit-graphは用途があるか疑問だが…。

Continue reading »

12月 272011
 

本ブログの検索窓(画面右上)のように、カーソルを合わせると文字が消えるフォームは最近よく見かける。jQueryを使ってこのフォームを作るにはどうしたらいいか。基本テクニックと応用テクニックを紹介しておこう。

Continue reading »

12月 232011
 

コンテンツ上にあるリンク先に飛んだ後、いちいちブラウザの「戻る」操作をするのが面倒なので、リンクを右クリックして「リンクを新しいタブで開く」習慣は誰でもあるだろう。この右クリックという操作自体が煩わしくなってきたので、とりまこのブログ内だけでもなんとか自動化できないかとjQueryを組んでみる。

Continue reading »