很多情況下,我們需要用到Tab 選項卡的情況 例如下麵 註冊審批頁面 這個場景是,註冊審批,包含兩部分,一個是對註冊組織機構的審批,一個是註冊用戶的審批那麼這個需要用個Tab選項卡來實現比較合適,而不是弄兩個功能菜單 那這個頁面怎麼實現呢。 關於Tab的使用,我們有兩種模式。 第一種模式:Tab只是 ...
很多情況下,我們需要用到Tab 選項卡的情況
例如下麵
註冊審批頁面
這個場景是,註冊審批,包含兩部分,一個是對註冊組織機構的審批,一個是註冊用戶的審批
那麼這個需要用個Tab選項卡來實現比較合適,而不是弄兩個功能菜單
那這個頁面怎麼實現呢。
關於Tab的使用,我們有兩種模式。
第一種模式:Tab只是一個管理容器,管理很多Tab選項卡,每個選項卡都是一個獨立的頁面。
第二種模式:Tab頁面是一個整體,裡面的Tab是這個頁面的不同部分
先來介紹第一種:
就看上面截圖的這個 註冊審批功能
代碼就如上,敏捷開發框架 設計了 EciTab組件
變化的需求來了,如果希望第二個Tab預設選中怎麼辦
註意,除了顯示的頁面使用url 其它的頁面建議都用 lazyUrl來實現
這樣可以實現不不要的載入不載入
url lazyUrl的設置 可以設計時在 DOM中維護
也可以通過 編程方式設置
tab.loadUrl(id,url)
tab.lazyUrl(id,url)
具體到子頁面里的功能就不介紹了,都之前介紹的簡單查詢頁面模型的開發
第二種模式:Tab頁面是一個整體,裡面的Tab是這個頁面的不同部分
兩種模式怎麼選擇。
例如上例
基本屬性、擴展屬性,通過不同的分類,將頁面的欄位項進行歸類整理
但是保存是要一起保存的,這個時候,如果每個Tab做成不同的頁面,功能就無法實現了。
通過這個實際場景的例子,大家應該大體知道什麼情況下用什麼樣的模式了。