基于jQuery框架的醫(yī)院HIS系統(tǒng)頁(yè)面前端特效設(shè)計(jì)

何光旭，康春華

（1.河南省焦作市人民醫(yī)院 河南 焦作 454002；2.焦作市社會(huì)醫(yī)療保險(xiǎn)中心 河南 焦作 454002）

隨著現(xiàn)代計(jì)算機(jī)技術(shù)的不斷發(fā)展，頁(yè)面技術(shù)的開發(fā)也開始逐步的成熟，各類新技術(shù)也在不斷的開發(fā)，由此豐富了當(dāng)前各類網(wǎng)頁(yè)開發(fā)形式，使得當(dāng)前的網(wǎng)頁(yè)開發(fā)開始由原來(lái)的HTML模式逐步走向HTML+CSS+JavaScript等多種技術(shù)結(jié)合的一種新的形式，并使得jQuery成為JavaScript框架之中的一個(gè)非常有些的開發(fā)框架，實(shí)現(xiàn)了三者開發(fā)的分離。而jQuery也憑借其良好的視覺效果，及其良好的交互性，使得其成被廣大的開發(fā)人員所使用。而現(xiàn)代醫(yī)院HIS系統(tǒng)使用中人們對(duì)系統(tǒng)需要視覺效果更好，交互功能更強(qiáng)的前端頁(yè)面，本文利用改技術(shù)對(duì)前端頁(yè)面進(jìn)行了深入的開發(fā)。

1 jQuery技術(shù)簡(jiǎn)介

jQuery技術(shù)作為由美國(guó)開發(fā)的一個(gè)開源項(xiàng)目，其從一開始就吸引著大量的人加入到對(duì)其開發(fā)之中。而隨著該技術(shù)的發(fā)展，其已經(jīng)從原來(lái)的1.0版本，開始發(fā)展到2.1.1版本。作為一個(gè)輕量級(jí)的JS庫(kù)，其不僅可以有效的兼容CSS3，同時(shí)還可以兼容大量的瀏覽器，并讓用戶可更加方便的處理HTML等，實(shí)現(xiàn)頁(yè)面的動(dòng)態(tài)效果，并提高AJAX交互。該開發(fā)框架其大小僅為21k，但為開發(fā)者提供了大量的開發(fā)工具，包括鏈?zhǔn)秸Z(yǔ)法、CSS3-1選擇器、事件注冊(cè)和DOM操作等，如$（"[href^='/imgaes/']"）則為選擇器中選取以'/imgaes/'開頭的元素。

2 HIS系統(tǒng)需求分析

通過(guò)前期對(duì)HIS系統(tǒng)的調(diào)研分析，認(rèn)為HIS系統(tǒng)前端頁(yè)面的開發(fā)需要在頁(yè)面元素樣式、頁(yè)面布局設(shè)計(jì)等方面需要進(jìn)行大更為細(xì)致的設(shè)計(jì)。

2.1 頁(yè)面元素樣式

在對(duì)頁(yè)面元素的樣式的設(shè)計(jì)中，在系統(tǒng)的內(nèi)部通常都提供了大量的UI組件，從而讓開發(fā)者可通過(guò)簡(jiǎn)單代碼即可實(shí)現(xiàn)對(duì)這些組件的應(yīng)用。而這些組件中，其需要盡力滿足前端頁(yè)面設(shè)計(jì)的需求，并在開發(fā)前對(duì)其中需要的組件進(jìn)行分析，從而對(duì)其進(jìn)行修改，以此使得其更具備良好的擴(kuò)展性和通用性。

通過(guò)總結(jié)發(fā)現(xiàn)，在A醫(yī)院的HIS系統(tǒng)中，其表格元素需要進(jìn)行改進(jìn)。在網(wǎng)頁(yè)的設(shè)計(jì)當(dāng)中，表格通常作為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)與布局中最為常見的UI元素，通過(guò)表格，從而用于承載數(shù)據(jù)、圖片和表單等內(nèi)容，并讓其功能變得更加的清晰和具有條例，并基于用戶非常簡(jiǎn)單和明了的視覺沖擊。同時(shí)痛毆調(diào)查發(fā)現(xiàn)，在A醫(yī)院的HIS系統(tǒng)當(dāng)中，邊框、背景顏色等也需喲啊劑型重新的設(shè)計(jì)，以此增強(qiáng)表格當(dāng)中元素的美觀。

在表單元素方面，表單作為前后端相互交互的一個(gè)重要的界面，其包含著不同的按鈕和不同的數(shù)據(jù)。以A醫(yī)院HIS系統(tǒng)中醫(yī)師基本信息的管理模塊為例，在該模塊當(dāng)中，有大量的表格和數(shù)據(jù)需要處理，，并通常通過(guò)主從表的關(guān)系，將具有關(guān)聯(lián)的表格進(jìn)行展現(xiàn)，如圖1所示。

圖1 主從表的布局搭配顯示Fig.1 Shows the layoutof themain tablematch

在上述的數(shù)據(jù)展現(xiàn)中，其包含很多比較特殊的字段，這些字段則通過(guò)軟件的加工和處理，并通過(guò)代碼編程實(shí)現(xiàn)對(duì)其中數(shù)據(jù)的處理。但是通過(guò)這樣的方式其存在一個(gè)非常嚴(yán)重的問(wèn)題，那就是其中如果數(shù)據(jù)轉(zhuǎn)換的話，將給編程人員帶來(lái)大量代碼開發(fā)工作。同時(shí)在一些數(shù)據(jù)字段校驗(yàn)當(dāng)中也存在著很多的問(wèn)題，如校驗(yàn)不準(zhǔn)等，因此需要提高其數(shù)據(jù)的交互能力。同時(shí)通過(guò)對(duì)HIS系統(tǒng)的需求發(fā)現(xiàn)，前端頁(yè)面在色彩設(shè)計(jì)、病人病例篩選等各個(gè)方面還存在著一定的問(wèn)題。因此，實(shí)現(xiàn)對(duì)前端特效頁(yè)面的開發(fā)，從而時(shí)期更符合使用者才需求，顯得很有必要。

2.2 JavaScript插件使用問(wèn)題

JavaScript可為廣大的用戶提供各種各樣的插件，并且每個(gè)不同的查件其都包含著一個(gè)與其相互對(duì)應(yīng)的源文件。而在該該系統(tǒng)中，在每個(gè)不同的頁(yè)面中，其都加載所有的源文件，從而嚴(yán)重的占用了網(wǎng)絡(luò)帶寬和資源，從而需要對(duì)HIS頁(yè)面進(jìn)行選擇性的頁(yè)面加載，針對(duì)不需要的插件則不需要采用相應(yīng)的頁(yè)面。

2.3 瀏覽器兼容問(wèn)題

在對(duì)A醫(yī)院前端頁(yè)面進(jìn)行開發(fā)的過(guò)程中發(fā)現(xiàn)，由于文中采用的是基于Web2.0技術(shù)，其中各個(gè)不同的瀏覽器的廠家對(duì)前端代碼的解析的方式和標(biāo)準(zhǔn)不同，從而給前端界面的開發(fā)帶來(lái)了很大的問(wèn)題。對(duì)此，針對(duì)該問(wèn)題，開發(fā)適合當(dāng)前主流瀏覽器成為該醫(yī)院HIS前端頁(yè)面設(shè)計(jì)的重點(diǎn)。

3 基于jQuery技術(shù)的前端特效實(shí)現(xiàn)

3.1 表格顏色交替及光棒效果實(shí)現(xiàn)

為更好的實(shí)現(xiàn)對(duì)前端頁(yè)面的開發(fā)，針對(duì)其中表格的問(wèn)題，本文HIS系統(tǒng)中表格的顏色交替的及其光棒的效果進(jìn)行了設(shè)計(jì)，并利用jQuery對(duì)其實(shí)現(xiàn)，其具體的代碼則為：

$ （function（） {

$ （"tr:even"） .add Class （"class1"）；$ （"tr:odd"） .add Class （"class2"）；$ （"tr"） .mouseout（function（） {$ （this） .removeClass（"class3"）；}）

3.2 表格變色實(shí)現(xiàn)

表格變色的實(shí)現(xiàn)，其主要是編輯 jQuery的代碼，其具體的代碼編輯則為如圖2所示。

圖2 表格變色代碼設(shè)計(jì)Fig.2 Table color code design

3.3 表格伸縮代碼設(shè)計(jì)與效果

$（function（）{

$（"tr:parent"）.click（function（）

$ （ this）.toggleClass（ "selected"）

}）click；

}）

由此通過(guò)上述的代碼，則可以得到如圖3和圖4的前后效果。

圖3 調(diào)整前效果Fig.3 Before adjustment effect

3.4 網(wǎng)頁(yè)前端界面配置文件設(shè)計(jì)

在實(shí)際的開發(fā)過(guò)程中，其包含著很多數(shù)據(jù)格式。對(duì)此，在使用jQuery技術(shù)進(jìn)行開發(fā)的過(guò)程中，本文則采用 jqGrid插件的方式，對(duì)其中表格當(dāng)中的字段進(jìn)行處理。同時(shí)考慮到經(jīng)過(guò)jqGrid處理的表格字段其可以被重復(fù)的利用問(wèn)題，本文在對(duì)A醫(yī)院前端界面進(jìn)行開發(fā)的過(guò)程中，則將表格插件當(dāng)中的colModel參數(shù)提取，并通過(guò)采用JSON格式講其保存起來(lái)，并以.json作為其文本的文件。當(dāng)頁(yè)面對(duì)對(duì)其進(jìn)行初始化的過(guò)程中，其則可以同步的對(duì)該文件進(jìn)行讀取，從而自動(dòng)生成與其對(duì)應(yīng)的表單或者是數(shù)據(jù)。

圖4 調(diào)整后效果Fig.4 Effect after adjustment

同時(shí)，為更好的做好jQuery.validationEngine驗(yàn)證，本文則通過(guò)在每個(gè)字段的后面增加一個(gè)validate的參數(shù)進(jìn)行驗(yàn)證，以醫(yī)院人員基本信息管理為例，其具體的代碼則為：

"validate":"validate[required，custom[number]]text-input"

在該過(guò)程的實(shí)現(xiàn)中，上述采用的插件其為完全兼容，在jqGrid初始化的過(guò)程中，則通過(guò)借助其中的AJAX同步調(diào)用的方式，實(shí)現(xiàn)對(duì)文件內(nèi)容的獲取。

3.5 HIS系統(tǒng)用戶登陸插件設(shè)計(jì)與實(shí)現(xiàn)

在用戶登陸的查件中，其存在著一個(gè)jquery.loginForm.js文件，該文件其引用了一個(gè)加密的sha1.js。同時(shí)為簡(jiǎn)化對(duì)網(wǎng)頁(yè)中的cookie對(duì)象進(jìn)行處理，則引入jquery.cookie.js的代碼，其目的則是初始化登陸信息，并對(duì)用戶的登陸行為進(jìn)行處理。而針對(duì)jquery.loginForm.js，通過(guò)對(duì)應(yīng)ID的方式，實(shí)現(xiàn)對(duì)唯一數(shù)據(jù)對(duì)應(yīng)的處理。其具體的代碼則為：

var loginDiv=$（this）.attr（"id"）； //獲取父容器中的 ID

items.loginForm+=loginDiv；//獲取各個(gè)空間的實(shí)際ID

由此，通過(guò)這樣的方式，當(dāng)其用戶名在出現(xiàn)錯(cuò)誤的時(shí)候，其會(huì)自動(dòng)清空，具體如圖5所示。

圖5 系統(tǒng)登陸清空界面Fig.5 Empty landing system interface

4 結(jié)束語(yǔ)

通過(guò)以A醫(yī)院為例，針對(duì)在A醫(yī)院HIS系統(tǒng)設(shè)計(jì)中的前端頁(yè)面需求變化的問(wèn)題，通過(guò)采用jQuery技術(shù)，實(shí)現(xiàn)了對(duì)前端頁(yè)面在距離、樣式元素等方面的設(shè)計(jì)，從而提高了該語(yǔ)言管理系統(tǒng)使用的美觀，為醫(yī)院HIS系統(tǒng)的改進(jìn)提供了參考。

[1]俞國(guó)紅.利用jQuery框架技術(shù)快速開發(fā)網(wǎng)站前端頁(yè)面[J].襄樊職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2011，10（5）:25-27.

[2]陶國(guó)榮.jQuery權(quán)威指南[M].北京:機(jī)械工業(yè)出版社，2011.

[3]沃爾瑟ASP.NET3.5揭秘（卷2）[M].北京:人民郵電出版社，2009.

[4]劉海舒.淺談jQuery的應(yīng)用 [J].數(shù)字技術(shù)與應(yīng)用，2010（2）:50.

[5]李炳練.基于jQuery框架的無(wú)刷新技術(shù)設(shè)計(jì)與實(shí)現(xiàn)[J].電腦編程技巧與維護(hù)，2011，6（5）:19.

[6]扎卡斯.AJXA高級(jí)程序設(shè)計(jì)[M].2版.北京:人民郵電出版社，2008.

[7]鄭俊生，姜敏.一種基于Div+CSS+JavaScript的網(wǎng)頁(yè)布局特效研究[J].電腦知識(shí)與技術(shù)，2008（5）:1556-1558.

[8]姚渝濤.基于JQuery對(duì)開源插件jqGrid的功能應(yīng)用[J].電腦編程技術(shù)與維護(hù)，2010，7（7）:47-50.