articles

2013 年 8 月 11 日

jQuery jquery transit

CATEGORYjQuery   2:17 AM

最近ゴリゴリにダイナミックにアニメーションさせる案件が多く、昔の知識だけだとパフォーマンス的に厳しい状況が出て来ました。

なのでこちらを実戦で利用してみようと思います。
ベンダープレフィックス等も対応しており、cssでキーフレーム書いたりなどするより早いし管理しやすそうです。

http://ricostacruz.com/jquery.transit/

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.transit.min.js">
		

2013 年 7 月 21 日

jQueryプラグイン 星用

CATEGORYjQuery   12:58 AM

星がきらめくようなプラグインです。
別に星じゃなくてもいいんですが、フェードインしてまたフェードアウトするような
オプションをとっていないので適当に調整する必要がありますが。

$("#star img").star();//フェードあり
$("#star img").star2();//明滅のみ

(function($) {
    
	/*初期設定*/
	$.fn.star=function(options){
		this.each(function(){
			var $this=$(this);
			$this.starFadeIn();
		});
		return this;
	};

	$.fn.starFadeIn=function(){
		p_obj=makePoint();
	$(this).css({"left":p_obj.x+"px","top":p_obj.y+"px"}).fadeIn(100).delay(p_obj.d).fadeOut(300,starFadeIn);
	}
	
	function starFadeIn(){
		$(this).starFadeIn();
	}


	$.fn.star2=function(){
		this.each(function(){
			var $this=$(this);
			$this.starShow();
		});
		return this;
	}

	$.fn.starShow=function(){
		// alert("s");
		p_obj=makePoint();
		// alert(p_obj);
		$(this).css({"left":p_obj.x+"px","top":p_obj.y+"px"}).delay(p_obj.d).show().delay(p_obj.d).hide(0,starShow);
		// delete p_obj;
	}

	function starShow(){
		$(this).starShow();
	}
    

    function makePoint(){
    	var x=Math.floor(Math.random()*1000)-200;
		var y=Math.floor(Math.random()*400);
		var d=Math.floor(Math.random()*1000)+300;
		obj={};
		obj.x=x;
		obj.y=y;
		obj.d=d;
		return obj;
    }
    
})(jQuery);


2013 年 2 月 7 日

Word PressでjQueryを利用したい

CATEGORYjQueryWordPress   9:41 PM

Word PressでjQueryを利用したい場合noConflict();が入っているので
以下のように修正しました。

$(function(){
 $('a.blank').attr("target","_blank");	
});

jQuery(function(){
 jQuery('a.blank').attr("target","_blank");	
});

・・・面倒だなあ。

2010 年 10 月 9 日

jQuery simplyscrollの件

CATEGORYjQuery   TAG 11:43 AM

simplyscrollのサンプルがありました。
というか、simplyscroll知りませんでした。
そんなに有名なんでしょうか?

あとgoogleコードでホスティングされてるのが
探すの下手くそです。




2010 年 9 月 15 日

jQuery UI タブでやっちまった!

CATEGORYjQueryjQuery UItabs   TAG 2:12 PM

動くはずなんだけどなーとおもいつつ
はまってしまいましたのでメモします。

以下の記述がないと駄目だったんですね。

.ui-tabs .ui-tabs-hide {
     display: none;
}

雰囲気でやるとダメってことです。
気をつけます。

2010 年 9 月 9 日

jHtmlAreaのデフォルトのツールバー

CATEGORYjavascriptjQueryWYSIWYG   12:58 PM

jHtmlAreaのデフォルトのツールバー
デフォルトであるサイズを変更するボタンとか追加したいなと思ったのですが
いまいちどこにあるのかわかりませんでしたので。

["html"], ["bold", "italic", "underline", "strikethrough", "|", "subscript", "superscript"],
["increasefontsize", "decreasefontsize"],
["orderedlist", "unorderedlist"],
["indent", "outdent"],
["justifyleft", "justifycenter", "justifyright"],
["link", "unlink", "image", "horizontalrule"],
["p", "h1", "h2", "h3", "h4", "h5", "h6"],
["cut", "copy", "paste"]

そしてツールバーの項目を変更する際のスクリプト

$(function(){
   $("textarea#content").htmlarea({
    toolbar: [
     ["html","|", "bold", "italic", "underline", "|", "forecolor"],
     ["increasefontsize", "decreasefontsize"],
     ["link", "unlink", "|", "image"],
     ["cut", "copy", "paste"]
	  ]
   });
});

2010 年 6 月 21 日

jQuery li複数のシミュレーション用

良くレイアウトをCSSで組む際に
リストが複数ある状態をシミュレーションするためにわざわざli要素をコピーとかするんですが
このスクリプトを制作のときに入れておけば楽でした。
li要素を変更したときにも役立ちます。

list='<li>'+$("#sample_list li:first").html()+'</li>';
for(i=0;i<10;i++){
    $("#sample_list ul").append(list);	
}

テスト用なので、稼働時には外しますが。