layui框架(彈出層和輪播)

2021-10-01 10:47:13 字數 3369 閱讀 4145

一、彈出層

src=

"layer.js"

>

script

>

>

layer.

msg(

'hello');

script

>

2、在 layui 中使用 layer

>

layui.

use(

'layer'

,function()

);script

>

3、彈出層屬性的使用方法type - 基本層型別

layer提供了5種層型別

可傳入的值有:

0(資訊框,預設)

1(頁面層)

2(iframe層)

3(載入層)

4(tips層)

若你採用layer.open()方式呼叫,則type為必填項(資訊框除外)。

基礎引數一覽表:

offset預設情況下不用設定。但如果你不想垂直水平居中,你還可以進行以下賦值:

內建方法一覽表:

**展示:

html**:

>

class

="layui-btn"

id="btn1"

>

資訊框button

>

class

="layui-btn"

id="btn2"

>

頁面層button

>

class

="layui-btn"

id="btn3"

>

iframe層button

>

class

="layui-btn"

id="btn4"

>

載入層button

>

class

="layui-btn"

id="btn5"

>

tips層button

>

class

="layui-btn"

id="btn6"

>

輸入層button

>

class

="layui-btn"

id="btn7"

>

選項卡button

>

div>

js**:

layui.

use(

["element"

,"layer"],

function()

);})

;$("#btn2").

on("click"

,function()

);})

;$("#btn3").

on("click"

,function()

);})

;$("#btn4").

on("click"

,function()

);})

;$("#btn5").

on("click"

,function()

);})

;$("#btn6").

on("click"

,function()

,function

(pass, index)

,function

(text, index));

});}

);$(

"#btn7").

on("click"

,function()

,,],

});}

);layer.

photos()

;// layer.msg("hello world!");})

;<

/script>

二、輪播在html結構中,只需要簡單地注意這兩項:

外層元素的 class=「layui-carousel」 用來標識為乙個輪播容器

內層元素的屬性 carousel-item 用來標識條目。

通過核心方法:carousel.render(options) 來對輪播設定基礎引數,也可以通過方法:carousel.set(options) 來設定全域性基礎引數。

基礎引數選項表:

html**:

class

="layui-elem-field layui-field-title"

style

="margin-top

: 30px;

">

>

常規輪播legend

>

fieldset

>

class

="layui-carousel"

id="test1"

lay-filter

="test1"

>

carousel-item="

">

style

="background-color

: #00f7de;

">

div>

style

="background-color

: #ffff00

">

div>

style

="background-color

: #ff5722

">

div>

style

="background-color

: #ff00ff

">

div>

style

="background-color

: aqua

">

div>

div>

div>

js**:

layui.

use(

["carousel"

,"form"],

function()

);})

;<

/script>

layui框架(彈出層和div輪播)

一 彈出層 src layer.js script layer.msg hello script 2 在 layui 中使用 layer layui.use layer function script 3 彈出層屬性的使用方法type 基本層型別 layer提供了5種層型別 可傳入的值有 0 資訊框...

模擬layui彈出層

以前覺得自己手寫乙個類似layui的彈出層是挺遙遠的事,因為完全沒有頭緒,即便在layui官網知道layui使用的都是c3動畫 之前試過控制width 0 height 0來做動畫,結果慘不忍睹,直到幾天前靈機一動聯想到了transform的scale屬性,才稍微觸及到了皮毛 為了不新增格外的htm...

layui彈出層基礎引數

一 type 層型別 型別 number 預設為0 資訊框 1 頁面層 可以在頁面新增html內容 2 iframe層 3 載入層 載入時顯示的彈出框 4 tips層 需要繫結id就不展示了 二 title標題 引數型別 string,array,boolean string 即標題的文字 arra...