layui在js移除按鈕樣式,layui取消按鈕

本文目錄一覽：

• 1、用dreamweaver使用layui表格，添加不了表格操作按鈕
• 2、layui的響應式布局在css中怎麼能覆蓋掉
• 3、js中layui.extend({})是什麼意思？
• 4、Layui框架：layui的常用組件[表單]
• 5、Layui（二）：圖標和按鈕
• 6、js如何修改button上的文字

用dreamweaver使用layui表格，添加不了表格操作按鈕

1

第一步在我們的電腦上打開軟件，新建一個html，並添加上layui的js和css文件，如下圖所示：

2

第二步我們打開新建的html文件,在head標籤裏面引入layui.css，layui.js文件，如下圖所示：

3

第三步我們開始寫body頁面內容，這裡給的表格內容是layui的表格示例數據，如下圖所示：

4

第四步我們最後來給表格數據添加點擊事件，table.on(‘tool(demoEvent)’, function(obj){}來監聽單元格事件，layer.prompt()彈出框，使用 obj.update({ sign: value });進行更新表格和緩存，如下圖所示：

5

第五步我們在瀏覽器中打開html頁面，可以看到表格數據內容，如下圖所示：

6

第六步我們點擊表格數據內容，彈出框顯示單元格裏面的數據，可以看到通過layui，給表格數據添加了點擊事件，如下圖所示：

layui的響應式布局在css中怎麼能覆蓋掉

你需要修改layui的配置文件裏面的css樣式文件。因為layui裏面的控件都是js動態生成的，你後面寫的樣式優先級沒有這個高，只能去改配置文件

js中layui.extend({})是什麼意思？

擴展layui模塊，用於加載三方插件，例：

layui.config({

base:”lay-module/”, //存放路徑

}).extend({

tableSelect: ‘tableSelect/tableSelect’, // table選擇擴展

})

Layui框架：layui的常用組件[表單]

layui的所有圖標全部採用字體形式(單一色彩)，取材於阿里巴巴的矢量圖標庫。

通過對一個內聯元素(一般使用的是i標籤)，設定 class==”layui-icon” ，來定義一個圖標，然後對元素加上圖標對應的 font-class ，即可顯示出對應的圖標。

向任意HTML元素設定 class=”layui-btn” ，建立一個基礎按鈕，通過追加格式為 layui-btn-{type} 的class來定義其他按鈕風格，內置的按鈕class可以進行任意組合，從而形成更多風格的按鈕，所有的按鈕統一使用 button 標籤來實現。不要使用input下的 type=”button” 。

新建button元素，然後在元素上加上 layui-btn 的類名

select內option的第一項主要是佔個坑，讓form模塊預留「請選擇」的提示空間，否則將會把第一項(存在value值)作為默認的選中項。

原生的select option元素無法裝飾，因此所有UI框架都是採用的元素模擬的方式來實現，即將原生的select元素隱藏，用js生成其他並設置樣式，所以需要在網頁上激活UI框架的渲染功能。

optgroup標籤給select分組，每個分組的提示信息由optgroup元素的label屬性的值決定的。

layui的複選框組件中，title是設定元素的名稱，一般用於checkbox、radio框， lay-skin： 定義checkbox元素的風格，不設置為默認風格，primary為原始風格。

當 lay-skin 的值為switch時，title的文字失效，開關前後的狀態顯示的文字由 lay-text 內決定，格式為：選中提示文字|未選中提示文字。

title：設定的元素名稱，一般用於checkbox、radio框。

layui框架使用js生成了一個div結構用來展示title標籤的文字和模擬選中時的logo效果，而原生的input元素則被隱藏掉，disabled開啟禁用，設置value來實現自定義的值，否則選中時返回的就是默認的on.

Layui（二）：圖標和按鈕

方法1：使用字符實體

只需要在一個class為 layui-icon 的容器類標籤中加入字符的unicode碼即可。

相關樣式：layui-icon，代表使用layui的圖標處理樣式去渲染

方法2：使用樣式

在class為layui-icon的容器類標籤後追加對應的圖標樣式，而不需要在寫unicode碼。

相關圖標樣式可以去官網的 文檔 查找。

相關樣式：

（1）必要樣式：layui-btn

（2）主題樣式：

layui-btn-primary 原始按鈕

layui-btn-normal 百搭按鈕

layui-btn-warm 暖色按鈕

layui-btn-danger 警告按鈕

layui-btn-disabled 禁用按鈕

（3）大小樣式：

layui-btn-lg 最大按鈕

layui-btn-sm 小型按鈕

layui-btn-xs 迷你按鈕

（4）圖標結合：

把圖標的樣式也添加到class中即可

（5）圓角按鈕：

layui-btn-radius

（6）按鈕組：

套上一層class為layui-btn-group

layui按鈕的事件監聽可以使用jquery來做。

在layui內部使用jquery的方式：

js如何修改button上的文字

1．首先，打開hbuilder軟件，在空白文件中寫入兩個button，並將id屬性設置為btn1和btn2，在下面添加腳本標籤以獲取dom。 button1的元素，並為其button標籤賦予click事件，當單擊button1時，文本將更改。

2．然後，按crtl ＋ s保存，可以在瀏覽器中看到兩個按鈕。

3．接着，在右側瀏覽器中單擊button1的按鈕，button1的文本內容將更改。

4． jQuery首先需要將jQuery導入下面的文件，然後使用jQuery的「 ＄」選擇器獲取button2的dom，並為其設置click事件，然後可以更改按鈕的內容。

5．最後，保存後，在瀏覽器中單擊button2，還可以觀察到文本內容已更改。操作完成。