WCAN mini MU ～CSS3＋jQueryを実際に使ってみよう！～
去る、6/5にWCAN mini MUに参加してきました。
今回のお題は、「CSS3＋jQueryを実際に使ってみよう！」という事で、WCAN x CSS Nite 2009 SPRINGの時に益子さんがお話された内容を踏まえ、各自CSS3や、jQueryを使用したサンプルを作成し、発表してしまおうという内容。
今回私、僭越ながら発表させていただきました；
当初は気楽に参加させていただこうと思ってたんですが、ありがたく（？）白羽の矢が飛んできまして、発表の機会をいただきました。
発表の内容は、「jQueryのプラグインを作ってみた」です。
WCAN x CSS Nite 2009 SPRINGの時に、益子さんのセッションで見せていただいたウィンク効果とタブ機能を使ったスライドショーのスクリプトを、汎用的に使えるようにと、プラグインにしてみました。（slideShow.js）
ま、単にプラグインの作り方を覚えたてで、やってみたかっただけです。
あと、一個だと間がもつかな？と心配になったので、newCheck.jsというものも作って行きました。これはトピックスやニュースなどの日付を、ローカルで取得した日付と単純に比較して、当日なら「New!」とか挿入する簡単なモノ。
実装方法は、
当然jquery.jsの読み込みと、各jsの読み込み。
記述はこうです。
$(function(){
$('div#hoge1').slideShow();
$('dl#hoge2').newCheck();
});
slideShowの方は、リスト要素二つを囲む要素に指定して下さい。
例えば上の指定の仕方だと、
<div id="hoge1">
<ul>
<li><a href="#visual1"><img src="nav1.jpg" /></a></li>
<li><a href="#visual1"><img src="nav2.jpg" /></a></li>
...
</ul>
<ul>
<li id="visual1"><img src="visual1.jpg" /></li>
<li id="visual2"><img src="visual2.jpg" /></li>
...
</ul>
</div>
のような感じでマークアップすれば、動くハズ。
オプションは３つあって、modeとspeedとcAlpha。
デフォルトは、mode:'fade',speed:'slow',cAlpha:1.0です。
modeは、'xfade'でクロスフェードします。
speedは、jQueryのエフェクトのオプションにもあるスピードが指定できます。
cAlphaは、コントロール部がカレントの時の透明度です。0?1の間で指定できます。
//記述例
$('div#hoge1').slideShow({mode:'xfade',speed:'fast',cAlpha:0.5});
newCheckの方は、トピックスや新着情報をマークアップする時に使用されるであろう、dlに指定します。
当日の日付がdtにあれば、ddの最後に「New!」が、spanで囲まれて挿入されます。ただしデフォルトでは、日付の区切り文字は「/」に設定されているので、日付の書式は「YYYY/mm/dd」のものしか評価してくれません。これはオプションで変えられます。
これもオプションは３つで、modeとglueとtext。
デフォルトは、mode:'dl',glue:'/',text:'New!'です。
modeは、'table'で実行するマークアップ対象をtableにします。
glueは区切り文字を他のものに変更します。例えば、'-'にすれば、ハイフン区切りの日付を評価します。'年月日'と指定する事もできます。
textは挿入するテキストです。
//記述例
$('table#hoge2').newCheck({mode:'table',glue:'年月日',text:'新着!'});
jsファイルのダウンロード 使用は自己責任の範囲でお願いします。厳密な検証は行っていません。バグ等の改善も時間がかかる事があります。
ちなみに、プラグイン作りに参照したサイトはコチラ。
http://ascii.jp/elem/000/000/201/201225/
自分の発表は以上の内容です。
他にも、合計で９人くらい発表された方がいました。
CSS3や、html5、iPhoneのアプリを作られた方等々、興味ある内容ばかりで、まだまだ勉強する事は多いです。
でも実装周りのお話はやっぱ楽しいすね。
アップルップルの鈴木さんも言われてましたが、発表までが一番の勉強でした。人に伝える為に、また自分も再度勉強し、理解が深まります。
発表の経験も含め、今回も非常に良い経験になりました。
、、、忘れてた！
a-blog cmsのステッカーいだだきました！
ボードに貼ってみましたが、一撃でなくなりそうです。
しかもこれだとデビューは冬ですね；
