一種浮動層設(shè)置方法、裝置及電子設(shè)備的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及數(shù)據(jù)處理技術(shù)領(lǐng)域，更具體地說，涉及一種浮動層設(shè)置方法、裝置及電子設(shè)備。
【背景技術(shù)】
[0002]浮動層為網(wǎng)頁效果中的一種形式，其表現(xiàn)樣式為始終顯示在屏幕的特定位置上，不跟隨鼠標(biāo)的滾動而滾動以達(dá)到強(qiáng)調(diào)其內(nèi)容或者銜接上下文解釋說明的效果。hover浮動層為一種可在鼠標(biāo)移動到浮動層位置，則顯示，鼠標(biāo)移出浮動層位置，則隱藏的浮動層；即hover浮動層可在mouseover事件觸發(fā)時(shí)顯示，在mouseout事件觸發(fā)時(shí)隱藏。
[0003]hover是指:一個(gè)模仿懸停事件(鼠標(biāo)移動到一個(gè)對象上面及移出這個(gè)對象)的方法。這是一個(gè)自定義的方法，它為頻繁使用的任務(wù)提供了一種“保持在其中”的狀態(tài)，當(dāng)鼠標(biāo)移動到一個(gè)匹配的元素上面時(shí)，會觸發(fā)指定的第一個(gè)函數(shù)，當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)，會觸發(fā)指定的第二個(gè)函數(shù)；而且，會伴隨著對鼠標(biāo)是否仍然處在特定元素中的檢測(例如，處在div中的圖像)，如果是，則會繼續(xù)保持“懸?！睜顟B(tài)，而不觸發(fā)移出事件。
[0004]本發(fā)明的發(fā)明人在研究過程中發(fā)現(xiàn):在hover浮動層的展示過程中,hover浮動層經(jīng)常會出現(xiàn)浮動層內(nèi)信息排布雜亂的情況，如mouseover事件觸發(fā)后,hover浮動層常會出現(xiàn)浮動層內(nèi)信息排布雜亂的情況；因此提供一種浮動層設(shè)置方法以解決現(xiàn)有浮動層內(nèi)信息排布雜亂的問題，成為本領(lǐng)域技術(shù)人員亟需解決的問題。

【發(fā)明內(nèi)容】

[0005]有鑒于此，本發(fā)明實(shí)施例提供一種浮動層設(shè)置方法、裝置及電子設(shè)備，以解決現(xiàn)有技術(shù)存在的浮動層內(nèi)信息排布雜亂的問題。
[0006]為實(shí)現(xiàn)上述目的，本發(fā)明實(shí)施例提供如下技術(shù)方案:
[0007]—種浮動層設(shè)置方法，包括:
[0008]對浮動層的各結(jié)構(gòu)區(qū)域進(jìn)行信息配置，得到預(yù)定接口的輸入?yún)?shù)，所述輸入?yún)?shù)為浮動層的配置參數(shù)；
[0009]調(diào)用預(yù)定接口 ；
[0010]實(shí)現(xiàn)所述預(yù)定接口的功能，以對所述配置參數(shù)進(jìn)行解析處理，對解析得到的與所述配置參數(shù)對應(yīng)的浮動層html元素進(jìn)行事件注冊，對進(jìn)行事件注冊后的浮動層進(jìn)行渲染處理，完成浮動層的設(shè)置。
[0011]本發(fā)明實(shí)施例還提供一種浮動層設(shè)置裝置，包括:
[0012]配置模塊，用于對浮動層的各結(jié)構(gòu)區(qū)域進(jìn)行信息配置，得到預(yù)定接口的輸入?yún)?shù)，所述輸入?yún)?shù)為浮動層的配置參數(shù)；
[0013]調(diào)用模塊，用于調(diào)用預(yù)定接口 ；
[0014]實(shí)現(xiàn)模塊，用于實(shí)現(xiàn)所述預(yù)定接口的功能，以對所述配置參數(shù)進(jìn)行解析處理，對解析得到的與所述配置參數(shù)對應(yīng)的浮動層html元素進(jìn)行事件注冊，對進(jìn)行事件注冊后的浮動層進(jìn)行渲染處理，完成浮動層的設(shè)置。
[0015]本發(fā)明實(shí)施例還提供一種電子設(shè)備，包括上述所述的浮動層設(shè)置裝置。
[0016]基于上述技術(shù)方案，本發(fā)明實(shí)施例提供的浮動層設(shè)置方法，在對浮動層的各結(jié)構(gòu)區(qū)域進(jìn)行信息配置，得到浮動層的配置參數(shù)后，可通過重新梳理并設(shè)計(jì)的預(yù)定接口以所述配置參數(shù)作為輸入?yún)?shù)實(shí)現(xiàn)預(yù)定接口的功能，從而完成浮動層的設(shè)置。本發(fā)明實(shí)施例提供的浮動層設(shè)置方法，將完成浮動層設(shè)置所需的解析處理、事件注冊和渲染處理過程統(tǒng)一到一個(gè)預(yù)定接口中，將浮動層的配置參數(shù)作為預(yù)定接口的輸入?yún)?shù)，通過實(shí)現(xiàn)預(yù)定接口的功能，完成對配置參數(shù)進(jìn)行解析處理，對解析得到的與所述配置參數(shù)對應(yīng)的浮動層html元素進(jìn)行事件注冊，對進(jìn)行事件注冊后的浮動層進(jìn)行渲染處理的過程，從而完成浮動層內(nèi)信息的規(guī)范設(shè)置；并且本發(fā)明實(shí)施例可根據(jù)不同的浮動層配置參數(shù)，定制不同的浮動層結(jié)構(gòu)，完成不同的浮動層的設(shè)置，使得浮動層可展現(xiàn)不同的UI，定制不同的功能，適應(yīng)不同應(yīng)用場景。本發(fā)明實(shí)施例提供的浮動層設(shè)置方法實(shí)現(xiàn)了浮動層內(nèi)信息的規(guī)范設(shè)置，解決了解決現(xiàn)有浮動層內(nèi)信息排布雜亂的問題；同時(shí)，可根據(jù)不同的浮動層配置參數(shù)，使得浮動層可展現(xiàn)不同的UI,定制不同的功能,適應(yīng)不同應(yīng)用場景。
【附圖說明】
[0017]為了更清楚地說明本發(fā)明實(shí)施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對實(shí)施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本發(fā)明的實(shí)施例，對于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動的前提下，還可以根據(jù)提供的附圖獲得其他的附圖。
[0018]圖1為本發(fā)明實(shí)施例提供的浮動層設(shè)置方法的流程圖；
[0019]圖2為對浮動層的各結(jié)構(gòu)區(qū)域進(jìn)行信息配置的示意圖；
[0020]圖3為本發(fā)明實(shí)施例提供的預(yù)定接口的功能實(shí)現(xiàn)流程圖；
[0021]圖4為本發(fā)明實(shí)施例提供的浮動層展示示意圖；
[0022]圖5為本發(fā)明實(shí)施例提供的浮動層設(shè)置方法的另一流程圖；
[0023]圖6為本發(fā)明實(shí)施例提供的浮動層設(shè)置裝置的結(jié)構(gòu)框圖；
[0024]圖7為本發(fā)明實(shí)施例提供的實(shí)現(xiàn)模塊的結(jié)構(gòu)框圖；
[0025]圖8為本發(fā)明實(shí)施例提供的解析單元的結(jié)構(gòu)框圖；
[0026]圖9為本發(fā)明實(shí)施例提供的注冊單元的結(jié)構(gòu)框圖；
[0027]圖10為本發(fā)明實(shí)施例提供的電子設(shè)備的硬件結(jié)構(gòu)框圖。
【具體實(shí)施方式】
[0028]下面將結(jié)合本發(fā)明實(shí)施例中的附圖，對本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例僅僅是本發(fā)明一部分實(shí)施例，而不是全部的實(shí)施例?；诒景l(fā)明中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。
[0029]圖1為本發(fā)明實(shí)施例提供的浮動層設(shè)置方法的流程圖，該方法可應(yīng)用于電子設(shè)備中，電子設(shè)備可以為智能終端設(shè)備(如筆記本電腦等)，服務(wù)器等，參照圖1，該方法可以包括:
[0030]步驟S100、對浮動層的各結(jié)構(gòu)區(qū)域進(jìn)行信息配置，得到預(yù)定接口的輸入?yún)?shù)，所述輸入?yún)?shù)為浮動層的配置參數(shù)；
[0031]步驟S110、調(diào)用預(yù)定接口；
[0032]步驟S120、實(shí)現(xiàn)所述預(yù)定接口的功能，以對所述配置參數(shù)進(jìn)行解析處理，對解析得到的與所述配置參數(shù)對應(yīng)的浮動層html (HyperText Markup language,超文本標(biāo)記語言)元素進(jìn)行事件注冊，對進(jìn)行事件注冊后的浮動層進(jìn)行渲染處理，完成浮動層的設(shè)置。
[0033]可選的，進(jìn)行渲染處理后的浮動層可以在網(wǎng)頁中進(jìn)行展示。
[0034]本發(fā)明實(shí)施例提供的浮動層設(shè)置方法，在對浮動層的各結(jié)構(gòu)區(qū)域進(jìn)行信息配置，得到浮動層的配置參數(shù)后，可通過重新梳理并設(shè)計(jì)的預(yù)定接口以所述配置參數(shù)作為輸入?yún)?shù)實(shí)現(xiàn)預(yù)定接口的功能，從而完成浮動層的設(shè)置。本發(fā)明實(shí)施例提供的浮動層設(shè)置方法，將完成浮動層設(shè)置所需的解析處理、事件注冊和渲染處理過程統(tǒng)一到一個(gè)預(yù)定接口中，將浮動層的配置參數(shù)作為預(yù)定接口的輸入?yún)?shù)，通過實(shí)現(xiàn)預(yù)定接口的功能，完成對配置參數(shù)進(jìn)行解析處理，對解析得到的與所述配置參數(shù)對應(yīng)的浮動層html元素進(jìn)行事件注冊，對進(jìn)行事件注冊后的浮動層進(jìn)行渲染處理的過程，從而完成浮動層內(nèi)信息的規(guī)范設(shè)置；并且本發(fā)明實(shí)施例可根據(jù)不同的浮動層配置參數(shù)，定制不同的浮動層結(jié)構(gòu)，完成不同的浮動層的設(shè)置，使得浮動層可展現(xiàn)不同的UI (User Interface,用戶界面)，定制不同的功能，適應(yīng)不同應(yīng)用場景。本發(fā)明實(shí)施例提供的浮動層設(shè)置方法實(shí)現(xiàn)了浮動層內(nèi)信息的規(guī)范設(shè)置，解決了解決現(xiàn)有浮動層內(nèi)信息排布雜亂的問題；同時(shí)，可根據(jù)不同的浮動層配置參數(shù)，使得浮動層可展現(xiàn)不同的UI，定制不同的功能，適應(yīng)不同應(yīng)用場景。
[0035]可選的，對浮動層的各結(jié)構(gòu)區(qū)域進(jìn)行信息配置的過程可為，對浮動層的head區(qū)域(頭部區(qū)域)進(jìn)行信息配置，對body區(qū)域(身體區(qū)域)進(jìn)行信息配置，對footer區(qū)域(尾部區(qū)域)進(jìn)行信息配置。
[0036]可選的，對浮動層的head區(qū)域進(jìn)行信息配置包括在head區(qū)域?qū)Ω訉铀故镜膶ο蟮闹黝}名稱進(jìn)行配置；對body區(qū)域進(jìn)行信息配置包括在body區(qū)域?qū)Ω訉铀故緦ο蟮木唧w內(nèi)容進(jìn)行配置；對footer區(qū)域進(jìn)行信息配置包括在footer區(qū)域?qū)Ω訉铀故緦ο蟮臉I(yè)務(wù)處理內(nèi)容進(jìn)行配置?？蛇x的，本發(fā)明實(shí)施例還可在ex區(qū)域?qū)Ω訉宇惷?，偏移量等信息進(jìn)行配置。對應(yīng)的，圖2示出了一種對衣服進(jìn)行展示的浮動層的各結(jié)構(gòu)區(qū)域進(jìn)行信息配置的示意圖，可進(jìn)行參照。
[0037]可選的，對浮動層的各結(jié)構(gòu)區(qū)域進(jìn)行信息配置的過程在JS中可認(rèn)為是一個(gè)對象，配置得到的浮動層的配置參數(shù)傳遞給預(yù)定接口作為輸入?yún)?shù)
[0038]可選的，本發(fā)明實(shí)施例可定義預(yù)定接口為QS.1tem, detail接口 ；為便于描述，圖3示出了預(yù)定接口的功能實(shí)現(xiàn)流程圖，參照圖3，該流程可以包括:
[0039]步驟S200、對浮動層的配置參數(shù)進(jìn)行解析，得到與所述配置參數(shù)對應(yīng)的浮動層html元素；
[0040]可選的，具體的解析方式可采用遞歸解析，本發(fā)明實(shí)施例可對浮動層的配置參數(shù)進(jìn)行遞歸解析處理，得到與所述配置參數(shù)對應(yīng)的浮動層html元素。
[0041]可選的，本發(fā)明實(shí)施例可根據(jù)浮動層數(shù)據(jù)和功能模板碎片對浮動層的配置參數(shù)進(jìn)行遞歸解析處理；其中，浮動層數(shù)據(jù)定義了具體業(yè)務(wù)需要的數(shù)據(jù)，如:浮動層上的圖片地址等；功能模板碎片可認(rèn)為是一個(gè)html結(jié)構(gòu)片段，html結(jié)構(gòu)片段中的預(yù)置位置的數(shù)據(jù)為需要用浮動層數(shù)據(jù)替換的數(shù)據(jù)，如html結(jié)構(gòu)片段中〈％ XXXX% >之間的數(shù)據(jù)為需要用浮動層數(shù)據(jù)替換的數(shù)據(jù)；可選的，功能模板碎片在必要時(shí)也會對數(shù)據(jù)做相應(yīng)的邏輯處理。
[0042]步驟S210、對所述浮動層html元素進(jìn)行事件注冊；
[0043]可選的，本發(fā)明實(shí)施例可通過事件代理的方式對浮動層html元素進(jìn)行事件注冊，從而方便事件處理，不用每個(gè)按鈕點(diǎn)擊對象都綁定事件；具體的，本發(fā)明實(shí)施例可將事件通過event-type (事件類型)屬性定義在html元素上，并通過冒泡方式對事件進(jìn)行捕獲，以執(zhí)行事件對應(yīng)的命令。
[0044]步驟S220、對進(jìn)行事件注冊后的浮動層進(jìn)行渲染處理，完成浮動層的設(shè)置。
[0045]可選的，圖4示出了圖2所示配置所對應(yīng)的浮動層展示示意圖,可進(jìn)行參照。值得注意的是，本發(fā)明實(shí)施例提供的浮動層設(shè)置方法還可應(yīng)用于其他對象的展示，并不一定限于衣服的展示。
[0046]可選的，圖5示出了本發(fā)明實(shí)施例提供的浮動層設(shè)置方法的另一流程圖，參照圖5，該方法可以包括:
[0047]步驟S300、對浮動層的head區(qū)域進(jìn)行信息配置,對body區(qū)域進(jìn)行信息配置,對footer區(qū)域進(jìn)行信息配置，和對ex區(qū)域進(jìn)行信息配置，得到預(yù)定接口的輸入?yún)?shù)，所述輸入?yún)?shù)為浮動層的配置參數(shù)；
[0048]步驟S310、調(diào)用預(yù)定接口；
[0049]步驟S320、通過預(yù)定接口，根據(jù)浮動層數(shù)據(jù)和功能模板碎片對浮動層的配置參數(shù)進(jìn)行遞歸解析處理，得到與所述