jCarouselLite

こちらからファイルをダウンロード→http://www.gmarwaha.com/jquery/jcarousellite/#download

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jcarousellite.js"></script>
<script type="text/javascript">
<!--
$(window).load(function(){
	$('#jCarouselLite1 div').jCarouselLite({
		auto:1500,
		speed:1000,
		visible : 1,
		btnNext: ".next",
		btnPrev: ".prev"
	});
	$('#jCarouselLite2').jCarouselLite({
		auto:2000,
		speed:2000,
		visible : 1,
		vertical:true
	});
});
//-->
</script>

5行目、普段なら $(function(){ から始まりますが、window.loadで始めないと初めに読み込んだ際に画像自体がうまく表示されません。

<div id="jCarouselLite1">
   <a href="javascript:void(0)" class="next">&gt;</a>
   <a href="javascript:void(0)" class="prev">&lt;</a>
   <div>
      <ul class="fade"><!--
          --><li><a href="recipe.html"><img src="images/index/splashLeft.jpg"></a></li><!--
          --><li><a href="recipe.html"><img src="images/index/splashLeft_f2.jpg"></a></li><!--
          --><li><a href="recipe.html"><img src="images/index/splashLeft_f3.jpg"></a></li><!--
          --><li><a href="recipe.html"><img src="images/index/splashLeft_f4.jpg"></a></li><!--
          --><li><a href="recipe.html"><img src="images/index/splashLeft_f5.jpg"></a></li><!--
       --></ul>
    </div>
</div>
<div id="jCarouselLite2">
   <ul class="fade"><!--
      --><li><a href="concept.html"><img src="images/index/splashRight.jpg"></a></li><!--
      --><li><a href="concept.html"><img src="images/index/splashRight_f2.jpg"></a></li><!--
      --><li><a href="concept.html"><img src="images/index/splashRight_f3.jpg"></a></li><!--
      --></ul>
</div>

普段使用する際はjCarouselLite2に書いてあるように、ulをdivで囲みます
jCarouselLite1では「次へ、前へ」のボタンを設置し、それを画像の上に表示させる為、更にdivで囲みました
jCarouselLite1をrelativeに、anchorをabsoluteに指定しています
また、前回作成した.fadeで画像のロールオーバーも可能です

background-color: #FFF;
filter: alpha(opacity=70);
-moz-opacity:0.70;
opacity:0.70;

border-radius: 4px;         /* CSS3 */
-moz-border-radius: 4px;    /* Firefox */
-webkit-border-radius: 4px; /* Safari,Chrome */

初めの4行でボタンを白の半透明に、
後の3行で、(IEでは表示されませんが)ボタンを角丸にします。

初期読込み時に一瞬画像が全て表示されます。
気になるようでしたらulにoverflow: hidden;を指定するとよいかもめ_( :3」∠)_

jQuery Blend

ボタンのロールオーバーでふわっと画像が切り替わるあれ
CSS Spriteなどであらかじめオーバー前と後の画像を準備しているのであればblendが簡単です。
CSSの:hoverの記述の部分をコピーし、:hoverを.hoverに変えたものを追記
ヘッタでblendを読み込んだあと、下記のようにセレクタで指定してください。

$('selector1,selector2').css('cursor','hand').blend();

blendを追加するだけだとボタンをマウスオーバーした際にマウスの形状が変化しません。
ので、cssにて指定します。

それ以外、たとえば一枚の画像をフェードさせたいだけの場合には・・・

$('img.fade,a.fade img,.fade a img').hover(function() {
	$(this).stop().fadeTo(500,0.7);
}, function() {
	$(this).stop().fadeTo(500,1);
});

JSに上記の記述をしておき、フェードさせたい要素にfadeのクラスを指定すればOK

<div><a><img class="fade"></a></div>

直接imgに指定しても、aタグに指定しても、更にその親要素に指定してもfadeがかかります。

また、ギャラリーなどで写真をマウスオーバーしたら、その写真以外がすべて半透明化するようなサイトなどではsiglings(兄弟要素)を指定します。

$('selector').children().hover(function() {
	$(this).siblings().stop().fadeTo(500,0.3);
}, function() {
	$(this).siblings().stop().fadeTo(500,1);
});

.children()が子要素、.siblings()が兄弟要素、簡単な相関図で書くと下図のようになります。

背景が濃いグレーのliを選択しているときのそれぞれの関係です。
特定のタグのみを指定したい場合には(‘a’)のように、括弧内に記述する事も可能です。
直前の親要素をさす場合、parentよりclosestの方が使い易いかもめ_( :3」∠)_

複雑なコーディングでなければ指定も楽ですが、CMSを導入している場合には融通が利かない事も多いです

フォームの見栄えの変更

formを設置するときによく使用するもの
・AjaxZip(郵便番号検索)
・Uniform(見た目を変更するjQueryプラグイン)

AjaxZipを此方のサイト様からダウンロード
Uniformを此方のサイト様からダウンロード
ふたつのスクリプト及びCSSを読み込む↓

<script type="text/javascript" src="ajaxzip2/ajaxzip2.js" charset="UTF-8"></script>
<script>AjaxZip2.JSONDATA = 'ajaxzip2/data';</script>
<link rel="stylesheet" href="uniform/css/uniform.default.css">
<script type="text/javascript" src="uniform/jquery.uniform.min.js"></script>
<script>
<!--
$(function(){
	$('select, input:checkbox, input:radio, input:text').uniform();
});
-->
</script>

2行目での指定は現在のファイルからの相対パスで指定します
8行目でuniformを使用するオブジェクトを指定します

AjaxZipを実際に動かすために

<input name="郵便番号" type="text" onKeyUp="AjaxZip2.zip2addr(this,'都道府県','市区町村');">
<select name="都道府県">~中略~</select>
<input name="市区町村" type="text">
<input name="番地・アパート・マンション名" type="text">

郵便番号入力後にそのテキストボックスから外れたら都道府県及び市区町村に自動入力します、の記述です
使用すると気づきますが、セレクトボックスやテキストボックスの枠が大きくなります
違和感を感じる時にはuniformのCSSの398行目あたりを適宜変更すると幸せになれるかもしれません

formの見栄えを変更してくれるものはいくつか試してみましたが、有名どころなjqtransformは僕にはちとめんどくさかったです(回り込み的な意味で)
5509さんのjqueryselectableは見栄えがすごくよくなります、が、僕がよく使ってるスクリプトと共存できない事が多くあまり使用していません

datepicker

日付入力欄なんかで最近よくみるカレンダーがにゅーっと出てくるやつです

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
$(function() {
    $("#calendar").datepicker();
});

最低限必要な記述は上記のみ
オプションもたくさんあります、以下割とよく使うもの
dateFormat: ‘yy/mm/dd’ 表示形式(2011/7/7)
showButtonPanel: true カレンダー左下に今日の日付を選べるボタンと右下に閉じるボタン追加
numberOfMonths: [行,列] テーブルの概念と同じで、何行何列分のカレンダーを表示するか(3行3列であれば3×3の9個)
maxDate: ‘+1m’ 未来の日付の選択可能範囲(年・月・週・日がそれぞれymwdに対応、+1wであれば1週間先まで)
minDate: ‘-1m’ 過去の日付の選択可能範囲(年・月・週・日がそれぞれymwdに対応、+1wであれば1週間前まで)
※複数個記述する際には最後の行以外の文末にカンマ(,)を忘れないように
他にもアニメーションの仕方や表示のディレイなど面白いオプションが様々ですが、長くなるため割愛させていただきます

きれいさっぱり!

これまでの記事もテーマも消しました!
コーディングする上でよく使うコードや使い方、ややこしかったりめんどくさかったりするコードなんかを、ぱぱっとすぐにコピペできるようなメモサイトにするのが目標で、あとは日記やよく使うソフトとか、なんかてきとーな事をつらつら並べていけたらなって思ってます

デザインはいまのとこデフォだけど、記事がたまってきたらそのうち作るか差し替えるかすると思います

個人的なメモ、備忘録ですが、通りすがりのどなたかの助けになれば幸いです