javascriptのスライドツール

jqueryの拡張として作った。エフェクトをもうちょっと追加したいな。

デモ:
index.html

ソース:
slide.js
(function(){

var EFFECT_DIRECTION_NEXT = 0;
var EFFECT_DIRECTION_PREV = 1;
var KEYCODE_LEFT = 37;
var KEYCODE_RIGHT = 39;

var slide = {};

//設定
slide.setting = {
effect: "none",
slideId: "#slide"
};

//ページ切替時のエフェクト
slide.effect = {
none: function($page1, $page2, direction){
$page1.hide(function(){$page2.show()});
},

fade: function($page1, $page2, direction){
$page1.fadeOut(function(){$page2.fadeIn()});
}
};

//本体
slide.core = function(){
this.$slide = $(slide.setting.slideId + ">*");
this.currentSlide = 0;
this.init();
};

slide.core.prototype = {
init: function(){
this.$slide.hide().first().show();

var self = this;
var $window = $(window);
$window.keydown(function(e){
if(e.keyCode == KEYCODE_LEFT) self.prev();
if(e.keyCode == KEYCODE_RIGHT) self.next();
});

this.$slide.width($window.width()).height($window.height());

$("body").append('
1 / '+ this.$slide.size() + '
');
},

next: function(){
var self = this;
if(this.currentSlide < this.$slide.size() - 1){
this.changeSlide(EFFECT_DIRECTION_NEXT, function(){return ++self.currentSlide});
}
},

prev: function(){
var self = this;
if(this.currentSlide > 0){
this.changeSlide(EFFECT_DIRECTION_PREV, function(){return --self.currentSlide});
}
},

changeSlide: function(direction, callback){
slide.effect[slide.setting.effect](
this.$slide.eq(this.currentSlide),
this.$slide.eq(callback()),
direction
);
this.showPageNumber();
},

showPageNumber: function(){
$("#page-number").text((this.currentSlide + 1) + ' / ' + this.$slide.size());
}
};

$.jsSlide = function(){
if(arguments.length == 1)
for(key in arguments[0])
slide.setting[key] = arguments[0][key];

new slide.core();
};

})();
posted by 右京 | javascript

クロージャ的なのとプロトタイプ

(function(){
var CLOSURE_TEKINA_NANIKA = "クロージャ的ななにか";


prototypeTekinaNanika = function(){
this.value = 1;
};

prototypeTekinaNanika.prototype.getClosureTekinaNanika = function(){
return CLOSURE_TEKINA_NANIKA;
};
})();

private static final的に扱えて便利かなと。thisを書くのがめんどくさいときは是非。
posted by 右京 | javascript

localStorageに保存するオンラインペイントソフト

いろいろマッシュアップして作ったよ。つまり、カラーピッカーとか俺が作ったわけじゃないので、詳しくはソースコードを見てね。

ちなみに削除機能はないので、どうしてもってときはlocalStorageにあるそれらしきファイルを消してね。


一応、説明としてはクライアントサイドだけで完結してますよ。サーバーにファイルを保存とかじゃなくて。で、javascriptだけだと普通はローカルに保存とかできないんだけど、localStorageにはできる。保存形式はJSONになっちゃうんだけどね。

chrome,firefox,opera,safariで動作確認済み。IEはやめておいたほうがいい。
http://dl.dropbox.com/u/142237/LocalStorageMemo/index.html
posted by 右京 | javascript

コメントの名前を自動で生成するやつ作った

http://name-generator.appspot.com/からjsonpで読み込むやつの実装。なるべくグローバル変数を汚さない方向で作ってみた。

生のjavascriptバージョン。
(function(){
var callback = "jsonp" + Math.floor(Math.random()*100000000000000);
while(1){
if(typeof window[callback] == "function"){
callback = "jsonp" + Math.floor(Math.random()*100000000000000);
} else {
window[callback] = function(name){
document.getElementsByName("article_child__writer")[0].value = decodeURIComponent(name) + "(仮)";
};
break;
}
}

var a = document.createElement("a");
a.setAttribute("href", "javascript:void(0)");
a.setAttribute("onclick",
'var script = document.createElement("script");'+
'script.setAttribute("type", "text/javascript");'+
'script.setAttribute("src", "http://name-generator.appspot.com/jsonp?callback='+callback+'");'+
'var head = document.getElementsByTagName("head")[0];'+
'head.appendChild(script);'+
'return false;'
);
a.appendChild(document.createTextNode("名前を自動生成する"));

var writer = document.getElementsByName("article_child__writer")[0];
writer.parentNode.insertBefore(a, writer.nextSibling);
})();

jQueryバージョン。実際はこっちを使ってる・・・見てくれの問題で。
(function(){
$("[name=article_child__writer]")
.after('<a href="javascript:void(0)">名前を自動生成する</a>')
.next()
.click(function(){
$.ajax({
url: 'http://name-generator.appspot.com/jsonp',
dataType: 'jsonp',
success: function(name){
$("[name=article_child__writer]")
.val(decodeURIComponent(name) + "(仮)");
}
});
});
})();
posted by 右京 | javascript

twitterAnywhere対応したぞー

このブログかTwitterにつぶやけるようになったぞー。
まぁ、それだけなんですが。

twitterAnywhereというAPIを使うことによりTwitterでつぶやけるようにして、TopsyのAPIからその記事に対してコメントしているTweetを表示するようになってるよ。ソースと参考URLは以下からどうぞ。

ソース:twitterAnywhere.js
参考:http://creazy.net/2009/12/topsy_api_twitter_blogparts.html
posted by 右京 | javascript
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。