整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML DOM Radio 對象

          Radio Object

          Radio 對象代表 HTML 表單中的單選按鈕。

          在 HTML 表單中 <input type="radio"> 每出現一次,一個 Radio 對象就會被創建。

          單選按鈕是表示一組互斥選項按鈕中的一個。當一個按鈕被選中,之前選中的按鈕就變為非選中的。

          當單選按鈕被選中或不選中時,該按鈕就會觸發 onclick 事件句柄。

          您可通過遍歷表單的 elements[] 數組來訪問 Radio 對象,或者通過使用 document.getElementById()。

          Radio 對象屬性

          W3C: W3C 標準。

          屬性描述W3C
          checked設置或返回單選按鈕的狀態。Yes
          defaultChecked返回單選按鈕的默認狀態。Yes
          disabled設置或返回是否禁用單選按鈕。Yes
          form返回一個對包含此單選按鈕的表單的引用。Yes
          name設置或返回單選按鈕的名稱。Yes
          type返回單選按鈕的表單類型。Yes
          value設置或返回單選按鈕的 value 屬性的值。Yes

          標準屬性和事件

          Radio對象同樣支持標準的 屬性 和 事件。

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          家好,這節來繼續學習Web。單選和Webbox。多選,單選和多選一般應用在哪?單選主要應用在比如說選擇一些性別,或者說選擇一個你所在的城市,這種只可以有一個選項的業務場景,一般就用單選來實現。

          Webbox一般用于多選,比如說你的愛好,或說你比較關注的一些關注的一些事情的主題,這些是不都是一種多選場景,一一來看。

          先看一下Web,還是一樣打開之前建的demo項目,然后上課的內容,也就每節課的密碼,老師都會把它整理好,針對上一節的視頻給同伴發給大家,所以大家不用、不用著急。就后續的這源碼都是這樣會給的。

          我這塊提前把這個結構建好了,不每次都重新建了,直接就可以進入到Web標簽的學習。

          現在比如說要做一個選擇性的標簽,先寫一個標題,有選擇性別,我用Web做了個標題,然后還是Web,它的類型是什么?Web意思就是一個單選,比如男,那還有什么?我再用一個Web換行,再寫一個音譜的,然后Web是女,這樣寫了兩個單選標簽對吧?

          之前上節課Webtype類型是什么?包括這個password都是一個輸入類型,現在變成Web看一下什么效果。右鍵運行運行之后大家看到這是不是有兩個小圓點,這塊就是一個單選。其實當我點擊這個圓點的時候就會選中,當我再點女的時候大家注意,是不是兩個都選中了?這是為什么?

          原因很簡單,因為要配置一個單選,單位需要給一個內幕屬性,并且這個內幕屬性的值必須是一樣的,比如就叫他sexy,然后下面也要配置一個Web。

          然后再刷新這個界面,再試一下重新選一下試試。當我點這個Web的時候選中了男,當我選點女的時候大家注意,不就選中了這個女,沒有說兩個都可以選了。

          至于為什么?這個Web的屬性必須是一樣的,因為后續在這個索取的時候就獲取Web內容的時候,是通過內放表單的方式去獲取,所以這兩個必須設置成一樣的,它是一個要求。

          還有一個什么屬性?也很重要,就是Web,比如END是悶和。那Web是干嘛的?其實就是在后續獲取單選按鈕的時候,它會取的值,當我選男的時候,這個地方獲取到的值就是Web,當我取女的時候獲取到的值就是woman,那么這里邊是不可以改。當我取娶男的時候娶女的時候比如零,一來代表都是可以的,甚至可以用中文去代表也沒有任何問題。

          但是一般從后臺數據庫的設置角度要么就用零一數字來代替,要么就是用一個字母串,字母就剛才的悶、無悶來代替,這都是有可能的。當然這節課的重點主要是學習單選標簽的使用。

          如果我還想做一個什么?做一個城市所在城市,是不是依然也可以用單選按鈕?我把上面拿過來,直接考過來。然后從這塊做hr中線,把它區分一下,城市類型是不還是單選?然后這個地方是可以用city?其實name就是一個標識,只要保證它是一樣的就可以了。

          至于這個值就自己隨便設置了。然后再刷新一下界面,看一下是不這塊有了兩個單選,并且上面是不可以分開選擇,注意是不可以分開選。當然內幕值不要是也設置成sex,一旦把四個都設置成一樣會出現什么效果?就是四個是不是只能有一個被選中?所以如果有多個單選項,內拇指分開設置成一樣的就可以了。

          這個就是單選按鈕,繼續往下看下面是checkbox多選按鈕,就是說選愛好、關注的人都是多項選擇的業務,就可以用拆boss來實現拆boss其實也是屬于音譜的標簽,只是它的類型是拆個boss,可以看一下,這塊老樣子給它區分,先用一個線把它分開。

          下面做一個什么?你的愛好,我是不首先Web站姿-tap是什么?checkbox,看id給提示了有這樣的屬性。比如足球,比如現在要做一個愛好選擇?這個內幕給一個,給一個內幕,一定要保證內幕是一致的,復制四個籃球。哪個籃?乒乓球、羽毛球。四個球類運動。

          現在如果去選是不是就可以進行多項選擇?可以看下效果,多選它的樣子是不和單選有點區別。單選是一個小圓球,多選是一個正方形,點擊勾一個兩個,是不是可以多選?

          注意,雖然name設置的是一樣的,但是可以進行多選的和單選。是不是有點區別?內幕設置一樣的目的是什么?其實也是為了在最后放表單做數據獲取的時候是通過對稱,然后把整個多選的屬性給獲取出來,這個就是多項選擇。

          再往下還有一個默認選中。默認選中是干嘛?就是當我進到一個界面,其實現在就拿的性別來說,不外乎圖中說了,除了男就是女,可能還有一個中性。現在性別也不一定是男和女?當然,正常來說,可能比如做了一個游戲網站,想做一個數據收集,是比較多的呀,我默認想讓他一進來就選擇男性就選中男性,就給一個默認值。其實給默認值用戶體驗比較好,用戶不用單獨再去點一下。其實我本來就是男的,我一刷新這個默認選中的難我就跳過這個屬性了,我就不用再去點一下。其實就是做這樣的事情,這個也非常常見。

          怎么去做呢?只要使用checkbox的屬性就可以了。既然是一個屬性,我是不是就可以直接把這個設置到這就行了,就這樣設置一個chicken。設置好之后刷新看一下效果,是不是某人選中了,那我換一下。是不是默認選中了女?這就是一個check的屬性,多選也是一樣,如果想讓他默認就選中足球籃球,那就給足球籃球設置兩個check的分別設置,這樣當我一旦刷新界面,也就是一進來界面的時候,這個愛好默認就會選中足球和籃球,看一下效果。

          當然選中以后還是可以取消掉的,最終提交的數據肯定還是在提交表單的那一刻界面上這些選擇為準,并不是默認選中以后就無法做更改了。這個就是一個單選和一個多選。

          這節課就到這里。

          輯導語:本文作者分享了有關Radio Button、Tabs 和 Segmented組件的用法問題,講述了Radio Button、Tabs 和 Segmented 組件在用法上的區別以及聯系,以及總結了幾個組件各自的功能特點,一起來學習一下吧,希望對你有幫助。

          最近很多同學問我有關 Radio Button、Tabs 和 Segmented 組件的用法問題,它們到底在用法上有什么區別?又有什么聯系?

          一、組件的功能特點分析

          先看看這幾個組件各自的功能特點:

          1. 單選|Radio

          單選(Radio)組件常用于在多個備選項中選擇某個單個選項。

          △各種樣式的單選(Radio)

          單選(Radio)組件的設計思路來源于老式收音機上的按鈕,一排按鈕,按下其中一個,其他的按鈕就會彈起來,因此被叫做 Radio Button 并沿用至今。

          △ 老式收音機上的按鈕

          單選(Radio)組件在用法上有以下特點:

          • 所有選項可見,用戶可以一邊比較一邊選擇;
          • 選項不宜過多,2-5 個為宜;
          • 可以獨立存在,應用場景中不一定帶有與之聯動的其他內容。

          所以我們可以認為Radio 組件可以使用戶直接做決策,即用戶在比較完選項的優劣之后,就可以做出最終的判斷和選擇。組件的功能側重點在于選項比較輸入決策

          2. 分段控制器|Segmented

          分段控制器(Segmented/Segmented Control)用于展示多個選項及其相關的信息,并允許用戶選擇其中單個選項,查看信息。

          △各種樣式的分段控制器(Segmented)

          細心的你可能發現,分段控制器(Segmented)和單選(Radio)在有些樣式上幾乎一樣,這點我們稍后再展開說明。分段控制器(Segmented)組件在用法上有以下特點:

          • 通常帶有與選項相關的關聯內容,當切換選中選項時,其關聯的區域內容也會發生變化;
          • 選項不宜過多,2-5 個為宜。

          分段控制器(Segmented)組件所包含的內容和信息可以更多樣。用戶在點擊某個選項之后,通常會進行其他相關操作,包括閱讀相關信息、查看表單數據等。

          因此我們可以理解為:用戶操作Segmented并不用于輸入或決策,組件的功能側重點更多在于信息呈現

          △ iOS Health 中的分段控制器用法

          3. 標簽頁|Tabs

          標簽頁(Tabs) 同樣用于展示多個選項和其相關的子級內容及信息,允許用戶選擇單個選項,進行其他操作。

          △各種樣式的標簽頁(Tabs)

          分頁器(Tabs)組件在用法上有以下特點:

          • 可以具備多種層級,即一個 Tab 下還可以使用次級 Tabs;
          • 提供可關閉的功能,可以作為一種臨時標簽使用;
          • 位于某個區域的頂部或內部,起統領作用,帶有關聯內容;
          • 通常情況下,選項的數量沒有限制

          相比于Segmented 和Radio,Tabs 在形式和層級上更為多樣和復雜,更多被用于收納和整理內容,組件的功能側重點在于引導功能,重點應用場景為導航功能框架布局

          二、組件應用場景

          上文我們分析了Radio、Segmented 和 Tabs 組件的功能區別,但在很多實際應用中,尤其是 C 端產品,這三個組件更像是視覺樣式不同的同一類組件。

          例如下圖,在大眾點評和飛豬 App 的應用案例中,我們會發現,某種程度上 Segmented 和 Tabs組件互換后,對于用戶體驗的影響也并不大。

          原因之一是,用戶在比較放松、簡單、快捷的應用場景下,并不會太糾結控件樣式:

          △ 大眾點評 App 和飛豬 App

          而很多設計系統中也沒有對這幾個組件做更嚴苛的規定。以Apple Design為例,官方給出的關于 Segmented 組件的解釋是:

          Like buttons, segments can contain text or images. Segments can also have text labels beneath them(or beneath the control as a whole)。

          也就是說 Segmented 組件在視覺和交互上,既可以像 button 一樣帶有文字和圖片,也可以使用整體帶下劃線的樣式,這就與 Tabs 在外觀上不做區分了。

          再來看看螞蟻集團的 Ant Design,Segmented 組件在 4.0 版本之后才正式提供使用,而 Radio 組件始終包含以下兩種樣式,并沒有在Segmented 組件上線后去掉 button 的樣式。

          因此對于Radio、Segmented 和 Tabs 組件的使用方式,有如下建議:

          1. 不用過分糾結于樣式區別

          對于絕大多數比較簡單、快捷的場景(尤其是 C 端產品),Radio / Tabs / Segmented 可以更多參考頁面的視覺風格和功能需要,來設計組件樣式,并不需要過分糾結于要讓用戶分清楚使用的是哪個組件、是否要遵循一定的樣式原則。

          2. 規范好層級順序

          對于復雜的工具型或企業級產品,規范好這幾個組件的層級順序很重要。比如可以規定帶下劃線的 Tabs 是第一層級和第二層級,按鈕樣式的 Segmented 是第三層級,radio 則用于底層的信息內容中。這樣可以給用戶傳達比較穩定的信息層次關系

          3. 從基礎理念做區分

          如果在某些特殊場景中一定要區分組件,以下總結可以幫助你做選擇:

          • Radio:側重點比較、輸入和決策;
          • Segmented:側重點在于信息呈現;
          • Tabs:側重點在于導航、信息引導和框架布局。

          以上,希望對你有幫助。

          作者:元堯,微信公眾號:長弓小子;

          本文由@ 元堯 原創發布于人人都是產品經理,未經許可,禁止轉載。

          題圖來自 Unsplash,基于 CC0 協議。


          主站蜘蛛池模板: 中文字幕AV一区二区三区人妻少妇| 中文字幕在线不卡一区二区| 国产福利无码一区在线| 久久se精品一区精品二区国产| 亚洲AV成人一区二区三区观看| 精品一区二区三区免费视频| 日韩av片无码一区二区三区不卡 | 国产伦精品一区二区三区视频金莲| 亚洲熟女综合一区二区三区| 香蕉久久av一区二区三区| 国产精品视频一区二区三区不卡| 精品中文字幕一区二区三区四区 | 国产精品一区12p| 国产一区二区三区国产精品| 精品亚洲福利一区二区| 99偷拍视频精品一区二区| 久久中文字幕无码一区二区| AV鲁丝一区鲁丝二区鲁丝三区| 日韩免费无码一区二区三区| 久久久国产精品亚洲一区 | 无码中文人妻在线一区 | 国产午夜精品一区二区三区不卡| 日亚毛片免费乱码不卡一区| 日韩精品一区二区三区中文字幕| 视频一区在线免费观看| 亚洲AⅤ视频一区二区三区| 国产精品 一区 在线| 国产成人综合精品一区| 亚洲熟女少妇一区二区| 久久久久人妻精品一区蜜桃| 91久久精品午夜一区二区| 国产精品亚洲午夜一区二区三区| 久久青青草原一区二区| 国产综合无码一区二区色蜜蜜| 日本一区二区三区在线视频| 人妻少妇一区二区三区| 91久久精品无码一区二区毛片| 国产小仙女视频一区二区三区| 午夜视频久久久久一区 | 亚洲午夜在线一区| 国产日韩精品视频一区二区三区|