一種下拉菜單生成和顯示方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及互聯(lián)網(wǎng)技術(shù)領(lǐng)域，特別涉及一種下拉菜單生成和顯示方法及裝置。
【背景技術(shù)】
[0002]隨著互聯(lián)網(wǎng)的發(fā)展，在計算機應用中，下拉式選單成為選單的一種普遍的表現(xiàn)形式。具體表現(xiàn)為:當用戶選中一個選項后，該選單會向下延伸出具有其他選項的另一個選單。下拉式選單通常應用于把一些具有相同分類的功能放在同一個下拉式選單中，并把這個下拉式選單置于主選單的一個選項下。下拉菜單內(nèi)的項目可以據(jù)需要設(shè)置為多選或單選，可以用來替代一組復選框(設(shè)置為多選)或單選框(設(shè)置為單選)，這樣比復選框組或單選框組的占用位置小。目前，在電子節(jié)目菜單的編輯系統(tǒng)中導出電子節(jié)目菜單時，需要選擇導出一天或者一周的電子節(jié)目菜單，因此，需要設(shè)計一種快捷簡潔的電子節(jié)目菜單的下拉菜單的方案，以便于減少編輯人員的工作量。

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

[0003]本發(fā)明提供一種下拉菜單生成和顯示方法及裝置，用以通過bootstrap中的下拉菜單組件對下拉菜單的觸發(fā)和顯示進行管理，減少了代碼的編寫量，且令下拉菜單顯示的外觀更加簡潔美觀。
[0004]根據(jù)本發(fā)明實施例的第一方面，提供一種下拉菜單生成和顯示方法，包括:
[0005]確定用戶點擊了設(shè)定的按鈕時，根據(jù)預設(shè)的觸發(fā)形式觸發(fā)所述按鈕的下拉菜單；所述預設(shè)的觸發(fā)形式為基于點擊預設(shè)的span元素觸發(fā)；
[0006]按照在Bootstrap定義的所述下拉菜單的顯示方式顯示所述下拉菜單。
[0007]在一個實施例中，所述確定用戶點擊了設(shè)定的按鈕時，根據(jù)預設(shè)的觸發(fā)形式觸發(fā)所述按鈕的下拉菜單；所述預設(shè)的觸發(fā)形式為基于點擊預設(shè)的span元素觸發(fā)之前，包括:
[0008]監(jiān)測所述設(shè)定的按鈕對應的span元素是否被點擊；
[0009]當所述設(shè)定的按鈕對應的span元素被點擊時，確定用戶點擊了設(shè)定的按鈕。
[0010]在一個實施例中，所述span元素中包含設(shè)定的class類，所述設(shè)定的class類用于表征使用Bootstrap定義的下拉菜單樣式顯示下拉菜單。
[0011]在一個實施例中，所述按照在Bootstrap定義的所述下拉菜單的顯示方式顯示所述下拉菜單，包括:
[0012]按照所述設(shè)定的按鈕對應的span元素中包含設(shè)定的class類，調(diào)用預先設(shè)定的Bootstrap,按照所述Bootstrap定義的下拉菜單樣式顯示下拉菜單。
[0013]在一個實施例中，所述下拉菜單中的選項包括:選擇導出一天的電子節(jié)目菜單、選擇導出一周的電子節(jié)目菜單、選擇導出一月的電子節(jié)目菜單、選擇導出所有電子節(jié)目菜單。
[0014]根據(jù)本發(fā)明實施例的第二方面，還提供一種下拉菜單生成和顯示裝置，包括:
[0015]按鈕觸發(fā)模塊，用于確定用戶點擊了設(shè)定的按鈕時，根據(jù)預設(shè)的觸發(fā)形式觸發(fā)所述按鈕的下拉菜單；所述預設(shè)的觸發(fā)形式為基于點擊預設(shè)的span元素觸發(fā)；
[0016]下拉菜單顯示模塊，用于按照在Bootstrap定義的所述下拉菜單的顯示方式顯示所述下拉菜單。
[0017]在一個實施例中，所述裝置還包括:
[0018]監(jiān)測模塊，用于監(jiān)測所述設(shè)定的按鈕對應的span元素是否被點擊；
[0019]點擊確定模塊，用于當所述設(shè)定的按鈕對應的span元素被點擊時，確定用戶點擊了設(shè)定的按鈕。
[0020]在一個實施例中，所述span元素中包含設(shè)定的class類，所述設(shè)定的class類用于表征使用Bootstrap定義的下拉菜單樣式顯示下拉菜單。
[0021]在一個實施例中，所述下拉菜單顯示模塊包括:
[0022]下拉菜單顯示子模塊，用于按照所述設(shè)定的按鈕對應的span元素中包含設(shè)定的class類，調(diào)用預先設(shè)定的Bootstrap，按照所述Bootstrap定義的下拉菜單樣式顯示下拉菜單。
[0023]在一個實施例中，所述下拉菜單中的選項包括:選擇導出一天的電子節(jié)目菜單、選擇導出一周的電子節(jié)目菜單、選擇導出一月的電子節(jié)目菜單、選擇導出所有電子節(jié)目菜單。
[0024]本發(fā)明實施例提供的技術(shù)方案可產(chǎn)生以下有益效果:確定用戶點擊了設(shè)定的按鈕時，根據(jù)預設(shè)的觸發(fā)形式觸發(fā)所述按鈕的下拉菜單；所述預設(shè)的觸發(fā)形式為基于點擊預設(shè)的span元素觸發(fā)；按照在Bootstrap定義的所述下拉菜單的顯示方式顯示所述下拉菜單。該方案通過bootstrap中的下拉菜單組件對下拉菜單的觸發(fā)和顯示進行管理，減少了代碼的編寫量，且令下拉菜單顯示的外觀更加簡潔美觀。
[0025]本發(fā)明的其它特征和優(yōu)點將在隨后的說明書中闡述，并且，部分地從說明書中變得顯而易見，或者通過實施本發(fā)明而了解。本發(fā)明的目的和其他優(yōu)點可通過在所寫的說明書、權(quán)利要求書、以及附圖中所特別指出的結(jié)構(gòu)來實現(xiàn)和獲得。
[0026]下面通過附圖和實施例，對本發(fā)明的技術(shù)方案做進一步的詳細描述。
【附圖說明】
[0027]附圖用來提供對本發(fā)明的進一步理解，并且構(gòu)成說明書的一部分，與本發(fā)明的實施例一起用于解釋本發(fā)明，并不構(gòu)成對本發(fā)明的限制。
[0028]在附圖中:
[0029]圖1為本發(fā)明根據(jù)一示例性實施例示出的一種下拉菜單生成和顯示方法的流程圖；
[0030]圖2為本發(fā)明根據(jù)一示例性實施例示出的另一種下拉菜單生成和顯示方法的流程圖；
[0031]圖3為本發(fā)明根據(jù)一示例性實施例示出的下拉菜單生成和顯示方法中步驟S20的實施方式流程圖；
[0032]圖4為本發(fā)明根據(jù)一示例性實施例示出的一種下拉菜單生成和顯示裝置的框圖；
[0033]圖5為本發(fā)明根據(jù)一示例性實施例示出的又一種下拉菜單生成和顯示裝置的框圖；
[0034]圖6為本發(fā)明根據(jù)一示例性實施例示出的下拉菜單生成和顯示裝置中下拉菜單顯示模塊62的框圖。
【具體實施方式】
[0035]以下結(jié)合附圖對本發(fā)明的優(yōu)選實施例進行說明，應當理解，此處所描述的優(yōu)選實施例僅用于說明和解釋本發(fā)明，并不用于限定本發(fā)明。
[0036]本公開實施例提供了一種下拉菜單生成和顯示方法，用于通過bootstrap (Web前端CSS框架)中的下拉菜單組件對下拉菜單的觸發(fā)和顯示進行管理，減少了代碼的編寫量，且令下拉菜單顯示的外觀更加簡潔美觀。如圖1所示，該方法包括步驟S10-S20:
[0037]在步驟SlO中，確定用戶點擊了設(shè)定的按鈕時，根據(jù)預設(shè)的觸發(fā)形式觸發(fā)所述按鈕的下拉菜單；所述預設(shè)的觸發(fā)形式為基于點擊預設(shè)的span元素觸發(fā)。
[0038]其中，所述按鈕用于控制下拉菜單的顯示，也即，在本公開中，當用戶點擊所述按鈕時，即觸發(fā)了所述按鈕，此時會顯示所述下拉菜單中的各個選項。而預設(shè)的觸發(fā)形式為可以在Bootstrap中的下拉菜單組件中進行設(shè)定和修改，且在本實施例中，預設(shè)的所述按鈕的觸發(fā)形式為點擊預設(shè)的span元素(指定內(nèi)嵌文本容器)觸發(fā)；且所述預設(shè)的span元素可以是用戶預先設(shè)置的圖片，比如，將所述預設(shè)的span元素設(shè)置為一張顯示有“導出”二字的圖片，之后，在點擊這張顯示有“導出”二字的圖片之后，也即觸發(fā)了所述按鈕，此時會直接顯示所述下拉菜單中的選項。
[0039]在一個實施例中，所述下拉菜單中的選項包括:選擇導出一天的電子節(jié)目菜單、選擇導出一周的電子節(jié)目菜單、選擇導出一月的電子節(jié)目菜單、選擇導出所有電子節(jié)目菜單。也即，本實施例中，所述下拉菜單中的選項是針對于電子節(jié)目菜單所需要導出的時間范圍的，因此其不同選項對應于不同的時間范圍，且本公開中所需要導出的電子節(jié)目菜單的時間范圍并不限定于本實施例中所述，而是可以根據(jù)用戶的需要自行定義。
[0040]在步驟S20中，按照在Bootstrap定義的所述下拉菜單的顯示方式顯示所述下拉菜單。也即，在在Bootstrap中可以定義所述下拉菜單的顯示方式，當所述按鈕被觸發(fā)時，可以直接根據(jù)在Bootstrap中定義的所述下拉菜單的顯示方式顯示所述下拉菜單。
[0041]在一個實施例中，所述span元素中包含設(shè)定的class類，所述設(shè)定的class類用于表征使用Bootstrap定義的下拉菜單樣式顯示下拉菜單。也即，可以在預設(shè)所述span元素時設(shè)定Class類，且所述Class類用于表征使用Bootstrap定義的下拉菜單樣式顯示下拉菜單。也就是說，所述Class類也是在bootstrap中進行定義的。且可以根據(jù)設(shè)定的所述Class類表現(xiàn)所述下拉菜單的顯示方式，比如，所述下拉菜單的顯示方式可以為從上至下或從左至右顯示等，這些都可以通過對Class類進行定義來進行設(shè)置和修改。在一個實施例中，如圖3所示，步驟S20可包括:
[0042]步驟S201、按照所述設(shè)定的按鈕對應的span元素中包含設(shè)定的class類，調(diào)用預先設(shè)定的Bootstrap，按照所述Bootstrap定義的下拉菜單樣式顯示下拉菜單。也即，當點擊設(shè)定的按鈕之后，可以根據(jù)預設(shè)的所述span元素中設(shè)定的Class類調(diào)用預