2011年06月27日

jQuery:チェックボックスのデザインをかっこよくするプラグイン

チェックボックスのデザインをかっこよくするプラグインを見つけたのでメモしておきます。

これは、おしゃれにデザインされたボタンとsafari風のボタンについて対応しており、
disabledなどの指定も可能です。

参考サイト:
http://widowmaker.kiev.ua/checkbox/

かっこいいチェックボックスを入れたいときはこれにしよう。
2011年06月15日

jQuery:複数選択できるカレンダープラグイン

複数選択できるカレンダープラグインを見つけたのでメモしておきます。
表示する月の数も指定することができ、日付の選択も複数することができる
便利なプラグインなので、どこかで使うことになるでしょう。
表示形式もいくつかあるので用途に合わせて使い分けることもできますね。

参考サイト
http://www.eyecon.ro/datepicker/
2011年06月08日

jQuery:フォーカスがあたった要素をハイライトする

よくあるフォーカスをハイライトするプラグインですが、メモとして。
jquery.highlight.jsを下記よりダウンロードし、
下記のようなコードで指定すればできるよう。
入力フォームやテーブルなどに使えますね。

参考サイト
http://www.keyframesandcode.com/code/development/javascript/jquery-highlight-plugin/


[javascript]

$('form').highlight('div');
2011年06月02日

jQuery:スマートフォンでスクロールに追従するバーを表示する

スマートフォンでヘッダーやフッターはスクロールに追従する方法はあるのですが、
それ以外にスクロールに追従するステータスバーみたいなものを表示させる。
バーの表示される位置は最下部になっており、「-18」となっているところが要素の高さ
になります。


[HTML]

<div id="footerList">ステータスバーです</div>

[js]

document.addEventListener("scroll", showFooter, false);
function showFooter()
{
 var footer = $('#footerList');
 var win = $(window).height();
 var pos = window.scrollY + win - 18;
 footer.css("display", "none");
 footer.css("left", "0px");
 footer.css("top", pos + "px");
 setTimeout(function(){
  footer.css("display", "block");
 }, 1000);
}
2011年05月30日

jQuery:画像やテキストが自動で切り替わるプラグイン、InnerFade

ポップアップでスライドショーとかはよくあるのですが、だただた、画像やテキストが切り替わるものを探していたらちょうどいいのがあったので。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$('#list').innerfade({
animationtype: 'slide',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '1em'
});
}
);
</script>
<style type="text/css" media="screen, projection">
@import url(css/jq_fade.css);
</style>        


<ul id="list">
<li>
<a href="#n1">りんご</a>
</li>
<li>
<a href="#n2">みかん</a>
</li>
<li>
<a href="#n3">パイナップル</a>
</li>
</ul>

参考URL:
http://medienfreunde.com/lab/innerfade/