雑草魂

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

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

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

かっこいいチェックボックスを入れたいときはこれにしよう。

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

参考サイト
http://www.eyecon.ro/datepicker/

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

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


［javascript］

$('form').highlight('div')；

スマートフォンでヘッダーやフッターはスクロールに追従する方法はあるのですが、
それ以外にスクロールに追従するステータスバーみたいなものを表示させる。
バーの表示される位置は最下部になっており、「-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);
}

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

<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/