新特性速遞 新增核取方塊開關樣式

2022-01-14 09:56:56 字數 1962 閱讀 2975

fineuipro/mvc/core的下個版本(v6.1.0),我們對核取方塊進行了增強,通過乙個屬性啟用開關樣式。

先來看下示例效果,淺色主題(pure black):

深色主題(dark hive):

在這個更新中,我們為checkbox控制項新增了如下 4 個屬性:

在上述例子中,我們分別演示了如下幾種使用場景:

不顯示開關文字

自定義開關文字

自定義開關文字(圖示)

自定義開關文字(長文字,需要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

>

對於最後乙個比較長的自定義文字,還需要簡單的css樣式來配合:

<

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...