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

けろ&ひな

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

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

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

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

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

最近というか、ちょっと前からflashからhtml5へ!ってよく言われている。
いきなりhtml5といっても、それだけではさすがにできることが限られてしまうので
まずはJavaScriptを勉強してみる。

というわけで、流行りのjQueryを使ってみた。

最近のJavaScriptでは、Ajaxとかでてきて
JavaScriptの中からリクエスト投げたりとかを平気でできる。
あと、プロトタイプの考え方とかもあって
昔ながらのおまけ機能とは訳が違う。

で、基本はDOMの操作(ここは昔と一緒だ♪)なんですが
これがjQueryを使うと格段に楽になる!

まだまだ戸惑うこともありながらも勉強してたら
とりあえず使ってみたい!と思ったんで
せっかくだからfc2のプラグインを作ってみようと思った。

というわけで、現在やってることのメモ代わりに
記録として残していくことにした。

今やってるのは、fc2独自タグの<!--image-->タグを使ったプラグイン作成。

これって、まだ試験段階らしいけど
とりあえず使えるみたいなので、これ使って
ブログに投稿した最近の画像を拾ってきて
それをスライドみたいに表示を切り替えて
画像クリックで、その記事にジャンプ。
ってことをやってみようと思ってる。

で、現状。
とりあえず、imageタグで画像のURLとかは拾ってこれた。
それをimgとしてDOMに追加することもできて
リンクもできた。

あとはスライド形式にしてみるだけかなと。

現状では、横に並んでる画像を
一枚ずつ表示していくようにする。
デザインも考えないと。。。(ちょっと面倒臭くなってきた笑)



<div id="test">
<style>
#test img {
max-height:100px;
max-width:100px;
}
#test a {
border:0;
padding:0;
margin:0;
}
#test .novisible {
width:0px;
height:0px;
padding:0px;
margin:0px;
border:none 0px;
visibility:hidden;
}
</style>
<ul>
<!--image-->
<li class="novisible"><p class="url"><%image_url></p><p class="ymd"><%image_year><%image_month><%image_day></p></li>
<!--/image-->
</ul>
</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">

$(document).ready(function(){
$("#test li").cakey2({target:"#test"});
});

(function($){
$.fn.cakey2 = function(param){
var defaults = {
target:"#test",
index:0,
src:""
};
var option = $.extend(defaults, param);
return this.each(function(){
var src = $(this).find(".url").html();
var link = $(this).find(".ymd").html();
var img = "<a href=\"blog-date-"+link+".html\"><img src=\""+src+"\"></a>";
$(option.target).append(img);
});
};
})(jQuery);

</script>


$.fnとか使ってみて、ちょっとjQueryのプラグインちっくにしてみた。(笑

最終的にはjsファイルにまとめて、読み込むようにしたほうが
HTMLのデザインの変更時とかに楽そう。

あと、スタイルをどこで定義するかも考えたほうがいいかな?
こっちもcssファイルにまとめるか、それとも直書きそのままにしておくか。
そのままのほうが、変更は楽そうだしなぁ。。。
関連記事

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

コメントの投稿

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

コメント

Flash

なんだか知ってる言葉がでてきてうれしい限りです♪
(わからないことも多いけど汗)

私もFC2のプラグインでいろいろ作ったり
UPされてる誰かさんのを
いろいろいじって遊んでみたり
楽しいけど時間がいくらあっても足りないですね…。

最近はめっぽう頭のよい方のプラグインや
便利なhtmlをコピペで取り込む方式です。笑

<!--image-->を使ったのとかはfc2独自なんですね~。
知らなかった~
fc2のプラグインとか触ってると勉強になって
ここの部分を変えるとここがかわるんだ~って
素人ながら勉強してます。

一時期FlashでHPの最初の映像作ったり
ゲーム作ったり、ボタン作ったりしてたんですが
最近はついていけていません。
100くらい時間を使ってデザインして
やっとできたのがちょっと動く絵。
ちょっと悲しい笑

Re: Flash

>ブッダさん
ども、実世界でも家族でお世話になってます。(w
プラグイン作ったりしてたんですね。
しかも、Flashまで使って挑戦してたとは、
びっくりですよ。e-451

仕事柄、わざわざ車輪の再発明みたいなことやってますが
そうでなければ、
できてるものをペタッ!
が一番お手軽だし、そうしてたかも。v-8

そのうち、出来上がると思いますので
その時は見ていっておくんなまし。
工事中
RSSフィード
リンク

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