【文章內(nèi)容簡(jiǎn)介】 （a）中可以看到，當(dāng)用戶(hù)尚未點(diǎn)擊輸入框時(shí)，恢復(fù)按鈕，表情按鈕等均未顯示，而是通過(guò)預(yù)先顯示“添加回復(fù)”字樣對(duì)用戶(hù)進(jìn)行提示。當(dāng)用戶(hù)點(diǎn)擊輸入框時(shí)，觸發(fā)textarea的focus事件，調(diào)用函數(shù)。核心代碼見(jiàn)附A1。當(dāng)focus事件被觸發(fā)后，用next（），用show（）函數(shù)將其顯示，這樣，回復(fù)面板就徹底展開(kāi)了。當(dāng)用戶(hù)點(diǎn)擊回復(fù)框時(shí)，如果當(dāng)前textlimit的值為默認(rèn)title值，則自動(dòng)清空。如果textlimit失去焦點(diǎn)并且其中沒(méi)有內(nèi)容，則用類(lèi)似的方法調(diào)用blur（）函數(shù)收起回復(fù)面板。系統(tǒng)對(duì)用戶(hù)輸入的內(nèi)容限制在140字以?xún)?nèi)，用戶(hù)輸入時(shí)，系統(tǒng)自動(dòng)顯示當(dāng)前輸入字?jǐn)?shù)。這部分的核心代碼見(jiàn)附A2。每次textlimit的keyup事件被觸發(fā)，則調(diào)用maxLimit函數(shù)。該函數(shù)將輸入框中的字?jǐn)?shù)顯示在textlimit的下一個(gè)同輩節(jié)點(diǎn)的標(biāo)簽為span的子節(jié)點(diǎn)中。用戶(hù)點(diǎn)擊表情按鈕，onclick事件被觸發(fā)，調(diào)用show（）函數(shù)，并定義其樣式，繪制出表情面板，再用append函數(shù)將其追加至html文檔中，與此同時(shí)用相關(guān)函數(shù)控制表情面板的顯示位置。單個(gè)表情圖片的顯示，利用for循環(huán)將指定文件夾中的表情樣式添加至表情面板中。值得一提的是，需要用replace函數(shù)將html頁(yè)面的表情代碼替換為圖片，以方便顯示在網(wǎng)頁(yè)上。function convertImg(val){return (/\[@/g, img src=+faceUrl+).replace(/\@]/g, .gif /)。}最后點(diǎn)擊提交按鈕觸發(fā)submit事件，將textlimit中的內(nèi)容通過(guò)DOM操作，顯示在頁(yè)面上。詳細(xì)代碼參見(jiàn)附A3。 功能模塊的界面設(shè)計(jì)評(píng)價(jià)系統(tǒng)對(duì)用戶(hù)的輸入控制在140字以?xún)?nèi)，spantextCount的設(shè)計(jì)對(duì)用戶(hù)進(jìn)行實(shí)時(shí)的提醒，顯示剩余字?jǐn)?shù)，方便用戶(hù)控制輸入，和UI設(shè)計(jì)原則的suitability for the task和Selfdescriptiveness的內(nèi)涵符合。 注冊(cè)驗(yàn)證用戶(hù)注冊(cè)時(shí)，需要填寫(xiě)注冊(cè)郵箱，真實(shí)姓名，出生年月等信息，這些數(shù)據(jù)屬于必填項(xiàng)目，并需要用戶(hù)進(jìn)行合法輸入。系統(tǒng)實(shí)現(xiàn)用戶(hù)輸入時(shí)的提示和輸入后的驗(yàn)證。 注冊(cè)驗(yàn)證實(shí)現(xiàn)思路當(dāng)用于鼠標(biāo)移動(dòng)到每個(gè)輸入框時(shí)，通過(guò)編寫(xiě)hover（handlerIn，handlerOut）事件的兩個(gè)參數(shù)，即鼠標(biāo)移動(dòng)到控件，和移出控件時(shí)引發(fā)的函數(shù)，顯示輸入提示。用戶(hù)鼠標(biāo)點(diǎn)擊輸入框外的區(qū)域時(shí)，blur事件被觸發(fā)，調(diào)用相關(guān)函數(shù)，判斷輸入框中的內(nèi)容是否合法，這里可以采用正則表達(dá)式來(lái)判斷，如果不合法，通過(guò)改變輸入框的樣式進(jìn)行提示。 注冊(cè)驗(yàn)證具體實(shí)現(xiàn)在頁(yè)面元素input中添加兩個(gè)屬性reg=^\w+([+.]\w+)*@\w+([.]\w+)*\.\w+([.]\w+)*$ tip=郵箱地址，如wangking717@，reg的值為正則表達(dá)式，用來(lái)表示該輸入框中的合法輸入，tip屬性的值為輸入提示的內(nèi)容，這兩個(gè)參數(shù)在js文件中將被調(diào)用。詳細(xì)代碼如附A4所示。 用戶(hù)注冊(cè)順序圖通過(guò)定位鼠標(biāo)當(dāng)前的X軸Y軸位置，得到提示框pvtip的top和left值，用append（）函數(shù)將提示框追加到頁(yè)面相應(yīng)位置。bgiframe（）是jQuery一款插件中提供的函數(shù)，用來(lái)解決 IE6 zindex 的問(wèn)題，如果網(wǎng)頁(yè)上有浮動(dòng)區(qū)塊和下拉選單重疊時(shí)，在IE6會(huì)看到下拉選框總是把浮動(dòng)區(qū)塊覆蓋住，無(wú)論怎么調(diào)整 zindex 都是沒(méi)用的，而用 bgiframe 就可以輕松解決這個(gè)問(wèn)題。這樣，無(wú)論在那種瀏覽器下，提示總會(huì)顯示在最頂層。HandlerOut觸發(fā)的函數(shù)較為簡(jiǎn)單，將pvtip用removeClass函數(shù)去掉即可。 注冊(cè)驗(yàn)證功能模塊圖示用戶(hù)的鼠標(biāo)在輸入框之外的區(qū)域點(diǎn)擊時(shí)，輸入框的blur事件被觸發(fā)，調(diào)用validate函數(shù)，具體代碼見(jiàn)附A4。RegExp是JS的正則表達(dá)式對(duì)象，有pattern和attribute兩個(gè)參數(shù)，參數(shù)pattern是一個(gè)字符串，指定了正則表達(dá)式的模式或其他正則表達(dá)式。參數(shù)attributes是一個(gè)可選的字符串，包含屬性 g、i 和 m，分別用于指定全局匹配、區(qū)分大小寫(xiě)的匹配和多行匹配。new一個(gè)正則表達(dá)式對(duì)象，傳到pattern參數(shù)中的是輸入框中定義的reg屬性的值，objVallue則是用戶(hù)輸入的內(nèi)容，通過(guò)test（）函數(shù)判斷二者是否匹配，以此決定change_error_style（obj,msg,action_type）和change_tip（obj,action_type）的action_type參數(shù)的值。這兩個(gè)函數(shù)通過(guò)判斷action_type的值對(duì)obj進(jìn)行屬性和類(lèi)的設(shè)定和刪除，達(dá)到顯示不同效果的目的。在管理員子系統(tǒng)中，添加管理員時(shí)系統(tǒng)會(huì)檢測(cè)新加的管理員的用戶(hù)名是否已被占用。新加管理員的form表單的action定義為addAdminAction，通過(guò)檢測(cè)數(shù)據(jù)庫(kù)，判斷用戶(hù)輸入是否已經(jīng)存在于數(shù)據(jù)庫(kù)中，如果不存在，則將新加的用戶(hù)添加到數(shù)據(jù)庫(kù)中，實(shí)現(xiàn)了和后臺(tái)的交互。： 添加管理員在注冊(cè)功能模塊中，根據(jù)鼠標(biāo)停留的區(qū)域給用戶(hù)響應(yīng)的提示，用戶(hù)輸入錯(cuò)誤時(shí)，系統(tǒng)給出紅色輸入框的提示，用戶(hù)只需再次輸入即可，與error tolerance原則相符合。同時(shí)，也避免了系統(tǒng)因?yàn)椴缓戏ǖ妮斎朐斐傻牟豢深A(yù)期的錯(cuò)誤，降低了系統(tǒng)處理出錯(cuò)信息的成本。 日歷控件系統(tǒng)中有多處地方需要用戶(hù)輸入日期，日期的格式多種多樣，為了避免因?yàn)楦袷交蛘咂渌`輸而對(duì)后臺(tái)處理數(shù)據(jù)所造成影響，本系統(tǒng)提供日歷控件，用戶(hù)只用點(diǎn)擊日期，輸入框中即自動(dòng)填進(jìn)標(biāo)準(zhǔn)格式的內(nèi)容。本系統(tǒng)采用jQuery UI的datepicker控件，方便快捷地實(shí)現(xiàn)了該功能。 jQuery UI介紹jQuery UI 是一套 jQuery 的頁(yè)面 UI 插件，包含很多種常用的頁(yè)面空間，例如 Tabs（如本站首頁(yè)右上角部分） 、拉簾效果（本站首頁(yè)左上角）、對(duì)話(huà)框、拖放效果、日期選擇、顏色選擇、數(shù)據(jù)排序、窗體大小調(diào)整等等非常多的內(nèi)容。這套插件具有這樣一些特點(diǎn)：1. 簡(jiǎn)單易用，繼承jQuery簡(jiǎn)易的特性，提供高度抽象接口；2. 兼容各主流桌面瀏覽器，包括IE 6+、Firefox 2+、Safari 3+、Opera9+、Chrome 1+。3. 組件間相對(duì)獨(dú)立，可按需加載，避免浪費(fèi)帶寬拖慢網(wǎng)頁(yè)打開(kāi)速度。4. 提供近 20 種預(yù)設(shè)主題，并可自定義多達(dá) 60 項(xiàng)可配置樣式規(guī)則，提供 24 種背景紋理選擇。使用時(shí)，首先在網(wǎng)頁(yè)中加載開(kāi)發(fā)包中 jQuery 核心庫(kù)文件，再按需加載 、 及各組件代碼文件，如設(shè)置可視組件外觀(guān)需同時(shí)加載 CSS 主題文件。 日歷控件具體使用jQuery UI中這一控件有多種樣式，適應(yīng)不同需求。例如，年份月份的選擇有默認(rèn)的逐月選擇模式，適合選擇靠近當(dāng)前日期的時(shí)間，還提供了以下拉方式選擇年份和月份的模式，方便用戶(hù)選擇較大范圍內(nèi)的日期，本系統(tǒng)視實(shí)際需求使用不同樣式。注冊(cè)頁(yè)面中，由于用戶(hù)需要選擇出生日期，一般距離當(dāng)前日期時(shí)間較久，應(yīng)采用相應(yīng)的模式，：在頁(yè)面的header頭部中，。另外，為了使日歷控件的風(fēng)格和網(wǎng)站整體風(fēng)格一致，還需引用主題包，在開(kāi)發(fā)包中加入redmond這一主題包，再引用其css即可：link rel=stylesheet href=./themes/redmond//使用時(shí)，將生日的輸入框id設(shè)為datepicker，并在header添加如下代碼，即可顯示下拉模式的日歷控件：$(function() { $( datepicker ).datepicker({ changeMonth: true, changeYear: true })。 }) 登陸頁(yè)面日歷控件效果默認(rèn)的datepicker控件可供選擇的年份范圍是10年，在實(shí)際運(yùn)用中不能滿(mǎn)足要求。在該文件用來(lái)顯示年月下拉框的_generateMonthYearHeader函數(shù)中，將10相應(yīng)地改為50，下拉框中可供選擇的年份即從1961年開(kāi)始，基本可以滿(mǎn)足系統(tǒng)目標(biāo)群體的需求。用戶(hù)發(fā)起活動(dòng)的時(shí)候，需要填寫(xiě)活動(dòng)開(kāi)始時(shí)間和結(jié)束時(shí)間，供報(bào)名的同學(xué)參考，這需要避免用戶(hù)誤填導(dǎo)致的錯(cuò)誤，如結(jié)束時(shí)間早于開(kāi)始時(shí)間，使用datepicker控件可以很好地避免這一問(wèn)題。： 活動(dòng)發(fā)起頁(yè)面的日歷控件效果控件對(duì)當(dāng)前日期后的三個(gè)月給出了展示，方便用戶(hù)查看，用戶(hù)填寫(xiě)了開(kāi)始時(shí)間后，選擇結(jié)束時(shí)間時(shí)，開(kāi)始時(shí)間之前的內(nèi)容自動(dòng)設(shè)為不可選狀態(tài)，有效避免了不合法輸入。頁(yè)面使用該控件的方法與注冊(cè)頁(yè)面類(lèi)似，將開(kāi)始時(shí)間輸入框的id設(shè)為from，結(jié)束時(shí)間的id設(shè)為to，并在頭部文件中加入設(shè)置顯示月份個(gè)數(shù)等的Jquery函數(shù)即可。 功能模塊的界面設(shè)計(jì)評(píng)價(jià)日歷控件避免了用戶(hù)進(jìn)行錯(cuò)誤輸入，并且將本來(lái)依靠鍵盤(pán)輸入的內(nèi)容轉(zhuǎn)換成可視化的鼠標(biāo)點(diǎn)擊，更易于使用，并且方便系統(tǒng)數(shù)據(jù)庫(kù)錄入數(shù)據(jù)采取統(tǒng)一的格式。時(shí)間段選擇的控件可以清晰方便地查看將來(lái)日期，這個(gè)設(shè)計(jì)靈感來(lái)源于現(xiàn)實(shí)生活，用戶(hù)在制定計(jì)劃時(shí)經(jīng)常需要查看日歷，使用系統(tǒng)內(nèi)自帶的日歷無(wú)疑比使用系統(tǒng)外如桌面日歷方便許多，在實(shí)際使用中具有較大價(jià)值。 照片展示特效隨著前端技術(shù)的快速發(fā)展，網(wǎng)站的風(fēng)格漸漸多樣化，特別是針對(duì)年輕人的網(wǎng)站，更是越來(lái)越追求視覺(jué)上的美感。jQuery的特點(diǎn)之一就是它提供了豐富的插件，可實(shí)現(xiàn)多種功能，如表單驗(yàn)證、tab導(dǎo)航、拖放效果、表格排序、DataGrid，樹(shù)形菜單、圖像特效以及ajax上傳等，甚至一些許多類(lèi)似flash的效果都可以實(shí)現(xiàn)，又避免了flash需要長(zhǎng)時(shí)間載入的問(wèn)題。在SNS社區(qū)中，頭像是展示一個(gè)用戶(hù)個(gè)人風(fēng)采最直接的手段，用戶(hù)在社區(qū)中活動(dòng)時(shí)，也常常通過(guò)頭像來(lái)辨認(rèn)好友。為了吸引新用戶(hù)注冊(cè)，本系統(tǒng)在登陸頁(yè)面隨機(jī)選取了若干用戶(hù)的頭像，用照片墻的形式展示，這樣，尚未注冊(cè)的用戶(hù)也能領(lǐng)略到系統(tǒng)內(nèi)用戶(hù)的風(fēng)采，增強(qiáng)了注冊(cè)的欲望。照片墻采用jQuery插件來(lái)實(shí)現(xiàn)。(a)(b) 登陸頁(yè)面照片墻展示當(dāng)鼠標(biāo)移動(dòng)到照片區(qū)域時(shí)，圖片放大，并突出顯示，下方提供用戶(hù)名字。照片墻右邊的圖片是一幅空白頭像，等候新用戶(hù)注冊(cè)，鼠標(biāo)移動(dòng)到上面以后，提示“馬上注冊(cè)”，點(diǎn)擊即進(jìn)入注冊(cè)頁(yè)面，如圖（b）所示。，實(shí)現(xiàn)這一效果需要對(duì)插件中的代碼做一些修改，以適合本頁(yè)面的大小和樣式。所有照片被放在divcontainer中，用ul元素以列表形式展現(xiàn)，通過(guò)設(shè)置ul中l(wèi)i元素的float屬性，使其并排排列，通過(guò)定義container和每張圖片的尺寸，決定每行顯示的圖片數(shù)量。對(duì)尺寸做修改后，每行顯示6張圖片，每張大小為60*60像素。css文件中對(duì)圖片定義了一個(gè)hover類(lèi)，決定鼠標(biāo)懸停時(shí)的樣式，js代碼中，采用addClass（）函數(shù)將hover類(lèi)添加到圖片中，圖片即放大。照片下的用戶(hù)名顯示效果通過(guò)js中的prepend（）函數(shù)將spantitle添加到圖片下方，這一元素的樣式在css文件中已經(jīng)定義。由于對(duì)圖片大小進(jìn)行了修改，對(duì)圖片的動(dòng)畫(huà)效果函數(shù)animate（params, [duration], [easing], [callback])）中的相應(yīng)參數(shù)也應(yīng)做修改。params這一參數(shù)為一組包含作為動(dòng)畫(huà)屬性和終值的樣式屬性和及其值的集合，如top，width等css常見(jiàn)屬性。在本例中，對(duì)照片滑動(dòng)效果起作用的參數(shù)是marginTop，marginLeft，top，left，width，height和padding七個(gè)屬性，通過(guò)設(shè)定合適的值，實(shí)現(xiàn)了較為理想的效果?！癥OU”圖片的實(shí)現(xiàn)原理和其他照片類(lèi)似，然而需要注意的是，緊鄰的登陸信息輸入模塊的float值設(shè)定為left，會(huì)隨著“YOU”圖片的伸縮而浮動(dòng)，這顯然不是我們預(yù)期的效果，解決方法是將“YOU”