@lice ::

views: 2340 times
jquery的最大作用在於增加ui的好用程度, 幾乎沒有辦不到的, 也因此對一些特殊需求就只能當作挑戰吞下去了
例如在form裡的text輸入欄位按enter要能跳到下一個欄位, 聽起來很簡單但其實沒那麼單純(其實是因為我龜毛想寫的更漂亮)
找了很久終於找到很讚的寫法:

$(function() {
	$("input[type=text]").keydown(function(event){
	  if(event.keyCode == 13){
	    $(this).nextAll("input[type=text]:first").focus();
	  }
	});
}

Tag : form, javascript, jQuery

發表於 July 21st, 2011 16:04 | 新發現 | Trackback 0 | Comment 1

jquery動態產生連結的幾個方法

views: 8777 times
1,2 是不需要JQuery的基本方法

<a href="http://www.google.com" target="_blank">link 1 - google</a>
<div onclick="window.open('http://tw.yahoo.com');">link 2 - yahoo</div>

當連結目標是動態產生時可用下列三種方法
html部份-

<div id="aa">link 3 - imtv</div>
<div id="bb">link 4 - youtube</div>
<div id="cc">link 5 - yam</div>
<form action="" method="get" id="tmpform" target="_blank" style="margin:0px;"></form>

javascript部份-

	$("#aa").click(function(){
		window.open("http://www.im.tv","mywindow");
	});
	var aa = $('＜a＞＜a＞');
	aa.attr({ 
		href:"http://www.youtube.com",
		target:"_blank"
	});
	$("#bb").wrapInner(aa);		
	$("#cc").click(function(){
		$("#tmpform").attr('action','http://www.yam.com');
		$("#tmpform").submit();
	});

*第4行的＜＞符號請自行轉換為半形<>

奇妙的是某些版本的ie6對方法3,5是失效的, 查了半天只查到這個說明:
您無法開啟新的 Internet Explorer Window，或按一下連結後未執行任何動作
遇到這個狀況時, 把方法3的window.open改成location.href就沒問題了~

Tag : javascript, jQuery

發表於 November 17th, 2009 12:37 | 新發現 | Trackback 0 | Comment 0

用JQuery依序展示效果

views: 9569 times
若想讓一個以上的物件, 一個接一個的表現出slide或fade等效果時
直覺的作法是:

function slideImg1(){
  for(b=0;b<ImgCount;b++){
    $(".slide1").eq(b).slideDown('slow'); 
  }
}

但不管效果的速度改的多慢,或甚至用到setTimeout或setInterval它最後都會一起出來
研究出的結果是要善用它on complate 的callback參數:

function slideImg2(){
	if(ImgIndex<ImgCount){
		$(".slide2").eq(ImgIndex).slideDown('slow',slideImg2); 
		ImgIndex++;
	}
}

附上的sample加上了顯示進度的數字, 以方便更清楚的看出差別

slide_onebyone.html

Tag : css, javascript, jQuery

發表於 August 20th, 2009 18:12 | 新發現 | Trackback 0 | Comment 0

用JQuery來自製blink blink效果

views: 10619 times
有兩種方式 1. animate: 用callback方式呼叫自己, 反覆播放opacity(透明度)的變化

function blinkblink1(){
	var opc = ($("#blinkobj1").css("opacity")==1)?0:1;
	$("#blinkobj1").animate({
	        opacity: opc
	}, 800, blinkblink1 );
}

2. 反覆使用fadein, fadeout功能

function blinkblink2a(){
	$("#blinkobj2").fadeOut("slow",blinkblink2b);
}
function blinkblink2b(){
	$("#blinkobj2").fadeIn("fast",blinkblink2a);
}

效果請看這裡:

blinkblink.html

Tag : css, javascript, jQuery, Web

發表於 August 6th, 2009 16:58 | 新發現 | Trackback 0 | Comment 0

<< prev [1] next >>

« Feb 2012 »
日	一	二	三	四	五	六
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29