顯示具有 JQuery 標籤的文章。 顯示所有文章
顯示具有 JQuery 標籤的文章。 顯示所有文章

如何從Javascript的Array中篩選出唯一的元素?

這是我今天寫CASE的時候遇到的問題,jQuery中有個$.unique函數,但發現這只能針對DOM元素才有效,也就是說對於陣列內的文字或數字是沒有作用的。後來考慮到將來有需求,於是就自己寫了一個函數,(包裝成API? 這函數實在太小,等我累積了很多程式碼後再說吧... :P )。

下列的方法程式碼真的很小,有需要的請歡迎大家多利用與討論...


函式:


function uniqueArray(arr) {
var obj = {};
var uniarray = [];
for (var key in arr) { obj[arr[key]]=1; }
for (var key in obj) { uniarray.push(key); }
return uniarray;
}



使用範例:

var ss = [123, 789, 123, 123, 789, 789, 456, 123, 789, 789, 456];
ss = uniqueArray(ss);
alert(ss.sort().join("|"));


結果得到: 123|456|789

感謝player的指教,提供了我更簡捷的寫法...!!

jQuery TOOLS 的推出與爭議?

昨天看了這篇jQuery Tools vs jQuery UI 才發現最近新推出了TOOLS的jQuery plugin。試玩一下Demo以及發現程式碼據TOOLS號稱gzipped過後只有5.78kb,這時心想:又挖到寶了。

想說再回到討論去上看看其他高手是否有不同意見,這時才發現TOOLS的出現已經引起一陣不小的風波。
原因就出在於TOOLS官網上寫明了它就是要補jQuery UI不足之處,例如:TOOLS有UI缺乏的tooltips、tabs、overlays等功能,且強調檔案比UI還要小。

marcgrabanski認為TOOLS既然對於UI不足之處有意見,最初就應該加入該UI團隊,一起協同開發改造出新版本,畢竟當初是受到UI的啟發,到後來卻因UI不足之處,甚至另起爐灶創立一個新品牌,這樣的行徑並不厚道。

但支持TOOLS的人卻也有不同的聲音,認為網頁開發者本來就是會殷切期望會有更小、更有效率的plugin,UI長久來效能不是最好,不過大家也都無從選擇起,如今又有新的plugin出現,大家樂見其成,應該給予鼓勵。

不過我個人的看法是,的確TOOLS應該也是拿了很多其他的plugin的構想,甚至是介面來當作自己的東西,overlay上的視窗關閉圖形我就覺得跟simpleModal幾乎一樣,大部分設計plugin的原創者可能也是稍微修改了別人的東西就當成自己的就放上自己BLOG上供大家參考,但卻沒有人像TOOLS一樣大費周章的設計CIS大力的行銷,實在不難發現想打敗UI的企圖心, (TOOLS開發者後來自己跳出來否認,他說他只想提供目前大家缺乏的東西而已... ) ,但不諱言的marcgrabanski也是有話直說的人,此次引起爭論也不是第一次,他的感受確實也是其來有自。

其中John Resig也發表了意見(jQuery原創者):

"jQuery UI Tabs is only 6KB minified and gzipped, jQuery Tools Tabs is 1.5KB minified and gzipped - and that's saying nothing of the features supported by both plugins."



"你檔案雖比我小但這兩者都不算什麼特點啦..." ^^

我覺得這些討論意見都蠻有趣的,大多數開發者仍然期待更小又有效率的plugins出現,至於是不是有很強的品牌行銷名稱,我認為並不是太重要,能夠好好的持續推出耕穩定的版本才是眾人所期盼的。

如何加速Javascript 下載時間?

如何加速網頁的javascript讀取速度?
其實大致上都是透過檔案壓縮的原理,讓檔案變小減少下載速度變快。這邊可以體驗壓縮過後的速度差異
  • 首先你需要有可量化的工具,你可以透過FireBug檢查你的網頁每個元素如:CSS、圖片或其他檔案下載的分析表。
  • 利用JSLint檢查你的javascript語法是否嚴謹合法,不過要有心理準備,你測試過後可能會因被挑出太多錯誤想哭,....
  • 再用http://dean.edwards.name/packer/ 壓縮檔案,有時可減少40%檔案大小。
  • 利用Cache檔案,如果系統更新不頻繁可以,系統若測試中就不建議。
原始可參考這篇文章Speed Up Your Javascript Load Time

.net內如何以jQuery搭配應用.ashx檔案

本篇文章有兩個重點:
  1. .net內如何jQuery搭配應用.ashx檔案
  2. 應用.ashx檔時應該注意什麼?

在.net中若要以jQuery.ajax實作ajax效果,可以用.aspx網頁來當作背後端提供資料,但因為是在背後端單純提供資料,所以該頁不需要有任何伺服端控制項。也就是說:假設你要建立service.aspx來當作提供背後端資料頁,你只會需要service.aspx.cs,而前端根本不需要任何控制項。所以為了節省檔案,建議可以使用*.ashx(泛型處理)。

這是前端jQuery想要呼叫背後端service.ashx的寫法
var ff="001";
$.get("service.ashx",{"f":ff}, function() {
.............
});


這是service.ashx檔案內容
string ss = "";

public void ProcessRequest (HttpContext cx) {
switch (cx.Request.QueryString["f"].ToString())
{
case "1": { ss=feed_delete(cx); break; }
case "2": { break; }
case "3": { break; }
}
cx.Response.ContentType = "text/plain";
cx.Response.Write(ss);

}


但今天測試的結果發現,我有些專案的*.ashx可以
秀出資料有些卻不行,花了點時間找出原因後才原因發現我之前使用過AjaxPro(那是很久前的另一個.net ajax技術方案),會在web.config中植入下列標籤。所以不顯示的原因就出在這,後來將該標籤拿掉就顯示正常了

下列是web.config檔案
......
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<!--<add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>-->
</httpHandlers>
......

JavaScript 程式碼的壓縮程式

JSMin
可刪除不必要的空格跟註解,節省下載時間。
http://www.crockford.com/javascript/jsmin.html

Packer
這是由DeanEdwards建立的js壓縮器、模糊器,jQuery就是透過它來壓縮的,除了提供Web介面外,也可以免費下載,可以有效的減少檔案大小,對執行效率影響很低。
http://dean.edwards.name/packer/

Pretty Printer
解壓縮程式,可以修飾js,恢復換行或是縮排,提供了相當多的選項。
http://www.prettyprinter.de/

好用的jQuery.live() 簡單範例說明

假設我要動態建立100個物件,每個物件都可以有Click事件,利用jQuery該怎做?


...答案是 jQuery.live()。

你可以自己測試一下,先連結到 minijquery ,分別拿下面的程式碼複製來測試。

這是JavaScript
$(function(){
for(var i=1;i<101;i++){
 $("#dd").append("<span class=ss id="+i+">"+i+"</span>");
}
$("#dd span").live("click",function(){
 $("#showID").html("我的ID是"+this.id);
});
});


這是CSS
#dd{border:solid 2px gray;}
.ss{margin:2px; background-color:green; display:inline-block; color:white; width:30px; text-align:center; cursor:pointer;}
#showID{color:red; font-size:40px;}

這是BodyHTML
<div id="dd"></div>
<div id="showID"></div>


結果如下圖顯示:


很神奇吧? jQuery.live() 減少了更多程式碼。
官網上這樣說明的:對於現在或"未來還沒產生"的元素當綁一個事件上,或是自訂的事件。(太神奇了,難道可以預知你要產生什麼元素??)

目前支援的事件有:click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。還不支援 blur, focus, mouseenter, mouseleave, change, submit等事件。live()跟bind()不同在於它一次只能綁一個事件,除此之外還有下列的區分:
  1. 利用event delegation的原理,不須重綁事件(re-bound)就可以操作現在、及晚一點才會產生的元素(future element)的事件處理。
  2. live()不會依照傳統的模式冒泡,也不能用stopPropagatoni或是stopImmediatePropagation停止。例如:"li"與"li a"都有各自兩個不同的click事件,當點選內部的"li a",兩個事件都會trigger。
  3. live()只能用一個選擇器,例如:可以 $("li a").live(...) ,但不可以 $("a", someElement).live(...);這樣也不行$("a").parent().live(...).
  4. 若要移除live(),就要用die()
  5. 只有1.3.2版才有支援完整效能。

神奇的live()與相關Event Delegatio觀念請參考jQuery.live()與Event Delegation 說明。

在Javascript中利用JSON簡化資料對應

假設在JavaScript中我們想做月份資料轉換的動作,比方說從資料庫中撈的月份是英文Mar要轉換成3,如下所示,m變數由英文月份轉換為數字1~12:


function translate_month(m){
 switch(m){
  case "Jan":m="1";break;
  case "Feb":m="2";break;
  case "Mar":m="3";break;
  case "Apr":m="4";break;
  case "May":m="5";break;
  case "Jun":m="6";break;
  case "Jul":m="7";break;
  case "Aug":m="8";break;
  case "Sep":m="9";break;
  case "Nov":m="10";break;
  case "Oct":m="11";break;
  case "Dec":m="12";break;
 }
return m;
}


但是這樣的寫法會比較長,"case"、"break"重覆寫一堆,尤其當對應的資料很多的時候,感覺很累贅。其實你可以參考JSON格式的做法來設計一個對照,如下所示。

function translate_month(m){
 var mons = { "Jan": "1", "Feb": "2", "Mar": "3", "Apr": "4", "May": "5", "Jun": "6", "Jul": "7", "Aug": "8", "Sep": "9", "Nov": "10", "Oct": "11", "Dec": "12" };
 return m=mons["Feb"];
}


變數m就會轉成數字的月份了。這樣是不是更有簡約的美?

常用jQuery Ajax寫法

這是我常用的ajax操作方式,get()去讀取某頁資料(當然你也用.POST方式..):

  $.get("func_page/service.aspx?func=1" ,function(rs) {
    $("#worksheet").html(show_WorkerBar(rs));
  });


我不用json的模式去讀取資料,而是自訂資料格式,簡化資料傳輸的量,實際上在func_page/service.aspx上看到的就只有這些純粹的資料。以下列為例我分別用@與|區分,這部分可以再SQL內用Procedure,或在service.aspx內去組成,看到的就是如下所示。

馬力歐^14^5^0^0^0^@張曉明 ^15^13^0^0^0^|1|0|2|0|2|1415-1525|195|200902120001|2|18995632|張|F^@張惠妹 ^9^3^0^0^0^@帶小華^8^0^0^0^0^@丹尼^10^4^0^0^0^@杰克^11^0^0^0^0^@瑪莉王 ^12^0^0^0^0^@王筱華^13^0^0^0^0^@

讀取上面的資料後在逐一解析並套上HTML標籤阻成你要的網頁。

function show_WorkerBar(rs) {
  var arr1 = rs.split("@");
  var ss = "";
  for (var i = 0; i < arr1.length - 1; i++) {
   var arr2 = arr1[i].split("^");

   if (arr2[0] != "") {
    ss += "<div class=\"emp\">";
    ss += "<div class=\"wkhead\" ";
    ss += "onclick=\"fn_EditWkSec('" + arr2[0] + "','" + arr2[1] + "')\">" + arr2[0];
    ss += "<br /><span class='wk00'>" + arr2[1] + "</span>";
    ss += "<span class='wk03'> " + arr2[4] + " </span>";
    ss += "/<span class='wk03'> " + arr2[2] + " </span>";
    ss += "</div>";
   
   }....
return ss; //最後的ss就是我們要的

常用jQuery用法解說

1.所有段落中加入class屬性:
$(function() {
$('p').each(function(index) {
var a= $(this).attr('class');
$(this).attr('class', a+ ' inhabitants');
});
});


2.針對div元素中的chapter class元素,內href屬性內含有wikipedia的所有鏈結標籤(A),做什麼動作?
  • 均加上屬性rel、id、title。
  • id透過.each()依序累計。
  • $(this)等於$thisLink變數,減少$()使用次數可增加效能。


$(function() {
$('div.chapter a[@href*=wikipedia]').each(function(index) {
var $thisLink = $(this);
$(this).attr({
'rel': 'external',
'id': 'wikilink-' + index,
'title': 'learn more about ' + $thisLink.text() + ' at Wikipedia'
});
});
});

3.文章的<p>最後面增加" BACK-TO-TOP LINKS"超連結

$(function() {
$('').prependTo('body');
$('back to top').insertAfter('div.chapter p:gt(2)');
});


4. 若要複製文章中的某一段,可用clone()。
$('div.chapter p:eq(2)').clone(); //不只複製該元素,連後代的元素都會複製。
得到 <p class="article">今天是好天氣</p>

$('div.chapter p:eq(2)').clone(flase); //只複製該元素標籤。
得到 <p class="article"></p>

5.DOM操作方法歸納
  • .append() //元素中插入新元素
  • .appentTo()
  • .prepend()
  • .prependTo()
  • .after() //元素相鄰位置插入新元素
  • .insertAfter()
  • .before()
  • .insertBefore()
  • .wrap() //元素外套上新元素
  • .html() //用新元素或文字替換每個元素
  • .text()
  • .empty() //移除每個符合的元素
  • .remove() //移除但不刪除元素及其後代

jQuery Ajax IE無法正常運作?

今天公司要求說要做到類似GMAIL會自動更新畫面的功能,jQuery Ajax應用在FireFox通常都沒啥問題,但很多客戶仍然還是多數使用IE,今天就花點時間研究為何IE不能正常運作。

這篇http://stackoverflow.com/questions/425854/jquery-ajax-request-failing-in-ie有講怎樣解決問題,主要原因是IE的Cache預設是開啟的,需要隔一段時間才會遞出請求,而上述的作法其實也就是讓request的URL每次都不同,在變數內塞個時間參數。

var d = new Date()
$
.ajax({
url
:"{{SITE_URL}}/service.ashx?_="+d.getTime(),
...Snip...

但經我測試後還是沒效果,.因為它是一天更新一次,如果要做到類似GMAIL即時後端抓取資料的效果,就要改成....
var d = new Date()
$
.ajax({
url
:"{{SITE_URL}}/service.ashx?_="+d.toTimeString(),
...Snip...

每秒鐘就給它更新一次,這樣雖會正常顯示,但會把USER端的cache塞爆了的問題。

正確的作法是要關上IE的cache,我們可以在service.ashx 內寫上


Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Write("ajax content test...");
Response.End();


這樣就算是IE6.0也會正常更新畫面了。

JQuery網站應用

現在越來越多網站秀圖的效果都使用ajax技術做出類似Flash才會出現的效果,有沒有使用到JQuery的技術,其實我並沒深入了解,不過我確定下列是個很好的實作範例,以JQuery的Plugin一定可以做出來。

這個網站是最近熱門的電視影集:魔鬼終結者-沙拉康納戰記 的官方網站,做的效果相當好,可以推薦給大家參考..

[jQuery Plugin 介紹] 最受歡迎的插件範例介紹

這邊是從JQuery的Plugin整理出來,搭配原來網站就有的DEMO範例呈現出來,方便將來自己要使用的時候可以知道有哪些可使用。

labo
http://www.guistalk.com/labo/
類似檔案總管,只是多了點動畫效果。


Dylans Autocomplete
比較接近我要的功能,但是感覺不夠花俏。
http://www.dyve.net/jquery/?autocomplete


Linkselect jQuery Plug-in
http://www.givainc.com/labs/linkselect_example.htm#example10
可高度客製化外觀與功能的下拉選單,這類型的插件通常都可依照螢幕調整適合的大小,如果你的內容調整可改變大小,該元件的寬度會讓你失控。但這個插件不同的地方在於選項內容可以折行顯示,還有以下跟其他插件不同的特點:
  • 下拉選單可智慧的定位。
  • 可靠元件的右邊對齊顯示。
  • 支援鍵盤功能。
  • 豐富的API(更新資料、取代選項、失效等功能)。
  • onchage、oninit、onformat等回傳(callback)特點。
  • 支援TAB。



jqPuzzle

用張圖片就可以製作拼圖遊戲。
http://www.dyve.net/jquery/?autocomplete



jQuery Horizon Menu Plugin
http://www.code.irontec.com/JQuery/horizonmenu/?pag=1



jQuery Google Charts

絕對比Google API charts更好的圖表套件
http://www.maxb.net/scripts/jgcharts/include/demo/#5



Geogoer vChecks - easy checkboxes plugin

時髦Stlye設計你的Checkbox
http://www.vaziuojam.lt/js/geogoer/jquery_plugins/vchecks/index.html


liScroll a news ticker made easy
應用unorder list,做出從左至右流出的新聞顯示方式,滑鼠移過去就會停止。
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html


Image Captions
增加標題到圖片上.標題寫在alt標籤上或指定的HTML元件。
http://homegel.co.za/imagecaption/


jTruncate - Easy Text Truncation for jQuery

簡單輕量化的插件,對於無法全部顯示的TIP或是文字框都很有用,可客製化跟易用。
http://blog.jeremymartin.name/2008/02/jtruncate-in-action.html


FadeImageOptimal
照片會變暗換成另外一張,這些照片起先會先一次下載完畢再顯示。

http://www.nicolaferrari.name/progetti_nicola_ferrari_OptimalFadeImage.php

jQuery controlled Dependent or Cascading Select List 2
父子相依的選單,當第一個選單選擇後會決定第二的選單。

http://www.ajaxray.com/Examples/depend.html

我的Blogger標籤雲設計 - jQuery應用 - Tag Cloud

Blogger內預設的標籤通常都是如下表示:括號內的數字就代表文章的篇數,雖很清楚但覺得很凌亂很醜...
標籤雲(Tag Cloud)就是把括號跟數字都拿掉,將數字化為標籤字型的大小,如下圖所示,你可以看到字體越大的代表文章越多,是不是既直覺又美觀?


因為正在學習使用jQuery,於是就把這個當題目來練習了一下,你可以在Blogger的版面配置上開個JavaScript組件,將下面的程式碼複製貼上使用,雖不是太炫不過也有七分像了,請大家多指教。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("a ~ span").map(function(){
var w=$(this).html().replace("(","").replace(")","");
$(this).prev().css("font-size",12+parseInt(w)*1.5+"px");
$(this).html("");
});
});
</script>


P.S. 只適用於Blogger喔!! 其他部落格不支援....

微軟也搶著支援jQuery?

我程式的入門是從微軟的產品開始的,但絕對不會永遠是微軟的信徒,我開始找各種網路技術混搭使用,jQuery就是個例子。自從無意間發現了jQuery這輕量級的JavaScript程式庫之後,在我的程式中應用的程度越來越深。令我印象深刻的是,靠軟體賺錢的微軟也要將JQuery納入自己的產品版圖中,詳見微軟產品主管的BLOG

不過依照微軟過去的習慣,當他們要納入別人產品時一定會"改進"人家的東西,希望改的更好,突顯微軟的價值。但這次納入jQuery卻並沒打算這樣做,因 為他們覺得本身產品已經夠好了,再改另一套恐怕沒人要使用;當然,jQuery也沒打算為了微軟去改變任何東西。除了微軟外,Nokia也將在手機應用程 式開發上支援jQuery,看來好東西大家都搶著用了。

jQuery為什麼這麼好?
  • 程式碼小,大約十幾KB..
  • 跨瀏覽器支援(IE、FF、Opera、Safari)...
  • 網路上有很多精采的Plugins可使用
  • 好學-不需要買書,入門教材網路都在這.
  • 開發速度快,幾行程式碼就可做出驚人的效果
  • 免費開源程式..
  • 重量級廠商幫你背書;Google、Mozilla、DELL、digg、NBC、CBS、WordPress ...
jQuer的功能侷限於你的想像力,像我昨天就花十分鐘將我的部落格標籤雲(Tags)用jQuery去改寫成功。

我有個結論,要用.NET開發好的網頁應用程式有兩端東西很重要:Server端-要學好Store Procedure,加快你資料庫處理的速度。Client端-學好jQuery:讓你介面更靈活、更省整體資源。

好用的JQquey UI 組件,幫助你擺脫微軟的陰影..

如果你不想使用ASP.NET內的月曆伺服器控制項,其實Jquery UI有很不錯用的各式工具,且有附詳細的使用程式碼與DEMO範例可參考。

1.當然首先你一定要先有安裝Jquery..

2.再到Jquery UI 內去DownLoad你需要的組件


3.選擇你需要的組件,如果每個控制項都需要可在最下面勾選全選。

4.以最常使用的月曆功能來說,提供簡單的範例可供你試玩,可了解是否符合自己的需求,旁邊View Source可供你參考程式碼,一切只有貼心兩個字可形容的了。

盡量不要依賴微軟的東西,你的路會變個更寬廣...

PS:意外插曲...該月曆可把各國國慶日用國旗標示出來,結果察看了一下我們的雙十國慶竟然不存在,反而看到老共的國旗 ><....

JQuery換新版面了..!!

我愛上了JQuery...
過去前端的效果我都很愛在後端完成,其實這是很耗資源的,也不事正統的做法,但又因為Javascript 有瀏覽器不統一的問題,加上要在DOM中尋找要的元件很困難,...不然網頁效果與效能的提升都要靠它來實踐.現在有了JQuery連寫Ajax變的簡單了,.

學習JQuery不見得需要買書看,網路上的說明就夠清楚的了..所以如果有些許Javascript與CSS概念的人會覺得事半功倍,如果不是很熟悉的人 我也都參考這些教學網站 , 很多過去想不到的效果都可以輕易的做出來喔...真的是 wirte less do more..

最近發現網站版面更換了....且也很屌的宣告有哪些大站也用JQuery.. 如Google、DELL、NBC、Digg..所以大家不要遲疑了請用力推廣吧...