@lice ::

views: 2345 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

Facebook 小工具的額外控制

views: 4395 times
Facebook小工具(Social Plugins)己被廣泛使用了兩年多
但被嵌入網站的管理者對於user使用這些工具的行為似乎無從介入, 也沒法把這個資訊跟網站內容作整合與統計
其實它是可以作到的, 前提是...
1. 建立facebook app 以取得app id
2. 以 JavaScript SDK 的方式來嵌入小工具(而不是用iFrame)

接著重點來了, 使用 FB.Event.subscribe 來監控user對於facebook工具的行為, 以使用率最高的"讚"按鈕來說, 用法如下:

FB.Event.subscribe('edge.create', function(href) {
	alert('謝謝你喜歡'+href);
});

也可以把alert那行替換成以下這行, 就是目前最討人厭流行的按了讚才能看的功能:
window.location = href+"?action=liked";
跟"讚"有關的Event有以下兩個, 其它可參考 FB.Event.subscribe說明...

edge.create -- 當使用者按了"讚"
edge.remove -- 當使用者取消按"讚"

使用 JavaScript SDK 很方便又功能多多, 而且對於無法使用server site code的網站管理者是一個很好的選擇...

Tag : facebook, javascript

發表於 March 17th, 2011 12:19 | 新發現 | Trackback 0 | Comment 0

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

views: 8784 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

破圖的處理

views: 9022 times
網頁有引用到外站的圖片, 但圖片不復存在時通常會看到一個所謂的破圖
若想要保持版面的完整與美觀, 可以動態以別的圖片代替
在圖片加上onerror屬性:

<img src="myimage.jpg" onerror="ImgError(this);">

再用javascript寫一個置換圖片的function

function ImgError(source){
    source.src = "img/default_image.jpg";
    source.onerror = "";
    return true;
}

這樣在圖片load不到時就會改顯示你設定的替代圖片了~

參考來源: jQuery/Javascript to replace broken images

Tag : html, image, javascript

發表於 September 29th, 2009 16:25 | 新發現 | Trackback 0 | Comment 0

用JQuery依序展示效果

views: 9575 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: 10627 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

javascript 的數字格式

views: 10444 times
javascript 對小數點有toFixed 及 toPrecision兩個內建function可以處理
但要為比較大的數字加分隔符號(如 2,376 的 ,)就要自己寫了

function addCommas(nStr)
{
	nStr += '';
	x = nStr.split('.');
	x1 = x[0];
	x2 = x.length > 1 ? '.' + x[1] : '';
	var rgx = /(\d+)(\d{3})/;
	while (rgx.test(x1)) {
		x1 = x1.replace(rgx, '$1' + ',' + '$2');
	}
	return x1 + x2;
}

參考: Formatting numbers in JavaScript

Tag : format, javascript, number, Web

發表於 August 6th, 2009 15:49 | 新發現 | Trackback 0 | Comment 0

.net 與 javascript

views: 6476 times
要透過.net輸出javascript有三種方法

Response.Write
RegisterStartupScript
RegisterClientScriptBlock

more..

Tag : .net, javascript

發表於 Febuary 10th, 2009 15:46 | 新發現 | Trackback 0 | Comment 0

取得HTML元件的位置

views: 7138 times
幫朋友找到了, 順便作個筆記...

 function findPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1) 
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function findPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }

參考: JavaScript Find Position

Tag : css, html, javascript

發表於 January 17th, 2009 11:51 | 新發現 | Trackback 0 | Comment 0

動態切換樣式(style)

views: 12217 times
偶爾會看到人家網頁上有動態切換樣式的功能
今天自己動手作才知道它的奧妙之處

原來要先把所有可切換的css檔都先load進來
並各自設定好它們的title

<link rel="alternate stylesheet" type="text/css" href="paul.css" title="wacky" />

more..

Tag : css, dom, javascript, layout, theme

發表於 September 28th, 2007 18:53 | 新發現 | Trackback 0 | Comment 0

<< prev [1] [2] 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