FC2ブログ
googleで
カスタム検索
プロフィール

けろ&ひな

Author:けろ&ひな
大阪在住。
親ばか。
最近、転職したよ。でも、やってることは一緒なんだけどね。;-P

最近の記事
カテゴリー
月別アーカイブ
最近のコメント
最近のトラックバック
スポンサード リンク

スポンサーサイト--------(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[fc2][jQuery][プラグイン]jQueryを使ってプラグイン(2)2011-03-11(Fri)

ちょっと間が空いたけど、前回の続き。

とりあえず、上から下へ落ちていくようにはできた。
<style>
#test {
position:relative;
border:solid 1px #999999;
overflow:hidden;
width:200px;
height:110px;
}
#test img {
position:absolute;
max-height:100px;
max-width:100px;
top:0;
left:0;
}
#test a {
border:0;
padding:0;
margin:0;
}
#test .active {
z-index:10;
opacity:1.0;
}
#test .past {
z-index:5;
opacity:0;
}
#dropcat {
z-index:11;
position:absolute;
background:#777777;
width:50px;
height:80px;
opacity:0;
}
</style>
<div id="test">
<div id="dropcat"></div>
<!--image-->
<img class="past" src="<%image_url>" alt="blog-date-<%image_year><%image_month><%image_day>.html">
<!--/image-->
</div>

<script type="text/javascript" src="http://blog-imgs-45.fc2.com/c/a/k/cakey2/jquery-1-5-1-min.js"></script>
<script type="text/javascript">

(function(){
var isNotEmpty = function(o) {
return (o && o.length>0);
}
var SlideFrame = {
activeTimer:null,
waitTimer:null,
firstItem: function() {
return this.find("img:first");
},
activeItem: function() {
var $active = this.find(".active");
$active = (isNotEmpty($active))?$active:null;
return $active;
},
nextItem: function() {
var $active = this.activeItem();
var $next = (isNotEmpty($active))?$active.next():null;
$next = (isNotEmpty($next))?$next:this.firstItem();
return $next;
},
startSlide:function() {
clearTimeout(this.waitTimer);
this.activeTimer = setTimeout(jQuery.proxy(this, "movePast"), 4000);
},
waitSlide:function() {
this.waitTimer = setTimeout(jQuery.proxy(this, "startSlide"), 1000);
},
movePast:function() {
// 現在表示中のITEMを消す
var $active = this.activeItem();
var dis = this.height()+20;
var speed = 500;
clearTimeout(this.activeTimer);
if ($active) {
$active.animate({"top":dis,opacity:0.2}, speed, jQuery.proxy(this, "moveActive"));
}else{
this.moveActive();
}
},
moveActive:function() {
// 次のITEMを表示する
var $active = this.activeItem();
var $next = this.nextItem();
var speed = 500;
var pos = {fol:0,top:0,left:0,isHIn:true,isWIn:true};
pos.fol = - $next.height();
pos.top = (this.height() - $next.height()) / 2;
pos.left = (this.width() - $next.width()) / 2;
pos.isHIn = ((this.height() - $next.height()) > 0);
pos.isWIn = ((this.width() - $next.width()) > 0);
$next.css({"top":pos.fol, "left":pos.left, "opacity":0.2})
.animate({"top":pos.top, opacity:1.0}, speed, jQuery.proxy(this, "avtivateItem"));
},
avtivateItem:function() {
var $active = this.activeItem();
var $next = this.nextItem();
if ($active) {
$active.removeClass("active").addClass("past");
$next.removeClass("past").addClass("active");
}else{
$next.addClass("active");
}
this.waitSlide();
}
};

jQuery.fn.cakey2 = function(param) {
var slider = jQuery.extend(this, SlideFrame);
return slider;
};
})();

$(document).ready(function(){
// 5秒おきに実行
$("#test").cakey2().startSlide();
});

</script>


どうも、まだ継承についてがよくわかってない。
でも、ちょっとだけわかったのは
jQuery特有なのか、javascriptがそうなのか分からないけど
普段使ってるプログラムはクラスベースだが
これは、プロトタイプベースになるらしい。
どう違うのか、最初よくわからなかったけど
色々と調べて、やってみてみると
あることに気付いた。

クラスベース→道具を作って、それを使って何かをする。
プロトタイプベース→時間軸に沿った生き物の変化に似ている。

どういうことかというと
クラスベースは、まずクラスありき。
それをnewして、道具を使える状態にする。
その道具の機能を使って何かをする。
いらなくなった道具は捨てる。

jQueryの?javascriptの?プロトタイプベースは、生き物を捕まえる。
その生き物にはできることが既に決まっている。
そこで、生き物にできることを教えてあげる。
えっと、documentという土壌があって、elementという生き物や
作られたオブジェクト(objectやfunction)が存在する。
そのprototypeが元々、それができることで
そのprototypeを継承してできることを増やしてあげる感じに思えた。

その継承がjQueryを使うと、$.extendや$.fn.extendになるのかな?と。
$.extendだと、その時点から先の$オブジェクトに対して記憶を上書きしたり追加したり?
$.fn.extendだと、全ての$オブジェクトに対して直接できることを増やす感覚なのかな?
ただ、やりすぎると何ができるのか分けわからなくなりそうだし注意が必要かと。
(あと、メモリとかの問題もあると思うし。。。)

で、今のソースの状態は非常に良くないと感じてます。(汗
extendしたcakey2のメソッドが返すものが何ないので
そこで、thisの成長が止まってしまう。
startSlide()ってやったら、そこから先は何もできない。
(いわゆるメソッドチェーンができない。)
あと、公開する必要ないメソッドが公開された状態になっていると。
それから、冗長なメソッドがある。activeとnextとか。
それから、、、
言い出すとキリが無いので、まだまだお勉強です。
関連記事

テーマ : プログラミング
ジャンル : コンピュータ

コメントの投稿

管理者にだけ表示を許可する

コメント

工事中
RSSフィード
リンク

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。