專利名稱：一種頁面分割顯示方法
技術領域：
本發(fā)明屬于網頁處理領域，尤其涉及一種頁面分割顯示方法。
背景技術：
目前，當網站增加新式功能時，如果不給用戶必要的提示，用戶很容易忽視新式功能的使用或者不知道如何使用新式功能。針對上述問題，于現(xiàn)有技術中，通過單純地覆蓋圖片指示進行提示。然而，上述方式雖然可以達到提示目的，但是用戶可能會完全忽略而進行其他操作。因此，如果上述新式功能是用戶必然需要的流程，則用戶可能無法完成某些操作。另外，于現(xiàn)有技術中，還會使用遮罩層完全覆蓋網頁，將待引導的功能以截圖的方式覆蓋在遮罩層上。然而，上述方式中，待引導的功能無法直接操作，只起到了提示作用。此外，還會使用遮罩層完全覆蓋網頁，將待引導的功能以重輸出代碼的形式覆蓋在遮罩層上。然而，上述方式亦存在以下問題。首先，重輸出的代碼需要包含原功能區(qū)的所有功能，從而造 成冗余；其次，輸出的結構是獨立存在的，需要動態(tài)定位，十分不便。

發(fā)明內容
本發(fā)明提供一種頁面分割顯示方法，以解決上述問題。本發(fā)明提供一種頁面分割顯示方法。上述方法包括以下步驟用戶打開頁面，頁面加載完成后，調用javascript程序創(chuàng)建遮罩層，所述遮罩層覆蓋整個頁面，所述javascript程序將所述遮罩層的位置信息保存至數(shù)組maskArray ;所述javascript程序獲取所述頁面上待顯示的功能區(qū)塊頁面元素，并將所述功能區(qū)塊頁面元素的位置信息保存至數(shù)組boxes ;所述javascript程序根據(jù)數(shù)組maskArray及數(shù)組boxes保存的位置信息依次比較遮罩層與待顯示的功能區(qū)塊頁面元素的位置關系，若所述待顯示的功能區(qū)塊頁面元素與所述遮罩層存在交疊，則以所述待顯示的功能區(qū)塊頁面元素分割所述遮罩層，并將分割后遮罩層的位置信息更新至數(shù)組maskArray ;所述javascript程序根據(jù)更新的所述數(shù)組maskArray中的位置信息輸出待顯示的功能區(qū)塊頁面元素。相較于先前技術，根據(jù)本發(fā)明提供的頁面分割顯示方法，所述javascript程序根據(jù)數(shù)組maskArray及數(shù)組boxes保存的位置信息依次比較遮罩層與待顯示的功能區(qū)塊頁面元素的位置關系，若所述待顯示的功能區(qū)塊頁面元素與所述遮罩層存在交疊，則以所述待顯示的功能區(qū)塊頁面元素分割所述遮罩層，并將分割后遮罩層的位置信息更新至數(shù)組maskArray,并根據(jù)更新的數(shù)組maskArray中的位置信息輸出待顯示的功能區(qū)塊頁面元素。如此，可以將不必要的內容進行遮蔽，僅為用戶提供相關功能所需的頁面顯示，使得用戶不會跳過引導操作。同時，將待顯示的功能區(qū)塊頁面元素顯示后，可保持上述功能區(qū)塊的可操作性，從而達到理想的引導操作目的，另外，整個流程給予用戶明確的操作步驟提示，提高用戶體驗。


此處所說明的附圖用來提供對本發(fā)明的進一步理解，構成本申請的一部分，本發(fā)明的示意性實施例及其說明用于解釋本發(fā)明，并不構成對本發(fā)明的不當限定。在附圖中圖I所示為根據(jù)本發(fā)明的較佳實施例提供的頁面分割顯示方法的流程圖；圖2及圖3所示為根據(jù)本發(fā)明的較佳實施例提供的頁面分割示意圖。
具體實施例方式下文中將參考附圖并結合實施例來詳細說明本發(fā)明。需要說明的是，在不沖突的情況下，本申請中的實施例及實施例中的特征可以相互組合。圖I所示為根據(jù)本發(fā)明的較佳實施例提供的頁面分割顯示方法的流程圖。圖2及 圖3所示為根據(jù)本發(fā)明的較佳實施例提供的頁面分割示意圖。如圖I所示，本發(fā)明的較佳實施例提供的頁面分割顯示方法包括步驟101 104。請一并參考圖2及圖3。于步驟101,用戶打開頁面,頁面加載完成后,調用javascript程序創(chuàng)建遮罩層，所述遮罩層覆蓋整個頁面，所述javascript程序將所述遮罩層的位置信息保存至數(shù)組maskArrayo其中，初始時創(chuàng)建的遮罩層用元素elm表示,且所述數(shù)組maskArray存儲元素elm的上下左右的位置信息。其中，所述元素elm的上下左右的位置信息例如表示為elm.top、elm. bottom、elm. left、elm. right。于步驟102,所述javascript程序獲取所述頁面上待顯示的功能區(qū)塊頁面元素，并將所述功能區(qū)塊頁面元素的位置信息保存至數(shù)組boxes。具體而言，所述javascript程序通過函數(shù)getBoundingClientRectO獲取待顯示的功能區(qū)塊頁面元素的位置信息,并將所有待顯示的功能區(qū)塊頁面元素的位置信息保存至數(shù)組boxes。例如，若有三個待顯示的功能區(qū)塊頁面元素a C，則數(shù)組boxes中，boxes
可表示功能區(qū)塊頁面元素a的位置信息，boxes [I]可表示功能區(qū)塊頁面元素b的位置信息，boxes [2]可表示功能區(qū)塊頁面元素c的位置信息。于實際應用中，也可以遍歷所有功能區(qū)塊頁面元素并將所有功能區(qū)塊頁面元素的位置信息均保存至數(shù)組boxes，之后，再根據(jù)需要從數(shù)組boxes選擇待顯示的功能區(qū)塊頁面元素的位置信息。于本實施例中，頁面元素的位置信息在統(tǒng)一的坐標系內確定。所述坐標系例如圖3所示的xy直角坐標系。然而，本發(fā)明對此并不限定。于實際應用中，坐標系的選擇可根據(jù)用戶的需要進行確定。于步驟103,所述javascript程序根據(jù)數(shù)組maskArray及數(shù)組boxes保存的位置信息依次比較遮罩層與待顯示的功能區(qū)塊頁面元素的位置關系，若所述待顯示的功能區(qū)塊頁面元素與所述遮罩層存在交疊，則以所述待顯示的功能區(qū)塊頁面元素分割所述遮罩層，并將分割后遮罩層的位置信息更新至數(shù)組maskArray。其中，當遮罩層被分割后，所述數(shù)組maskArray保存多個頁面元素，且每個頁面元素及待顯示的功能區(qū)塊頁面元素呈矩形。于本實施例中，所述javascript程序首先比較數(shù)組maskArray及數(shù)組boxes中第一個待顯示功能區(qū)塊頁面元素的位置關系，之后所述javascript程序依次比較所述數(shù)組maskArray中每個頁面元素與后續(xù)待顯示的功能區(qū)塊頁面元素的位置關系。具體而言，比較遮罩層及數(shù)組boxes中第一個待顯示功能區(qū)塊頁面元素的位置關系時，由于數(shù)組maskArray中只有一個元素elm,且元素elm在頁面上覆蓋整個頁面結構，因此，遮罩層包含第一個待顯示功能區(qū)塊頁面元素，且第一個待顯示功能區(qū)塊頁面元素將遮罩層分割成至少兩個元素。之后，若有第二個待顯示的功能區(qū)塊頁面元素，則所述javascript程序依次比較第二個待顯示的功能區(qū)塊頁面元素與上述分割后的遮罩層的位
置關系。具體以顯示兩個待顯示的功能區(qū)塊頁面元素a b為例進行說明，同時請參照圖2及圖3。如圖2所示，若第一個待顯示的功能區(qū)塊頁面元素a位于遮罩層(即，元素elm)的中間，則功能區(qū)塊頁面元素a將遮罩層分割成四個部分(例如可用元素elml、元素elm2、元素elm3及元素elm4表示)。此時,數(shù)組maskArray中元素elm的上下左右位置信息會被分割后的四個部分的位置信息取代(例如可表示為elml. top、elml. bottom、elml. left、elml. right ；elm2. top、elm2. bottom、elm2. left、elm2. right ；elm3. top、elm3. bottom、elm3. left、elm3. right ；elm4. top、elm4. bottom、elm4. left、elm4. right)。接著，比較功能區(qū)塊頁面元素b及元素elml elm4的位置關系。如圖3所示，功能區(qū)塊頁面元素b將元素elm4又分割成了三部分(例如可用元素elm5、元素elm6及元素elm7表示)。此時,數(shù)組maskArray中elm4的位置信息會被分割后的三個部分的位置信息取代(例如可表不為 elm5. top、elm5. bottom、elm5. left、elm5. right ；elm6. top、elm6.bottom、elm6. Ieft>elm6. right ；elm7. top、elm7. bottom、elm7. Ieft>elm7. right)。其中，圖3僅標示部分頁面元素的位置信息。于本實施例中，所述數(shù)組maskArray中每個頁面元素與待顯示的功能區(qū)塊頁面元素的位置關系的比較方法為所述javascript程序分別獲取所述數(shù)組maskArray中保存的頁面元素及待顯示的功能區(qū)塊頁面元素的右邊線位置信息并進行比較及左邊線位置信息并進行比較，比較后獲得所述頁面元素及待顯示的功能區(qū)塊頁面元素的右邊線位置的較小值及左邊線位置的較大值，若所述右邊線位置的較小值小于或等于所述左邊線位置的較大值，則所述頁面元素及待顯示的功能區(qū)塊頁面元素不交疊。例如由圖3可知，所述javascript程序分別獲取頁面元素elm2的右邊線位置信息(即，elm2. right)及待顯示的功能區(qū)塊頁面元素b的右邊線位置信息(S卩，b. right)并進行比較得到兩者的較小值(即，elm2. right),同時所述javascript程序獲取頁面元素elm2的左邊線位置信息(即，elm2.left)及功能區(qū)塊頁面元素b的左邊線位置信息(即，b. left)并進行比較得到兩者的較大值(即，b.left)。如圖3所示，頁面元素elm2與功能區(qū)塊頁面元素b的右邊線位置的較小值(即，elm2. right)小于左邊線位置的較大值(即，b.left)。因此，頁面元素elm2與功能區(qū)塊頁面元素b不交疊。同理，頁面元素elm3與功能區(qū)塊頁面元素b的右邊線位置的較小值(S卩，b. right)小于左邊線位置的較大值(即，elm3. left)，因此，頁面元素elm3與功能區(qū)塊頁面元素b不交疊。于本實施例中，所述數(shù)組maskArray中每個頁面元素與待顯示的功能區(qū)塊頁面元素的位置關系的比較方法亦可為所述javascript程序分別獲取所述數(shù)組maskArray中保存的頁面元素及待顯示的功能區(qū)塊頁面元素的上邊線位置信息并進行比較及下邊線位置信息并進行比較，比較后獲得所述頁面元素及待顯示的功能區(qū)塊頁面元素的上邊線位置的較小值及下邊線位置的較大值，若所述上邊線位置的較小值小于或等于下邊線位置的較大值，則所述頁面元素及待顯示的功能區(qū)塊頁面元素不交疊。例如由圖3所示，所述javascript程序分別獲取頁面元素elml的上邊線位置信息(即，elml. top)及待顯示的功能區(qū)塊頁面元素b的上邊線位置信息(即，b. top)并進行比較得到兩者的較小值(即，b. top),同時所述javascript程序分別獲取頁面元素elml的下邊線位置信息(即，elml.、bottom)及功能區(qū)塊頁面元素b的下邊線位置信息(即，b. bottom)并進行比較得到兩者的較大值(即，elml. bottom)。如圖3所示,頁面元素elml與功能區(qū)塊頁面元素b的上邊線位置的較小值(即，b. top)小于下邊線位置的較大值(即，elml. bottom)。因此，頁面元素elml與功能區(qū)塊頁面元素b不交 疊。于本實施例中，需注意的是，只要滿足上述兩種比較條件的任意一種，則可確定頁面元素與功能區(qū)塊頁面元素不交疊。于步驟104，根據(jù)更新的所述數(shù)組maskArray中的位置信息輸出待顯示的功能區(qū)塊頁面元素。如圖3所示，當功能區(qū)塊頁面元素a及b將遮罩層進行分割后，數(shù)組maskArray中最后保存的位置信息例如可表不為elml. top、elml. bottom、elml. left、elml. right ；elm2. top、elm2. bottom、elm2. left、elm2. right ；elm3. top、elm3. bottom、elm3. left、elm3. right ；elm5. top、elm5. bottom、elm5. left、elm5. right ；elm6. top、elm6. bottom、elm6. Ieft、elm6. right ；elm7. top、elm7. bottom、elm7. Ieft、elm7. right。此時，根據(jù)數(shù)組maskArray中保存的上述信息可僅顯示功能區(qū)塊頁面元素a及b,同時遮蔽不需要的功能區(qū)塊頁面元素。此外，于實際應用中，還可輸出提示塊用于輸出用戶提示信息，從而給用戶操作指導。此外，于本實施例中，于待顯示的功能區(qū)塊頁面元素顯示后執(zhí)行前，服務器判斷后續(xù)操作的功能區(qū)塊頁面元素并顯示所述后續(xù)操作的功能區(qū)塊頁面元素。功能區(qū)塊頁面元素對應的后續(xù)操作例如下表所示。
當前顯示的功能區(qū)塊頁面元素后續(xù)必然操作的功能區(qū)塊頁面元素
功能區(qū)塊頁面元素a功能區(qū)塊頁面元素I
功能區(qū)塊頁面元素b功能區(qū)塊頁面元素2
功能區(qū)塊頁面元素c功能區(qū)塊頁面元素I
功能區(qū)塊頁面元素d功能區(qū)塊頁面元素I如上表所示，在功能區(qū)塊頁面元素a顯示后執(zhí)行前，服務器根據(jù)上表判斷得到功能區(qū)塊頁面元素a的后續(xù)操作為功能區(qū)塊頁面元素1，則自動顯示功能區(qū)塊頁面元素I。此外，于其他實施例中，于待顯示的功能區(qū)塊頁面元素顯示且執(zhí)行后，服務器判斷后續(xù)操作的功能區(qū)塊頁面元素并顯示所述后續(xù)操作的功能區(qū)塊頁面元素?；蛘?，于待顯示的功能區(qū)塊頁面元素顯示并執(zhí)行時，服務器判斷后續(xù)操作的功能區(qū)塊頁面元素并顯示所述后續(xù)操作的功能區(qū)塊頁面元素。此外，當引導用戶完成相關操作之后，清除所有遮罩層，并清空遮罩層數(shù)組maskArrayo綜上所述，根據(jù)本發(fā)明較佳實施例提供的頁面分割顯示方法，所述javascript程序根據(jù)數(shù)組maskArray及數(shù)組boxes保存的位置信息依次比較遮罩層與待顯示的功能區(qū)塊頁面元素的位置關系，若所述待顯示的功能區(qū)塊頁面元素與所述遮罩層存在交疊，則以所述待顯示的功能區(qū)塊頁面元素分割所述遮罩層，并將分割后遮罩層的位置信息更新至數(shù)組maskArray,并根據(jù)更新的數(shù)組maskArray中的位置信息輸出待顯示的功能區(qū)塊頁面元素。如此，可以將不必要的內容進行遮蔽，僅為用戶提供相關功能所需的頁面顯示，使得用戶不會跳過引導操作。同時，將待顯示的功能區(qū)塊頁面元素顯示后，可保持上述功能區(qū)塊的可操作性，從而達到理想的引導操作目的，另外，整個流程給予用戶明確的操作步驟提示，提高用戶體驗。以上所述僅為本發(fā)明的優(yōu)選實施例而已，并不用于限制本發(fā)明，對于本領域的技 術人員來說，本發(fā)明可以有各種更改和變化。凡在本發(fā)明的精神和原則之內，所作的任何修改、等同替換、改進等，均應包含在本發(fā)明的保護范圍之內。
權利要求
1.一種頁面分割顯示方法，其特征在于，包括以下步驟 用戶打開頁面，頁面加載完成后，調用javascript程序創(chuàng)建遮罩層，所述遮罩層覆蓋整個頁面，所述javascript程序將所述遮罩層的位置信息保存至數(shù)組maskArray ； 所述javascript程序獲取所述頁面上待顯示的功能區(qū)塊頁面元素，并將所述功能區(qū)塊頁面元素的位置信息保存至數(shù)組boxes ； 所述javascript程序根據(jù)數(shù)組maskArray及數(shù)組boxes保存的位置信息依次比較遮罩層與待顯示的功能區(qū)塊頁面元素的位置關系，若所述待顯示的功能區(qū)塊頁面元素與所述遮罩層存在交疊，則以所述待顯示的功能區(qū)塊頁面元素分割所述遮罩層，并將分割后遮罩層的位置信息更新至數(shù)組maskArray ； 所述javascript程序根據(jù)更新的所述數(shù)組maskArray中的位置信息輸出待顯示的功能區(qū)塊頁面元素。
2.根據(jù)權利要求I所述的頁面分割顯示方法，其特征在于，初始時創(chuàng)建的遮罩層用元素elm表示，且所述數(shù)組maskArray存儲所述元素elm的上下左右的位置信息。
3.根據(jù)權利要求I所述的頁面分割顯示方法，其特征在于，當所述遮罩層被分割后，所述數(shù)組maskArray保存多個頁面元素，且每個頁面元素及待顯示的功能區(qū)塊頁面元素呈矩形。
4.根據(jù)權利要求3所述的頁面分割顯示方法，其特征在于，所述javascript程序依次比較所述數(shù)組maskArray中每個頁面元素與待顯示的功能區(qū)塊頁面元素的位置關系，所述javascript程序分別獲取所述數(shù)組maskArray中保存的頁面元素及待顯示的功能區(qū)塊頁面元素的右邊線位置信息并進行比較及左邊線位置信息并進行比較，比較后獲得所述數(shù)組maskArray中保存的頁面元素及待顯示的功能區(qū)塊頁面元素的右邊線位置的較小值及左邊線位置的較大值，若所述右邊線位置的較小值小于或等于所述左邊線位置的較大值，則所述頁面元素及待顯示的功能區(qū)塊頁面元素不交疊。
5.根據(jù)權利要求3所述的頁面分割顯示方法，其特征在于，所述javascript程序依次比較所述數(shù)組maskArray中每個頁面元素與待顯示的功能區(qū)塊頁面元素的位置關系，所述javascript程序分別獲取所述數(shù)組maskArray中保存的頁面元素及待顯示的功能區(qū)塊頁面元素的上邊線位置信息并進行比較及下邊線位置信息并進行比較，比較后獲得所述數(shù)組maskArray中保存的頁面元素及待顯示的功能區(qū)塊頁面元素的上邊線位置的較小值及下邊線位置的較大值，若所述上邊線位置的較小值小于或等于下邊線位置的較大值，則所述頁面元素及待顯示的功能區(qū)塊頁面元素不交疊。
6.根據(jù)權利要求I所述的頁面分割顯示方法，其特征在于，于待顯示的功能區(qū)塊頁面元素顯示后執(zhí)行前，服務器判斷后續(xù)操作的功能區(qū)塊頁面元素并顯示所述后續(xù)操作的功能區(qū)塊頁面元素。
7.根據(jù)權利要求I所述的頁面分割顯示方法，其特征在于，于待顯示的功能區(qū)塊頁面元素顯示且執(zhí)行后，服務器判斷后續(xù)操作的功能區(qū)塊頁面元素并顯示所述后續(xù)操作的功能區(qū)塊頁面元素。
8.根據(jù)權利要求I所述的頁面分割顯示方法，其特征在于，于待顯示的功能區(qū)塊頁面元素顯示后執(zhí)行時，服務器判斷后續(xù)操作的功能區(qū)塊頁面元素并顯示所述后續(xù)操作的功能區(qū)塊頁面元素。
全文摘要
本發(fā)明提供一種頁面分割顯示方法。上述方法包括以下步驟用戶打開頁面，頁面加載完成后，調用javascript程序創(chuàng)建遮罩層，所述遮罩層覆蓋整個頁面，所述javascript程序將所述遮罩層的位置信息保存至數(shù)組maskArray；所述javascript程序獲取所述頁面上待顯示的功能區(qū)塊頁面元素，并將所述功能區(qū)塊頁面元素的位置信息保存至數(shù)組boxes；所述javascript程序根據(jù)數(shù)組maskArray及數(shù)組boxes保存的位置信息依次比較遮罩層與待顯示的功能區(qū)塊頁面元素的位置關系，若所述待顯示的功能區(qū)塊頁面元素與所述遮罩層存在交疊，則以所述待顯示的功能區(qū)塊頁面元素分割所述遮罩層，并將分割后遮罩層的位置信息更新至數(shù)組maskArray；所述javascript程序根據(jù)更新的所述數(shù)組maskArray中的位置信息輸出待顯示的功能區(qū)塊頁面元素。
文檔編號G06F17/30GK102662958SQ20121005636
公開日2012年9月12日 申請日期2012年3月6日 優(yōu)先權日2012年3月6日
發(fā)明者胡加明 申請人:蘇州闊地網絡科技有限公司