jQuery Text Animation Plugin1.1

jQueryPlugin jQueryTextAnimation

Demoサイト作成しました。
jQuery Text Animation Plugin
IEだと重すぎて固まる。。。orz
抜本的対策を考えねば(ーΩー )

Change log

  1. Stepの追加
  2. Highlightの追加
  3. Jumpの追加
  4. Rollのオプション追加
  5. 内部ロジックの改変

jQueryUI - Datepicker Tip

jQuery

jQueryUI DatepickerのTipです。

全てのdatepickerクラスの要素の後ろに
今日の日付を設定する「Today」ボタンと
値を空にする「Clear」ボタンを加える。



$(".datepicker").not(".hasDatepicker")

                .each(function(){

                    var datepicker = $(this);

                    $("<input type='button' value='Clear' />").click(function(){

                        datepicker.val("");

                    }).insertAfter(datepicker);

                    $("<input type='button' value='Today' />").click(function(){

                        datepicker.datepicker("setDate",new Date());

                    }).insertAfter(datepicker);

                })

                .datepicker() //好みのオプションをﾄﾞｳｿﾞ

                .datepicker("setDate",new Date());
もっと良い書き方ありそうﾃﾞﾂ。。。

jQueryでディープコピー

jQuery

javascriptのオブジェクトの複製を



Object.clone = function(source) { 

    return $.extend({},source); 

}
で空オブジェクトにコピーしてましたが、
このままだとシャローコピーだったのでﾊﾏｯﾀﾖ。

ｶﾞｼｶｰｼ、jQueryのソース眺めてたら。。。ｵｯ
$.extendの一つ目の引数にtrueを追加しとくとディープコピーになるっぽい。
ということで、

Shallow Clone



Object.shallowCopy = function(source) { 

    return $.extend({},source); 

}
var a = {a:{a:1},b:{a:1}};

var b = Object.shallowCopy(a);

b.a.a = 2;

window.alert(a.a.a); //2

window.alert(b.a.a); //2


Deep Clone



Object.deepCopy= function(source) { 

    return $.extend(true,{},source); 

}
var a = {a:{a:1},b:{a:1}};

var b = Object.deepCopy(a);

b.a.a = 2;

window.alert(a.a.a); //1

window.alert(b.a.a); //2


せっかくなんでjQuery用に改良。



//object clone

(function($){

    $.cloneObject = function(source,isDeep) {

        if(isDeep){

            return $.extend(true,{},source);

        }

        return $.extend({},source);

    }	

})(jQuery);
//使い方

var a = {a:{a:1},b:{a:1}};

var b = $.cloneObject(a);         //シャローコピーで複製

b.a.a = 2;

window.alert(a.a.a); //2

window.alert(b.a.a); //2



var c = {a:{a:1},b:{a:1}};

var d = $.cloneObject(c,true);    //引数にtrueを追加するとディープコピーで複製

d.a.a = 2;

window.alert(c.a.a); //1

window.alert(d.a.a); //2

jQuery冥利に尽きますな(ΦωΦ)

ajaxFileUploadと戯れる

ajaxFileUpload

jQueryﾌﾟﾗｸﾞｲﾝのajaxfileuploadを使ってみた。
画面遷移を行うことなくファイルをアップロードできるという優れもの。
ファイルサイズが軽いので中身をのぞいてみたらｺﾝﾅ仕組み。

  1. アップロード用Formを生成し、アップロードするファイル要素をアップロード用Formにコピーする。
  2. このときコピーするファイルのIDはDate().getTime()により生成し、一意なIDを割り当てる。
  3. アップロード用Formの表示位置を top:-1200px , left:-1200px , position:absolute で見えないよう設定し、body要素に追加する。
  4. 画面遷移用Iframeを生成し、表示位置を top:-1000px , left:-1000px で見えないよう設定し、body要素に追加する。
  5. Formのtarget属性に画面遷移用Iframeを設定することでメイン画面ではなくIframeを画面遷移させて回避をしてるっぽい。
  6. アップロード成功時のコールバック関数が存在する場合、レスポンスのデータとステータスを引数として実行する。
  7. アップロード失敗時のコールバック関数が存在する場合、レスポンスのデータとステータスとエラーオブジェクトを引数として実行する。

ﾌﾑﾌﾑ。ﾊｯｸ感がﾌﾟﾝﾌﾟﾝしますね。
このままでも使えるけど、フォームに他の値を追加ｼﾀｰｲ。ってことで改造。

  1. ajaxFileUploadをﾁｭｲｰﾝする。



//Before この行を

var form = jQuery.createUploadForm(id, s.fileElementId);
//After このように

var form = jQuery.createUploadForm(id, s.fileElementId,s.params);

  1. createUploadFormをﾁｭｲｰﾝする。



//引数を

    createUploadForm: function(id, fileElementId)
//ﾌﾔｰｽ

    createUploadForm: function(id, fileElementId,params)


//この行の下に

$(oldElement).appendTo(form); 
//以下を追加

for(var param in params) {

    var e = $('<input type="hidden" name="'+param+'" value="'+params[param]+'" />');

    $(e).appendTo(form);

}

  1. ajaxfileuploadを呼び出す引数にparamsオブジェクトを追加する

ｺﾝﾅｶﾝｼﾞ



$.ajaxFileUpload({

    url:'./cgi-bin/hogehoge.cgi',

    secureuri:false,

    fileElementId:"fileA",

    dataType: 'json',

    params : {

        id : "hogehoge",

        name : "fugafuga"

    },

    error: function (data, status, e){

        alert(e);

    },

    success : function(data, status){

        alert("ﾌｯﾌｰｲ");

    }

})