對話方塊有預設標題頭和腳,帶有預設的取消、確定、關閉等按鈕:
對話方塊編輯狀態和執行狀態
UIOTOS中對話方塊屬常見容器,內容由任意其他頁面巢狀而來。如下所示:
UIOTOS中對話方塊巢狀內容頁
那麼問題來了,既然對話方塊內容可任意設計,樣式風格自帶的頭腳不匹配時,如何完全自定義?
UIOTOS支援隱藏預設頭腳,完全交由內嵌頁自定義外觀,支援內嵌頁按鈕設定指定標識,對應對話方塊的取消、確定、關閉等。如下所示:
UIOTOS自定義對話方塊外觀
這就完美了嗎?
不夠!如果對話方塊內容是長頁面,比如表單問卷,顯然還需要加一層滾動頁容器巢狀。
因此,UIOTOS中,除了直接內嵌頁按鈕能配置外,經滾動頁巢狀的更下層頁面按鈕,也同樣支援配置。如下所示:
對話方塊→滾動頁→長頁面
任意層按鈕都支援?
不行!也就是說,直接內嵌頁的按鈕,或者經過一層滾動頁再巢狀的,才被允許配置成彈窗按鈕。
因為要支援多級彈窗,否則二級彈窗關閉時,就會導致初始彈窗也關閉。如下所示:
UIOTOS二級彈窗
一定要用多層巢狀內的按鈕呢?
可以用UIOTOS中的繼承和連線來實現。在最上層對話方塊中,繼承目前內嵌頁按鈕的點選事件,連線指向自身,操作關閉等事件即可,如下所示:
內嵌按鈕連線操作,讓上層對話方塊關閉
關於
UIOTOS是一款前端零程式碼工具,首創頁面巢狀技術,可搭建業務系統、大屏組態、上位機HMI等複雜互動介面,實現與原型1:1的效果。
與NodeRed、APIJSON、IoT平臺,或其他低程式碼平臺等,形成前後端一體方案(有後端API介面即可),快速交付工業、IoT等專案。
示例:組態HMI
示例:業務系統
聯絡
上一篇前端零程式碼-原理:與巢狀頁面內的元件通訊