fineuipro/mvc/core的下個版本(v6.1.0),我們對核取方塊進行了增強,通過乙個屬性啟用開關樣式。
先來看下示例效果,淺色主題(pure black):
深色主題(dark hive):
在這個更新中,我們為checkbox控制項新增了如下 4 個屬性:
在上述例子中,我們分別演示了如下幾種使用場景:
不顯示開關文字
自定義開關文字
自定義開關文字(圖示)
自定義開關文字(長文字,需要css配合)
部分頁面標籤**如下:
<對於最後乙個比較長的自定義文字,還需要簡單的css樣式來配合:f:checkbox
id="checkbox1"
showlabel
="false"
runat
="server"
text
="核取方塊"
displaytype
="switch"
checked
="true"
>
f:checkbox
>
<
f:checkbox
id="checkbox3"
label
="開關文字"
runat
="server"
checked
="true"
displaytype
="switch"
showswitchtext
="true"
>
f:checkbox
>
<
f:checkbox
id="checkbox4"
label
="開關文字(自定義)"
runat
="server"
displaytype
="switch"
showswitchtext
="true"
switchontext
="1"
switchofftext
="0"
>
f:checkbox
>
<
f:checkbox
id="checkbox5"
label
="開關文字(圖示字型)"
runat
="server"
displaytype
="switch"
showswitchtext
="true"
>
f:checkbox
>
<
f:checkbox
id="checkbox6"
cssclass
="mycheckbox"
label
="開關文字(自定義)"
runat
="server"
displaytype
="switch"
showswitchtext
="true"
switchontext
="開啟"
switchofftext
="關閉"
>
f:checkbox
>
<官網示例已更新:style
>
.mycheckbox .f-field-checkbox-switch .f-field-checkbox-switch-text
style
>
layui新增核取方塊 layui核取方塊使用介紹
layui核取方塊 效果圖layui核取方塊,乙個主的核取方塊控制多個從核取方塊,主核取方塊和從核取方塊的顏色不一樣 layui核取方塊的樣式,都是在選然後才會有的,所以直接通過css設定就實現不了了。只可以通過js動態設定 html 使用了jfinal的模板 i18n.get 所屬校區 for c...
layui新增核取方塊 layui核取方塊使用介紹
layui核取方塊 效果圖layui核取方塊,乙個主的核取方塊控制多個從核取方塊,主核取方塊和從核取方塊的顏色不一樣 layui核取方塊的樣式,都是在選然後才會有的,所以直接通過css設定就實現不了了。只可以通過js動態設定 html 使用了jfinal的模板 i18n.get 所屬校區 for c...
checkbox核取方塊樣式
隨著現代瀏覽器的流行,純css設定checkbox也變的很是實用,下面會講到5種與眾不同的checkbox核取方塊。首先,需要新增一段css隱藏所有的checkbox核取方塊,下面我們會改變它的外觀。要做到點需要新增一段 到你的css檔案中。隱藏預設的checkbox input type chec...