[發(fā)明專利]一個(gè)基于js的下拉選擇組件及其方法

在審

• 申請(qǐng)?zhí)枺?/td>: 201710033695.7
• 申請(qǐng)日: 2017-01-18
• 公開(kāi)（公告）號(hào): CN106775771A
• 公開(kāi)（公告）日: 2017-05-31
• 發(fā)明（設(shè)計(jì)）人: 馮永青;孫思清;靳志凱
• 申請(qǐng)（專利權(quán)）人: 鄭州云海信息技術(shù)有限公司
• 主分類號(hào): G06F9/44
• 分類號(hào): G06F9/44;G06F9/455;G06F3/0482
• 代理公司: 濟(jì)南信達(dá)專利事務(wù)所有限公司37100
• 代理人: 韓月娥

技術(shù)領(lǐng)域

本發(fā)明涉及前端技術(shù)領(lǐng)域，具體的說(shuō)是一個(gè)基于js的下拉選擇組件及其方法。

背景技術(shù)

近年來(lái)隨著前端技術(shù)的不斷發(fā)展，web界面的功能越來(lái)越豐富多彩及越來(lái)越多元化。頁(yè)面功能的豐富與強(qiáng)大離不開(kāi)大量的前端代碼，這也就導(dǎo)致了前端代碼越來(lái)越多，越來(lái)越臃腫。通常，在一個(gè)web項(xiàng)目中會(huì)多次用到不同頁(yè)面上的功能可以通過(guò)封裝，來(lái)達(dá)到減少程序代碼，優(yōu)化程序的效果。

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

本發(fā)明針對(duì)目前技術(shù)發(fā)展的需求和不足之處，提供一個(gè)基于js的下拉選擇組件的方法。

本發(fā)明所述一個(gè)基于js的下拉選擇組件及其方法，解決上述技術(shù)問(wèn)題采用的技術(shù)方案如下：所述一個(gè)基于js的下拉選擇組件的方法，主要包括如下步驟：1）定義對(duì)外提供的接口函數(shù)，2）定義配置項(xiàng)的默認(rèn)值，3）讀取接口的傳入?yún)?shù)，4）根據(jù)參數(shù)model與group的值生成不同的下拉組件，包括單選分組、單選不分組、多選分組和多選不分組，5）讀取參數(shù)action的值，6）在用戶選擇完成，點(diǎn)擊確定按鈕后執(zhí)行action對(duì)應(yīng)的函數(shù)操作。

本發(fā)明中所述下拉選擇組件支持單選與多選，全選以及分組全選，并且組件對(duì)外提供一個(gè)接口；程序通過(guò)調(diào)用此接口并傳入相關(guān)的配置項(xiàng)，能夠生成一個(gè)下拉選擇組件。

本發(fā)明所述一個(gè)基于js的下拉選擇組件及其方法與現(xiàn)有技術(shù)相比具有的有益效果是：本發(fā)明通過(guò)封裝一個(gè)基于js的下拉選擇組件的方法，并對(duì)外提供接口及配置參數(shù)，實(shí)現(xiàn)多選、單選功能以及分組多選功能，有效減少前端代碼量以及統(tǒng)一頁(yè)面下拉選擇組件的樣式，提高了代碼質(zhì)量，通過(guò)封裝的下拉組件，可以使開(kāi)發(fā)者更方便開(kāi)發(fā)有關(guān)下拉功能的模塊，提高了代碼的利用率。

附圖說(shuō)明

附圖1為基于js的下拉選擇組件的方法的流程圖。

具體實(shí)施方式

為使本發(fā)明的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚明白，以下結(jié)合具體實(shí)施例，對(duì)本發(fā)明所述一個(gè)基于js的下拉選擇組件及其方法進(jìn)一步詳細(xì)說(shuō)明。

本發(fā)明提出一個(gè)基于js的下拉選擇組件的方法, 如附圖1所示，主要包括如下步驟：1）定義對(duì)外提供的接口函數(shù)，2）定義配置項(xiàng)的默認(rèn)值，3）讀取接口的傳入?yún)?shù)，4）根據(jù)參數(shù)model與group的值生成不同的下拉組件，包括單選分組、單選不分組、多選分組和多選不分組，5）讀取參數(shù)action的值，6）在用戶選擇完成，點(diǎn)擊確定按鈕后執(zhí)行action對(duì)應(yīng)的函數(shù)操作。

本發(fā)明中所述下拉選擇組件支持單選與多選，全選以及分組全選，并且組件對(duì)外提供一個(gè)接口。程序通過(guò)調(diào)用此接口并傳入相關(guān)的配置項(xiàng)，能夠生成一個(gè)下拉選擇組件,所述下拉選擇組件的樣式是基于js的下拉菜單的樣式。所述下拉選擇組件的配置項(xiàng)主要用來(lái)決定組件的模式、傳入選擇菜單的數(shù)據(jù)、下拉框的相對(duì)位置以及選擇后的操作等。所述下拉選擇組件的模式分為兩種：?jiǎn)芜x和多選；下拉框的相對(duì)位置分為三種：居左、居中和居右；選擇菜單的數(shù)據(jù)可以為一維數(shù)組也可以為二維數(shù)組。

實(shí)施例：

本實(shí)施例所述基于js的下拉選擇組件,所述1）定義對(duì)外提供的接口函數(shù)是指，封裝下拉選中組件dropChosen.js，對(duì)外提供接口$.fn.dropchosen()。以多個(gè)參數(shù)的形式或一個(gè)對(duì)象參數(shù)的形式進(jìn)行接口參數(shù)傳入。

以多個(gè)參數(shù)的形式進(jìn)行接口參數(shù)傳入，組件默認(rèn)支持5個(gè)參數(shù)，第一個(gè)為組件的模式，第二個(gè)為數(shù)據(jù)，第三個(gè)為選中后執(zhí)行函數(shù)，第四個(gè)與第五個(gè)不是必須參數(shù)分別為下拉框位置及選項(xiàng)是否分組，這兩個(gè)參數(shù)的默認(rèn)值為‘left’與false。形式如下：

$.fn.dropchosen(‘radio’, [‘選項(xiàng)一’，‘選項(xiàng)二’，‘選項(xiàng)三’]，function（）{//選擇后處理函數(shù)}，[‘left’,[false]])。

以一個(gè)對(duì)象參數(shù)的形式進(jìn)行接口參數(shù)傳入，則能夠傳入多個(gè)配置項(xiàng)，形式如下：

$.fn.dropchosen（{

model: ‘radio’,

data: [‘選項(xiàng)一’，‘選項(xiàng)二’，‘選項(xiàng)三’],

position: ‘left’，

group: false,

action: funcrion() {

//選擇后處理函數(shù)

}

}）。