Time of Update: 2013-10-17
寫在前面的話:國內對前端的研究在某些方面也不遜色於國外,這篇文章雖然看不太懂,但我很欣賞這種深入研究的精神!反科裡化的話題來自javascript之父Brendan Eich去年的一段twitter.
Time of Update: 2013-10-17
寫easing 函式用到requestAnimationFrame函數,之前瞭解過一些,但總覺得又不是很瞭解,所以翻譯一篇老外的文章,以便學習分享。 requestAnimationFrame是什嗎?
Time of Update: 2013-10-17
複製代碼 代碼如下: <input type=button value=重新整理 onclick="window.location.reload()"> <input type=button value=前進 onclick="window.history.go(1)"> <input type=button value=後退 onclick="window.history.go(-1)"> <input type=button value=前進
Time of Update: 2013-10-17
項目中需要FusionCharts圖表顯示雙Y軸,好像FCF_MSLine.swf不可以這樣,只能顯示一個Y軸,多條線, 找了一下,用MSCombiDY2D.swf可以實現,產生圖如下: 兩個圖表的資料是一樣的,設定有一此不同而己 對應的XML文本如下: 複製代碼 代碼如下: <chart palette='2' caption='圖表' rotateNames='0' showValues='0' divLineDecimalPrecision='1'
Time of Update: 2013-10-17
最近要在項目中使用Knockoutjs,因此今天就首先研究了一下Knockoutjs的環境搭建,並進行了一個簡單的測試。 首先要到http://knockoutjs.com/index.html下載最新版本的Knockoutjs,筆者這裡下載的是knockout-2.2.0.js。然後建立一個.html檔案,在html文檔中加入以下的語句匯入此js: <script type="text/javascript" src="knockout-2.2.0.js"></script&
Time of Update: 2013-10-17
在用戶端儲存資料時,我們一般都用cookie(不敏感性資料),但是在用戶端越來越富的今天,cookie可儲存的量(每個域最大4k)實在是小。 在HTML5中有localStorage可使用,但是這就拋棄了IE8-。為了相容,我們可以翻出IE很久以前就搞的一個儲存方法: 給一個元素添加一個特殊的樣式url(#default#userData),之後就可以通過setAttribute和getAttribute來存取索引值對形式的資料了。
Time of Update: 2013-10-17
由於主流瀏覽器對select元素渲染不同,所以在每種瀏覽器下顯示也不一樣,最主要的是預設情況下UI太粗糙,即使通過css加以美化也不能達到很美觀的效果。這對於我們這些專註於UX的前端開發人員是無法容忍的。於是在項目不太忙的時候,就計劃寫一個類比的select控制項出來。接下來就把實現的細節、遇到的問題以及如何使用和大家分享一下。 1. 實現細節 init: function(context) { //擷取指定上下文所有select元素 var elems =
Time of Update: 2013-10-17
今天檢查自己用JQuery+AJAX+PHP做的網站後台登入檢測,發現登陸成功後執行頁面跳轉函數這段JavaScript(JS)代碼特效在IE和Google瀏覽器Chrome下都可以很好地執行,相容性還不錯。結果到了Firefox(FireFox)瀏覽器下setTimeout這個JS內建函數不執行了,無效了,也沒報錯!開啟FireBUG指望它能檢測出JS的錯誤,結果沒用...Javascript(JS)指令碼代碼在各瀏覽器下的相容是一個很頭疼的問題,經過一番調試和搜尋,終於解決了setTimeo
Time of Update: 2013-10-17
1 jQuery UI 2 為我所用 2.1 Tabs 2.2 Accordion 2.2.1 使用基本的Accordion 2.2.2 實現開啟多個標籤 2.2.3 Accordion的嵌套 3 給外掛程式應用主題——Theme Roller 3.1 更改配色 3.2 更改表徵圖 4 相關串連 jQuery UI 有時你僅僅是為了實現一個漸層的動畫效果而不得不把javascrip
Time of Update: 2013-10-17
今天要分享的是基於JQuery實現的多標籤的切換,JQuery就不用過多介紹了,網上一搜一大堆資料,當然這樣的小樣本也有很多,這裡只是發表一些自己的想法。 下面是本次樣本所使用的HTML頁面: 複製代碼 代碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
Time of Update: 2013-10-17
請看如下代碼: 複製代碼 代碼如下: var arr = []; var cc = function(){alert('xx');}; for(var i = 0; i<2; i++){ arr[i] = function(){alert('yy');} arr[i+10] = cc; } console.group('開始') console.group('1') console.info( arr[0] == arr[1]); console.info( arr[0] === arr[
Time of Update: 2013-10-17
複製代碼 代碼如下: function setPage(opt){ if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum){return false}; var allPageNum = opt.allPageNum; //總的頁數 var showPageNum = opt.showPageNum; //顯示的頁數 var curpageNum =
Time of Update: 2013-10-17
調用介面: 複製代碼 代碼如下: /** * @param elem {HTMLElement} 執行動畫的HTML元素 * @param params {JSON} 動畫執行過過程中需要修改的HTML 屬性 * @param duration {Number} 可選,動畫執行時間,單位毫秒 * @param easing {String} 可選,動畫執行的方式,緩入easeIn、緩出easeOut * @param callback {Function} 可選,動畫執行完成時的回呼函數 * @
Time of Update: 2013-10-17
執行個體JavaScript代碼 下面的這段代碼中,我們通過select元素的name屬性來設定具體要訪問style的哪個屬性(本例中為背景色),這樣,這個函數就可以用來設定不同的CSS屬性了。 複製代碼 代碼如下: <script type="text/javascript"> var d = document.getElementById("d"); function setProperty(){ var set =
Time of Update: 2013-10-17
javascript跨域有兩種情況: 1、基於同一父域的子域之間,如:a.c.com和b.c.com 2、基於不同的父域之間,如:www.a.com和www.b.com 3、連接埠的不同,如:www.a.com:8080和www.a.com:8088 4、協議不同,如:http://www.a.com和https://www.a.com 對於情況3和4,需要通過後台proxy來解決,具體方式如下: a、在發起方的域下建立proxy程式 b、發起方的js調用本域下的proxy程式
Time of Update: 2013-10-17
測試代碼: 複製代碼 代碼如下: <table id="test"> </table> <script> var oTable=document.getElementById("test"); oTable.innerHTML="<tr><td>innerHTML</td></tr>"; </script> 上述代碼在IE6-9中無效,直接報錯: IE9:Invalid target
Time of Update: 2013-10-17
排版是在網頁設計當中的一個重要的元素,實現一個高層次的排版風格可以讓你的網頁設計看起來更令人歎為觀止,當你看到一些非同尋常的排版樣式,你很好奇這些絢麗的色彩文字搭配效果是如何?的,往往我們第一印象是使用CSS實現的,可是對於自己來說感到又有一定的難度,如今的瀑布流效果,大背景縮圖效果,我們其中只關注了圖片絢麗的布局,其實還有一個細節就是文字色綵排版的實現,這個其實是主要的,有一些專門用於這些效果的jQuery外掛程式,你可以實現卓越的排版設計在您的網站上。我們都知道,在傳統的排版當中使用DIV+
Time of Update: 2013-10-17
檢測瀏覽器的方式 1、對象特徵檢測法:判斷瀏覽器能力的通用方法。如果更關注瀏覽器的能力而不在乎它的實際身份,就可以使用這種檢測方法。常見的原生Ajax寫法中就用這種方法來建立XMLHttpRequest: 複製代碼 代碼如下: IXHR: function(){ if(window.ActiveXObject){ XHR=new ActiveXObject('Microsoft.XMLHTTP'); }else if(window.XMLHttpRequest){ XHR=new
Time of Update: 2013-10-17
現在也有很多JS動態載入的架構,比如In.js。但是這種並不是我想要的編寫方式,我來說說我的想法。 先來一段java代碼 複製代碼 代碼如下: import Biz.User; User u = new User(); u.show(); 按流程就是導包、執行個體化、調用。 JS是做不了導包的,或者說代碼意義上的導包,一般只是在頁面上進行script標籤的引入。 那麼 先假設需要寫成這樣 複製代碼 代碼如下: Using("User"); var u = new User(); u.show(
Time of Update: 2013-10-17
當你想在有限的頁面空間內展示多個內容片段的時候,手風琴(Accordion)效果就顯得非常有用,它可以協助你以對使用者非常友好的方式實現多個內容片段之間的切換。藉助流行的 jQuery 架構,只需很少的代碼就可以實現精美的手風琴效果,協助你的網站吸引更多使用者的眼球。 Elegant Accordion with jQuery and CSS3首先推薦的這款外掛程式是基於 jQuery 和 CSS3 實現的優雅的滑鼠移至上方手風琴效果。製作教程 線上示範 Vertical