本發(fā)明涉及互聯(lián)網(wǎng)技術(shù)領(lǐng)域，特別涉及一種網(wǎng)頁控制隱藏和顯示應(yīng)用功能的方法和系統(tǒng)。

背景技術(shù)：

隨著網(wǎng)絡(luò)的迅速發(fā)展，互聯(lián)網(wǎng)成為大量信息的載體，文字、圖片、數(shù)據(jù)庫、音頻、視頻多媒體等不同類型數(shù)據(jù)大量出現(xiàn)于網(wǎng)絡(luò)，再加以各式各樣的網(wǎng)頁設(shè)計(jì)，人類進(jìn)入了信息爆炸的時(shí)代?；ヂ?lián)網(wǎng)信息呈現(xiàn)了數(shù)據(jù)巨大、內(nèi)容廣泛、形式多樣、增長(zhǎng)迅速的特點(diǎn)。截至2014年12月，僅中國的網(wǎng)頁數(shù)量達(dá)到1899億個(gè)，年增長(zhǎng)26.6％。隨著個(gè)人博客、自媒體的發(fā)展，以及互聯(lián)網(wǎng)媒體的快速發(fā)展，互聯(lián)網(wǎng)頁的數(shù)量將會(huì)以幾何級(jí)速的增長(zhǎng)。

互聯(lián)網(wǎng)傳播速度快，內(nèi)容共享自由，所以互聯(lián)網(wǎng)成為了一個(gè)集各種信息資源為一體的資源網(wǎng)，來自各方的人士隨時(shí)都可以在網(wǎng)上發(fā)布信息。這就造成了互聯(lián)網(wǎng)信息增長(zhǎng)迅速、種類繁多、分布廣泛的特點(diǎn)，也帶來互聯(lián)網(wǎng)信息資源在使用過程中的效率低下，主要表現(xiàn)為：

1、內(nèi)容和功能第一。網(wǎng)頁的核心競(jìng)爭(zhēng)力是其所包含的內(nèi)容和功能，好的網(wǎng)頁是能夠給用戶提供更多的功能和內(nèi)容，能夠滿足用戶的多方面的、多層次的應(yīng)用需求，能夠吸引更多的用戶訪問，并且擁有較高的回頭率。這就需要設(shè)計(jì)高效、跨領(lǐng)域(如搜索和新聞)、多功能(如搜索和購物)、跨平臺(tái)(如跨PC和移動(dòng)設(shè)備)的網(wǎng)頁，并確保達(dá)到好的用戶體驗(yàn)。

2、響應(yīng)式設(shè)計(jì)?，F(xiàn)在越來越多用戶都擁有多種終端：臺(tái)式機(jī)，筆記本，平板電腦，手機(jī)，能夠適應(yīng)不同尺寸顯示屏的網(wǎng)頁是現(xiàn)在網(wǎng)頁設(shè)計(jì)的潮流，甚至是未來很長(zhǎng)一段時(shí)間的設(shè)計(jì)趨勢(shì)。響應(yīng)式設(shè)計(jì)能保證網(wǎng)頁適應(yīng)不同的分辨 率，讓網(wǎng)頁要素重組，使其無論在垂直的平板電腦還是智能手機(jī)上，都能達(dá)到最好的視覺效果。除了多終端的多樣化，顯示屏幕(PC、手機(jī)、Pad)都在不斷變大，而在對(duì)未來生活的概念設(shè)計(jì)里，“屏幕”這個(gè)媒介更是被運(yùn)用到多種新平臺(tái)上，例如微軟發(fā)布的“未來生活概念視頻”里，廚房、室內(nèi)墻壁、辦公室玻璃墻面都成為了交互平臺(tái)。響應(yīng)式網(wǎng)頁設(shè)計(jì)所具備的良好的適應(yīng)性和可塑性，在未來的網(wǎng)頁設(shè)計(jì)里將占有舉足輕重的位置。

3、追求簡(jiǎn)潔設(shè)計(jì)風(fēng)格。簡(jiǎn)潔的風(fēng)格體現(xiàn)在扁平化設(shè)計(jì)和簡(jiǎn)單配色兩方面。扁平化的極簡(jiǎn)主義突出了應(yīng)用的功能，用簡(jiǎn)化的圖表替代了原本精致的描繪，更加突出應(yīng)用的實(shí)際效果，反應(yīng)使用應(yīng)用的感受，而不是局限在某個(gè)應(yīng)用的外在形象上。簡(jiǎn)單配色體現(xiàn)了人們審美需求的改變，同色系網(wǎng)站設(shè)計(jì)成為主流，而“簡(jiǎn)化配色”的概念，則是把參與網(wǎng)站設(shè)計(jì)的顏色局限到1到2個(gè)。配色簡(jiǎn)單的趨勢(shì)似乎和平面化同步，有些網(wǎng)頁甚至擯棄色彩，采用純黑白(以及兩者之間的漸變色)設(shè)計(jì)，有時(shí)在其中加入一點(diǎn)色彩吸引注意力或渲染效果，比如加入醒目的紅色。

4、長(zhǎng)滾動(dòng)網(wǎng)頁。在PC時(shí)代，網(wǎng)絡(luò)用戶并不歡迎長(zhǎng)滾動(dòng)網(wǎng)頁，因?yàn)殚L(zhǎng)滾動(dòng)網(wǎng)頁會(huì)把功能模塊淹沒在滾動(dòng)的網(wǎng)頁中。移動(dòng)終端讓人們習(xí)慣用“滾動(dòng)條”控制的方式閱讀網(wǎng)頁、尋找資訊，這樣的閱讀習(xí)慣也影響了網(wǎng)絡(luò)設(shè)計(jì)，頁面出現(xiàn)更多兩側(cè)留白與更多的交互設(shè)計(jì)。手機(jī)瀏覽器讓人們逐漸接受了這種長(zhǎng)條形網(wǎng)站布局。此外內(nèi)容的編排上也更適合閱讀理解。此外國內(nèi)很多購物網(wǎng)站或貼吧都加上了“點(diǎn)擊返回頁面最上端”的功能，更加方便了瀏覽長(zhǎng)網(wǎng)頁。長(zhǎng)滾動(dòng)網(wǎng)頁設(shè)計(jì)，對(duì)于用戶隨時(shí)使用網(wǎng)頁的應(yīng)用功能提出了更高的要求。

為了適應(yīng)現(xiàn)代網(wǎng)頁設(shè)計(jì)的發(fā)展趨勢(shì)，在網(wǎng)頁中實(shí)現(xiàn)諸多功能一樣的同時(shí)，還要保證頁面設(shè)計(jì)的簡(jiǎn)潔，并且互動(dòng)效果好。在實(shí)現(xiàn)長(zhǎng)滾動(dòng)頁面、融合多種應(yīng)用功能的同時(shí)，對(duì)有限的網(wǎng)頁頁面設(shè)計(jì)提出了更高的要求。如何能夠在實(shí)現(xiàn)豐富功能一樣的同時(shí)，為用戶帶來好的視覺效果，并可以實(shí)現(xiàn)良好的互動(dòng)，是網(wǎng)頁設(shè)計(jì)中一直追求的目標(biāo)。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明提供一種網(wǎng)頁控制隱藏和顯示應(yīng)用功能的方法和系統(tǒng)，根據(jù)用戶的輸入來控制應(yīng)用功能的顯示或隱藏，在有限的顯示面積內(nèi)融合了更多的內(nèi)容和功能，并且結(jié)合用戶的輸入來進(jìn)行控制，加強(qiáng)了網(wǎng)頁的互動(dòng)效果，同時(shí)應(yīng)用功能的動(dòng)態(tài)顯示也能夠避免網(wǎng)頁的閃動(dòng)，提高了網(wǎng)頁的視覺效果。

本發(fā)明的技術(shù)方案提供了一種網(wǎng)頁控制隱藏和顯示應(yīng)用功能的方法，包括以下步驟：

在JavaScript腳本中編寫網(wǎng)頁應(yīng)用的功能模塊；

設(shè)置所述功能模塊的觸發(fā)條件；

根據(jù)所述觸發(fā)條件，在網(wǎng)頁上顯示相應(yīng)的功能模塊。

進(jìn)一步的，功能模塊的數(shù)量至少為1個(gè)。

進(jìn)一步的，打開網(wǎng)頁，瀏覽器自動(dòng)下載所述功能模塊和觸發(fā)條件判定模塊。

進(jìn)一步的，顯示功能模塊時(shí)，將顯示該功能項(xiàng)所包含的子功能的控件。

進(jìn)一步的，顯示功能模塊時(shí)，功能模塊的顯示區(qū)域覆蓋原有頁面，點(diǎn)擊該區(qū)域則啟動(dòng)所述功能模塊的相應(yīng)功能，而不啟動(dòng)原有頁面的功能。

進(jìn)一步的，所述根據(jù)所述觸發(fā)條件，在網(wǎng)頁上顯示相應(yīng)的功能模塊，進(jìn)一步包括：

滿足條件A則觸發(fā)功能模塊A，滿足條件B則觸發(fā)功能模塊B；

當(dāng)滿足條件A轉(zhuǎn)變?yōu)闈M足條件B時(shí)，由顯示功能模塊A轉(zhuǎn)變?yōu)轱@示功能模塊B。

進(jìn)一步的，觸發(fā)條件由滿足轉(zhuǎn)變?yōu)椴粷M足時(shí)，功能模塊由顯示轉(zhuǎn)變?yōu)殡[藏。

本發(fā)明的技術(shù)方案還提供了一種網(wǎng)頁控制隱藏和顯示應(yīng)用功能的系統(tǒng)，其特征在于，包括：功能模塊單元，輸入單元，控制單元，顯示單元，其中，

功能模塊單元用于實(shí)現(xiàn)網(wǎng)頁的應(yīng)用功能；

輸入單元用于輸入指令；

控制單元用于接收所述輸入指令，并控制功能模塊的顯示和隱藏；

顯示單元用于接收控制單元的指令，實(shí)現(xiàn)顯示或隱藏功能模塊。

進(jìn)一步的，所述輸入指令包括鍵盤輸入、鼠標(biāo)輸入或其他輸入設(shè)備的輸入。

進(jìn)一步的，控制單元根據(jù)所述觸發(fā)條件來控制顯示功能模塊。

本發(fā)明技術(shù)方案采用JavaScript腳本程序接收用戶的輸入信號(hào)，根據(jù)觸發(fā)條件動(dòng)態(tài)的控制應(yīng)用功能的顯示或隱藏，在有限的顯示面積內(nèi)融合了更多的內(nèi)容和功能，為用戶帶來了更多的有用信息和功能，滿足了不同層次的用戶的不同方面的需求，提高了網(wǎng)頁內(nèi)容和功能對(duì)用戶的吸引力。JavaScript腳本程序接收用戶的輸入信號(hào)也是互動(dòng)效果的設(shè)計(jì)，能夠提高用戶使用頁面的積極性，加強(qiáng)用戶使用頁面功能的興趣。同時(shí)，應(yīng)用功能的動(dòng)態(tài)顯示也能夠避免網(wǎng)頁的閃動(dòng)，提高了網(wǎng)頁的顯示效果，符合網(wǎng)頁設(shè)計(jì)發(fā)展的趨勢(shì)。

本發(fā)明的其它特征和優(yōu)點(diǎn)將在隨后的說明書中闡述，并且，部分地從說明書中變得顯而易見，或者通過實(shí)施本發(fā)明而了解。本發(fā)明的目的和其他優(yōu)點(diǎn)可通過在所寫的說明書、權(quán)利要求書、以及附圖中所特別指出的結(jié)構(gòu)來實(shí)現(xiàn)和獲得。

下面通過附圖和實(shí)施例，對(duì)本發(fā)明的技術(shù)方案做進(jìn)一步的詳細(xì)描述。

附圖說明

附圖用來提供對(duì)本發(fā)明的進(jìn)一步理解，并且構(gòu)成說明書的一部分，與本發(fā)明的實(shí)施例一起用于解釋本發(fā)明，并不構(gòu)成對(duì)本發(fā)明的限制。在附圖中：

圖1為本發(fā)明實(shí)施例一中網(wǎng)頁控制隱藏和顯示應(yīng)用功能的方法流程圖；

圖2為本發(fā)明實(shí)施例二中網(wǎng)頁控制切換顯示應(yīng)用功能的方法流程圖；

圖3為本發(fā)明實(shí)施例一和二中網(wǎng)頁控制隱藏和顯示應(yīng)用功能的系統(tǒng)結(jié)構(gòu)圖。

具體實(shí)施方式

以下結(jié)合附圖對(duì)本發(fā)明的優(yōu)選實(shí)施例進(jìn)行說明，應(yīng)當(dāng)理解，此處所描述的優(yōu)選實(shí)施例僅用于說明和解釋本發(fā)明，并不用于限定本發(fā)明。

圖1為本發(fā)明實(shí)施例一中網(wǎng)頁控制隱藏和顯示應(yīng)用功能的方法流程圖。如圖1所示，該網(wǎng)頁控制隱藏和顯示應(yīng)用功能的方法流程包括以下步驟：

步驟101：在JavaScript腳本中編寫網(wǎng)頁應(yīng)用的功能模塊。

功能模塊的數(shù)量至少為1個(gè)；

功能模塊包括了該功能下的子功能。

步驟102：設(shè)置所述功能模塊的觸發(fā)判定模塊。

不同的功能模塊有不同的觸發(fā)條件；

觸發(fā)判定模塊根據(jù)輸入條件來判斷是否啟動(dòng)功能模塊以及啟動(dòng)哪一個(gè)功能模塊。

步驟103：打開網(wǎng)頁后，自動(dòng)下載功能模塊和觸發(fā)條件判定模塊。

打開網(wǎng)頁，瀏覽器自動(dòng)下載JavaScript腳本中的所述功能模塊和觸發(fā)條件判定模塊；

下載完成后，瀏覽器在后臺(tái)運(yùn)行功能模塊和觸發(fā)條件判定模塊。

步驟104：用戶輸入指令。

用戶輸入指令可以采用鍵盤輸入、鼠標(biāo)輸入或其他輸入設(shè)備的輸入。

步驟105：判斷是否觸發(fā)啟動(dòng)條件。

根據(jù)輸入指令，觸發(fā)條件判定模塊判定是否顯示功能模塊、顯示哪個(gè)功能模塊、是否切換顯示不同的功能模塊、以及是否由顯示轉(zhuǎn)變?yōu)殡[藏顯示。

步驟106：根據(jù)步驟105的判定結(jié)果在網(wǎng)頁顯示。

根據(jù)所述觸發(fā)判定模塊的輸出結(jié)果，在網(wǎng)頁上顯示相應(yīng)的功能模塊或隱藏顯示功能模塊；

顯示功能模塊時(shí)，將顯示該功能項(xiàng)所包含的子功能的控件；

顯示功能模塊時(shí)，功能模塊的顯示區(qū)域覆蓋原有頁面，點(diǎn)擊該區(qū)域則啟動(dòng) 所述功能模塊的相應(yīng)功能，而不啟動(dòng)原有頁面的功能；

根據(jù)所述觸發(fā)條件，在網(wǎng)頁上顯示相應(yīng)的功能模塊，進(jìn)一步包括：滿足條件A則觸發(fā)功能模塊A，滿足條件B則觸發(fā)功能模塊B；當(dāng)滿足條件A轉(zhuǎn)變?yōu)闈M足條件B時(shí)，由顯示功能模塊A轉(zhuǎn)變?yōu)轱@示功能模塊B；觸發(fā)條件由滿足轉(zhuǎn)變?yōu)椴粷M足時(shí)，功能模塊由顯示轉(zhuǎn)變?yōu)殡[藏。

圖2為本發(fā)明實(shí)施例二中網(wǎng)頁控制切換顯示應(yīng)用功能的方法流程圖。如圖2所示，該網(wǎng)頁控制切換顯示應(yīng)用功能的方法流程包括以下步驟：

步驟201：在JavaScript腳本中編寫網(wǎng)頁應(yīng)用的功能模塊。

功能模塊的數(shù)量至少為2個(gè)；

功能模塊包括了該功能下的子功能。

步驟202：設(shè)置所述功能模塊的觸發(fā)判定模塊。

不同的功能模塊有不同的觸發(fā)條件；

觸發(fā)判定模塊根據(jù)輸入條件來判斷是否啟動(dòng)功能模塊以及啟動(dòng)哪一個(gè)功能模塊。

步驟203：打開網(wǎng)頁后，自動(dòng)下載功能模塊和觸發(fā)條件判定模塊。

打開網(wǎng)頁，瀏覽器自動(dòng)下載JavaScript腳本中的所述功能模塊和觸發(fā)條件判定模塊；

下載完成后，瀏覽器在后臺(tái)運(yùn)行功能模塊和觸發(fā)條件判定模塊。

步驟204：用戶輸入指令。

用戶輸入指令可以采用鍵盤輸入、鼠標(biāo)輸入或其他輸入設(shè)備的輸入。

步驟205：判斷是否觸發(fā)啟動(dòng)條件。

根據(jù)輸入指令，觸發(fā)條件判定模塊判定切換顯示不同的功能模塊，由功能模塊A切換為顯示功能模塊B。

步驟206：在網(wǎng)頁切換顯示功能模塊。

根據(jù)所述觸發(fā)判定模塊的輸出結(jié)果，在網(wǎng)頁上切換顯示相應(yīng)的功能模塊， 由顯示功能模塊A轉(zhuǎn)變?yōu)轱@示功能模塊B；

切換顯示時(shí)，顯示該功能項(xiàng)所包含的子功能的控件；

切換顯示時(shí)，功能模塊的顯示區(qū)域覆蓋原有頁面，點(diǎn)擊該區(qū)域則啟動(dòng)所述功能模塊的相應(yīng)功能，而不啟動(dòng)原有頁面的功能。

為了實(shí)現(xiàn)上述實(shí)施例一和二，本實(shí)施例還提供了一種網(wǎng)頁控制隱藏和顯示應(yīng)用功能的系統(tǒng)，圖3為本發(fā)明實(shí)施例一和二中網(wǎng)頁控制隱藏和顯示應(yīng)用功能的系統(tǒng)結(jié)構(gòu)圖。

如圖3所示，該系統(tǒng)包括：功能模塊單元301，輸入單元302，控制單元303，顯示單元304，其中，

功能模塊單元用于實(shí)現(xiàn)網(wǎng)頁的應(yīng)用功能；

輸入單元用于輸入指令；

控制單元用于接收所述輸入指令，并控制功能模塊的顯示和隱藏；

顯示單元用于接收控制單元的指令，實(shí)現(xiàn)顯示或隱藏功能模塊。

進(jìn)一步的，所述輸入指令包括鍵盤輸入、鼠標(biāo)輸入或其他輸入設(shè)備的輸入。

進(jìn)一步的，控制單元根據(jù)所述觸發(fā)條件來控制顯示功能模塊。

上述實(shí)施例中的技術(shù)方案由于采用JavaScript腳本程序接收用戶的輸入信號(hào)，根據(jù)觸發(fā)條件動(dòng)態(tài)的控制應(yīng)用功能的顯示或隱藏，在有限的顯示面積內(nèi)融合了更多的內(nèi)容和功能，為用戶帶來了更多的有用信息和功能，滿足了不同層次的用戶的不同方面的需求，提高了網(wǎng)頁內(nèi)容和功能對(duì)用戶的吸引力。JavaScript腳本程序接收用戶的輸入信號(hào)也是互動(dòng)效果的設(shè)計(jì)，能夠提高用戶使用頁面的積極性，加強(qiáng)用戶使用頁面功能的興趣。同時(shí)，應(yīng)用功能的動(dòng)態(tài)顯示也能夠避免網(wǎng)頁的閃動(dòng)，提高了網(wǎng)頁的顯示效果，符合網(wǎng)頁設(shè)計(jì)發(fā)展的趨勢(shì)。

本領(lǐng)域內(nèi)的技術(shù)人員應(yīng)明白，本發(fā)明的實(shí)施例可提供為方法、系統(tǒng)、或計(jì)算機(jī)程序產(chǎn)品。因此，本發(fā)明可采用完全硬件實(shí)施例、完全軟件實(shí)施例、或結(jié) 合軟件和硬件方面的實(shí)施例的形式。而且，本發(fā)明可采用在一個(gè)或多個(gè)其中包含有計(jì)算機(jī)可用程序代碼的計(jì)算機(jī)可用存儲(chǔ)介質(zhì)(包括但不限于磁盤存儲(chǔ)器和光學(xué)存儲(chǔ)器等)上實(shí)施的計(jì)算機(jī)程序產(chǎn)品的形式。

本發(fā)明是參照根據(jù)本發(fā)明實(shí)施例的方法、設(shè)備(系統(tǒng))、和計(jì)算機(jī)程序產(chǎn)品的流程圖和/或方框圖來描述的。應(yīng)理解可由計(jì)算機(jī)程序指令實(shí)現(xiàn)流程圖和/或方框圖中的每一流程和/或方框、以及流程圖和/或方框圖中的流程和/或方框的結(jié)合?？商峁┻@些計(jì)算機(jī)程序指令到通用計(jì)算機(jī)、專用計(jì)算機(jī)、嵌入式處理機(jī)或其他可編程數(shù)據(jù)處理設(shè)備的處理器以產(chǎn)生一個(gè)機(jī)器，使得通過計(jì)算機(jī)或其他可編程數(shù)據(jù)處理設(shè)備的處理器執(zhí)行的指令產(chǎn)生用于實(shí)現(xiàn)在流程圖一個(gè)流程或多個(gè)流程和/或方框圖一個(gè)方框或多個(gè)方框中指定的功能的裝置。

這些計(jì)算機(jī)程序指令也可存儲(chǔ)在能引導(dǎo)計(jì)算機(jī)或其他可編程數(shù)據(jù)處理設(shè)備以特定方式工作的計(jì)算機(jī)可讀存儲(chǔ)器中，使得存儲(chǔ)在該計(jì)算機(jī)可讀存儲(chǔ)器中的指令產(chǎn)生包括指令裝置的制造品，該指令裝置實(shí)現(xiàn)在流程圖一個(gè)流程或多個(gè)流程和/或方框圖一個(gè)方框或多個(gè)方框中指定的功能。

這些計(jì)算機(jī)程序指令也可裝載到計(jì)算機(jī)或其他可編程數(shù)據(jù)處理設(shè)備上，使得在計(jì)算機(jī)或其他可編程設(shè)備上執(zhí)行一系列操作步驟以產(chǎn)生計(jì)算機(jī)實(shí)現(xiàn)的處理，從而在計(jì)算機(jī)或其他可編程設(shè)備上執(zhí)行的指令提供用于實(shí)現(xiàn)在流程圖一個(gè)流程或多個(gè)流程和/或方框圖一個(gè)方框或多個(gè)方框中指定的功能的步驟。

顯然，本領(lǐng)域的技術(shù)人員可以對(duì)本發(fā)明進(jìn)行各種改動(dòng)和變型而不脫離本發(fā)明的精神和范圍。這樣，倘若本發(fā)明的這些修改和變型屬于本發(fā)明權(quán)利要求及其等同技術(shù)的范圍之內(nèi)，則本發(fā)明也意圖包含這些改動(dòng)和變型在內(nèi)。