精华内容
下载资源
问答
  • 2021-09-27 15:30:46
    /**
     * 自定义Layui自定义插件
     * version: 1.2
     * 基于layui-v2.5.7编写,整理常用方法,减少layui开发页面代码编写工作量
     * 实现:1、自定义弹窗
     * 	2、自定义对话框弹出,按钮响应函数定义
     * 	3、自定义分页表格
     * 	4、自定义不分页表格
     */
    
    const topDistance = 30;
    
    const createDialog = function (url, title, size, scale) {
    
    	let closeBtn = 1;
    	if (!title || '' === title) {
    		title = false;
    		closeBtn = 0;
    	}
    
    	if (!scale || '' === scale) {
    
    		scale = [0.6, 0.8];
    	}
    
    	if (!size || '' === size) {
    		const h = $(window).height();
    		const w = $(window).width();
    
    		size = [(w * scale[0]) + 'px', ((h - topDistance) * scale[1]) + 'px'];
    
    	}
    
    	const _dialog = ({
    		_index: null,
    		open: function () {
    			this._index = layer.open({
    				_p: this,
    				title: title,
    				type: 2,
    				area: size,
    				resize: true,
    				content: url,
    				closeBtn: closeBtn,
    				offset: topDistance + 'px',
    				cancel: this.closed
    			});
    		},
    		closed: function () {
    
    			var _e = !this._p ? this : this._p;
    			layer.close(_e._index);
    			return false;
    		}
    	});
    
    	return _dialog;
    };
    
    const Zyq = ({
    	_index: null,
    	alert: function (title, context, icon, yes) {
    		var h = $(document).height();
    
    		this._index = layer.open({
    			_p: this,
    			btn: ['确定'],
    			resize: false,
    			title: false,
    			content: context,
    			icon: icon,
    			closeBtn: 0,
    			shadeClose: true,
    			zIndex: 19950602,
    			offset: (h * 0.1) + 'px',
    			yes: this.closed.before(yes),
    			cancel: this.closed.before(yes)
    		});
    
    		return this._index;
    	},
    	alertWarning: function (title, context, yes) {
    
    		return this.alert("<font color='#df8a06'>" + title + "</font>", "<font color='#f39b12'>" + context + "</font>", 0, yes);
    	},
    	alertMsg: function (title, context, yes) {
    
    		return this.alert(title, context, 1, yes);
    	},
    	alertError: function (title, context, yes) {
    
    		return this.alert("<font color='#FF0000'>" + title + "</font>", "<font color='#f08d84'>" + context + "</font>", 2, yes);
    	},
    	closed: function () {
    
    		const _e = undefined === this._p ? this : this._p;
    		layer.close(_e._index);
    	},
    	inq: function (title, context, icon, yes, no) {
    		var h = $(document).height();
    
    		this._index = layer.open({
    			_p: this,
    			btn: ['确定', '关闭'],
    			resize: false,
    			title: title,
    			content: context,
    			icon: icon,
    			closeBtn: 1,
    			zIndex: 19950602,
    			offset: (h * 0.1) + 'px',
    			yes: this.closed.before(yes),
    			btn2: this.closed.before(no),
    			cancel: this.closed
    		});
    
    		return this._index;
    	},
    	inqWarning: function (title, context, yes, no) {
    
    		return this.inq("<font color='#df8a06'>" + title + "</font>", "<font color='#f39b12'>" + context + "</font>", 0, yes, no);
    	},
    	inqMsg: function (title, context, yes, no) {
    
    		return this.inq(title, context, 1, yes, no);
    	},
    	inqError: function (title, context, yes, no) {
    
    		return this.inq("<font color='#FF0000'>" + title + "</font>", "<font color='#f08d84'>" + context + "</font>", 2, yes, no);
    	}
    });
    
    const pageTable = function (_url, _config) {
    
    	let _method = _config.method;
    	if (!_method || '' === _method) {
    		_method = 'get';
    	}
    
    	let _param = _config.param;
    	if (!_param || '' === _param) {
    		_param = {};
    	}
    
    	let _title = _config.title;
    	if (!_title || '' === _title) {
    		_title = false;
    	}
    
    	let _pageSize = _config.pageSize;
    	if (!_pageSize || '' === _pageSize) {
    		_pageSize = 20;
    	}
    
    	let _totalRow = _config.totalRow;
    	if (!_totalRow || '' === _totalRow) {
    		_totalRow = false;
    	}
    
    	let _id = _config.id;
    	if (undefined === _id || null === _id || '' === _id) {
    		_id = _config.elem;
    	}
    
    	return ({
    		dataTable: null,
    		loadBefore: _param,
    		pk: _config.pk,
    		_table: null,
    		load: function () {
    			let _that = this;
    			layui.use(['table', 'element'], function () {
    				_that._table = layui.table;
    				const element = layui.element
    
    				_that.dataTable = _that._table.render({
    					id: _id,
    					elem: '#' + _config.elem,
    					url: _url,
    					where: _that.loadBefore,
    					method: _method,
    					toolbar: _config.toolbar,
    					height: 'full-20',
    					title: _title,
    					page: true,
    					totalRow: _totalRow,
    					limit: _pageSize,
    					limits: [10, 20, 30, 40, 50],
    					defaultToolbar: ['print', 'exports'],
    					done: function () {
    						if (undefined !== _config.onload) {
    							_config.onload(element);
    						}
    					},
    					cols: [_config.cols]
    				});
    
    				//头工具栏事件
    				_that._table.on('toolbar(' + _config.filter + ')', function (obj) {
    					var checkStatus = _that._table.checkStatus(_id);
    
    					if (undefined !== _config.listener) {
    						_config.listener(checkStatus.data, obj.event, obj);
    					}
    				});
    
    				//单击事件
    				_that._table.on('row(' + _config.filter + ')', function (obj) {
    
    					if (undefined !== _config.click) {
    						_config.click(obj.data, obj.tr, obj);
    					}
    				});
    
    				//双击事件
    				_that._table.on('rowDouble(' + _config.filter + ')', function (obj) {
    
    					if (undefined !== _config.dbClick) {
    						_config.dbClick(obj.data, obj.tr, obj);
    					}
    				});
    
    				//行操作栏事件
    				_that._table.on('tool(' + _config.filter + ')', function (obj) {
    					var data = obj.data;
    					if (undefined !== _config.rowTool) {
    						_config.rowTool(data, obj.event, obj);
    					}
    				});
    
    				//复选框事件
    				_that._table.on('checkbox(' + _config.filter + ')', function (obj) {
    
    					if (obj.type === 'one') {
    						return;
    					}
    
    					if (_config.checkbox) {
    						_config.checkbox(obj.data, obj.tr, obj);
    					}
    
    				});
    
    				//单选框事件
    				_that._table.on('radio(' + _config.filter + ')', function (obj) {
    
    					if (_config.radio) {
    						_config.radio(obj.data, obj.tr, obj);
    					}
    				});
    			});
    		},
    		clearLoadBeforeParam: function () {
    
    			this.loadBefore = {};
    		},
    		/**
    		 * 下个版本废弃,替换为addLoadBeforeParam
    		 * @param _name
    		 * @param _value
    		 */
    		setLoadBeforeParam: function (_name, _value) {
    
    			this.loadBefore[_name] = _value;
    
    		},
    		resetLoadBeforeParam: function (param) {
    
    			if (!param || '' === param) {
    				param = {};
    			}
    
    			this.loadBefore = param;
    
    		},
    		addLoadBeforeParam: function (_name, _value) {
    
    			this.loadBefore[_name] = _value;
    
    		},
    		reload: function (curPage) {
    
    			if (undefined === curPage || null == curPage || '' === curPage) {
    				curPage = 1;
    			}
    
    			this.dataTable.reload({
    				where: this.loadBefore,
    				page: {
    					curr: curPage //重新从第 1 页开始
    				}
    			});
    		},
    		selected: function () {
    
    			return this._table.checkStatus(_id).data;
    		}
    
    	});
    };
    
    const normalTable = function (_url, _config) {
    
    	let _method = _config.method;
    	if (undefined === _method || null == _method || '' === _method) {
    		_method = 'get';
    	}
    
    	let _param = _config.param;
    	if (undefined === _param || null == _param || '' === _param) {
    		_param = {};
    	}
    
    	let _title = _config.title;
    	if (undefined === _title || null == _title || '' === _title) {
    		_title = false;
    	}
    
    	let _id = _config.id;
    	if (undefined === _id || null == _id || '' === _id) {
    		_id = _config.elem;
    	}
    
    	return ({
    		dataTable: null,
    		loadBefore: _param,
    		pk: _config.pk,
    		_table: null,
    		load: function () {
    			let _that = this;
    
    			layui.use('table', function () {
    				_that._table = layui.table;
    
    				_that.dataTable = _that._table.render({
    					id: _id,
    					elem: '#' + _config.elem,
    					url: _url,
    					where: _that.loadBefore,
    					method: _method,
    					toolbar: _config.toolbar,
    					title: _title,
    					defaultToolbar: ['print', 'exports'],
    					done: function () {
    						if (undefined !== _config.onload) {
    							_config.onload();
    						}
    					},
    					cols: [_config.cols]
    				});
    
    				//头工具栏事件
    				_that._table.on('toolbar(' + _config.filter + ')', function (obj) {
    					var checkStatus = _that._table.checkStatus(_id);
    
    					if (undefined !== _config.listener) {
    						_config.listener(checkStatus.data, obj.event, obj);
    					}
    				});
    
    				//单击事件
    				_that._table.on('row(' + _config.filter + ')', function (obj) {
    
    					if (undefined !== _config.click) {
    						_config.click(obj.data, obj.tr, obj);
    					}
    				});
    
    				//双击事件
    				_that._table.on('rowDouble(' + _config.filter + ')', function (obj) {
    
    					if (undefined !== _config.dbClick) {
    						_config.dbClick(obj.data, obj.tr, obj);
    					}
    				});
    
    				//行操作栏事件
    				_that._table.on('tool(' + _config.filter + ')', function (obj) {
    					var data = obj.data;
    					if (undefined !== _config.rowTool) {
    						_config.rowTool(data, obj.event, obj);
    					}
    //				    obj.event.preventDefault();
    				});
    
    				//复选框事件
    				_that._table.on('checkbox(' + _config.filter + ')', function (obj) {
    
    					if (obj.type === 'one') {
    						return;
    					}
    
    					if (_config.checkbox) {
    						_config.checkbox(obj.data, obj.tr, obj);
    					}
    
    				});
    
    				//单选框事件
    				_that._table.on('radio(' + _config.filter + ')', function (obj) {
    
    					if (_config.radio) {
    						_config.radio(obj.data, obj.tr, obj);
    					}
    				});
    			});
    		},
    		setLoadBeforeParam: function (_name, _value) {
    
    			this.loadBefore[_name] = _value;
    		},
    		reload: function () {
    
    			this.dataTable.reload({
    				where: this.loadBefore
    			});
    		},
    		selected: function () {
    
    			return this._table.checkStatus(_id).data;
    		}
    
    	});
    };
    
    Function.prototype.before = function(fn) {
    	const _this = this;
    	return function() {
    		const ret = undefined !== fn ? fn.apply(this, arguments) : undefined;
    		_this.apply(this, arguments);
    		return ret;
    	}
    },
    
    	Function.prototype.after = function(fn) {
    		const _this = this;
    		return function() {
    			_this.apply(this, arguments);
    			return undefined !== fn ? fn.fn(this, arguments) : undefined;
    		}
    	}
    
    const structure = {
    	_key: '',
    	_value: null,
    	getKey: function() {
    		return this._key;
    	},
    	setKey: function(_key) {
    		this._key = _key;
    	},
    	getValue: function() {
    		return this._value;
    	},
    	setValue: function(_value) {
    		this._value = _value;
    	}
    };
    const defaultMap = {
    	_map: [],
    	put: function (_key, _value) {
    		if (null != this.get(_key)) {
    			return true;
    		}
    
    		const item = Object.create(structure);
    		item.setKey(_key);
    		item.setValue(_value);
    
    		this._map.push(item);
    	},
    	remove: function (_key) {
    		const _value = this.get(_key);
    		if (null == _value) {
    			return;
    		}
    
    		let _index = -1;
    		$.each(this._map, function (index, item) {
    			if (_key === item.getKey()) {
    				_index = index;
    				return false;
    			}
    		});
    
    		if (_index !== -1) {
    			this._map.splice(_index, 1);
    		}
    	},
    	removeAll: function () {
    		this._map = null;
    		this._map = [];
    	},
    	get: function (_key) {
    		let _value = null;
    		$.each(this._map, function (index, item) {
    			if (_key === item.getKey()) {
    				_value = item.getValue();
    				return false;
    			}
    		});
    
    		return _value;
    	},
    	keys: function () {
    		const _keys = [];
    		$.each(this._map, function (index, item) {
    			_keys.push(item.getKey());
    		});
    
    		return _keys;
    	},
    	values: function () {
    		const _valueArr = [];
    		$.each(this._map, function (index, item) {
    			if (null != item.getValue()) {
    				_valueArr.push(item.getValue());
    			}
    		});
    		return _valueArr;
    	},
    	size: function () {
    
    		return this._map.length;
    	}
    };
    
    
    
    更多相关内容
  • 1、在 阿里巴巴矢量图标库 选择自己的想要的icon(作者以菜单为例) 2、把该图标放置在购物车,然后点击最上方的购物车图标或者页面滑到底端右边出现的购物车图标,示例图如下: 添加到购物车 3、打开购物车...

            看了好多教程,一点思路也不清晰,闲话少说,直接上步骤!!!        

            前提工作,自己下载好layui,注册登录好iconfont-阿里巴巴矢量图标库

            1、在 阿里巴巴矢量图标库 选择自己的想要的icon(作者以菜单为例)

            2、把该图标放置在购物车,然后点击最上方的购物车图标或者页面滑到底端右边出现的购物车图标,示例图如下:

    添加到购物车 

             3、打开购物车,点击 下载代码,压缩包解压后放在你项目的任何位置,作者为了方便,自创了一个文件夹myicon,放在了layui/css下面 。

            (网上大多数教程要把图标添加至项目里,这个是非必须的,添加之后也是要下载代码,道理一样的,至于为什么要添加到项目里,作者会在文章最后解释)这时候你就可以删除一些不必要的文件,如图:

             4、引入css,把iconfont.css文件引入所需要的页面

    <link rel="stylesheet" href="/layui/css/myicon/iconfont.css">

             5、使用,首先打开iconfont.css,复制class名   (有两个class名,一个是公共的class,一个是下载的图标的class名),在i></i>标签添加 复制的class名,然后就大功告成!!!

            请看以下示例:

    @font-face {
      font-family: "iconfont"; /* Project id  */
      src: url('iconfont.ttf?t=1631683291560') format('truetype');
    }
    
    .iconfont {  /*这是公共class名,必须复制*/
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    .icon-caidan:before {   /*这是第一个icon图标 只复制icon-caidan,不要复制berore*/ 
      content: "\e605";
    }
    
    .icon-caidan1:before { /*这是第二个icon图标,方法同上*/ 
      content: "\e61d";
    }

    iconfont.css文件

        <p><i class="iconfont icon-caidan">菜单</i></p>
        <p><i class="iconfont icon-caidan1">菜单1</i></p>

     你的页面html

     解释

            网上大多数教程要把图标添加至项目里,是为了修改class名,也就是iconfont.css里面的公共class名  iconfont 和你下载的图标class名,本文就是icon-caidaicon-caidan1,这些都是可以在iconfont.css文件里面修改,现在阿里巴巴矢量图标库做了修改,找不到以前的那样的设置了,而且只知道让改,不知道为什么这样改,作为一个程序员很难受。

            作者为了方便和layui的icon保持一致,把iconfont.css文件里面iconfont  改成了layui-icon,把下载的图标class名加了前缀layui-icon,效果是一样的,请看下面的例子

    @font-face {
      font-family: "iconfont"; /* Project id  */
      src: url('iconfont.ttf?t=1631683291560') format('truetype');
    }
    
    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .icon-caidan:before {
      content: "\e605";
    }
    
    .icon-caidan1:before {
      content: "\e61d";
    }
    
    
    /*修改iconfont名和icon图标的class名*/
    .layui-icon {
      font-family: "iconfont" !important;
      font-size: 20px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: red;
    }
    .layui-icon-myicon1:before {
      content: "\e605";
    }
    .layui-icon-myicon2:before {
      content: "\e61d";
    }
    
    
    

    iconfont.css文件

      <div>
        <h1>iconfont</h1>
        <p><i class="iconfont icon-caidan">菜单</i></p>
        <p><i class="iconfont icon-caidan1">菜单1</i></p>
      </div>
    
      <div>
        <h1>layui-icon</h1>
        <p><i class="layui-icon layui-icon-myicon">菜单</i></p>
        <p><i class="layui-icon layui-icon-myicon1">菜单1</i></p>
      </div>

    你的页面html

             改不改效果是一样的,作者还自定义了颜色和字体大小,但是呢,改成layui-icon之后发现,layui原本的icon图标不能用了,加载不出了,所以改不改class名大家应该知道怎么做了吧。

    展开全文
  • layui自定义打印

    千次阅读 2021-03-29 19:12:42
    layui官网下载新的layui的js文件,有些旧版本的不支持 在table数据赋值时,添加如下参数 toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板 二、 自定义打印内容的实现 三、 自定义打印table的实现...

    效果图如下
    在这里插入图片描述
    自定义内容导出
    在这里插入图片描述
    自定义表格导出

    目录
    一、 自带的打印功能的实现
    1. 下载新的layui的js文件
    2. 添加toolbar参数
    3. 最终打印图标显示
    4. 点击打印图标,实现打印效果
    5. 隐藏打印功能
    二、 自定义打印内容的实现
    1. html代码
    2. js代码
    三、 自定义打印table的实现
    1. html代码
    2. js代码

    一、 自带的打印功能的实现

    1. 在layui官网下载新的layui的js文件,有些旧版本的不支持
    2. 在table数据赋值时,添加如下参数
    toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
    
    1. 最终会显示出如下图的打印图标
      在这里插入图片描述
    2. 点击打印图标,实现打印table的效果
    3. 如果不需要打印功能,可隐藏,实现代码如下
    $(".layui-table-tool-self .layui-inline").eq(2).hide();//不需要自带的打印功能
    

    二、 自定义打印内容的实现

    1. html代码
    <div class="layui-inline">
        <label class="layui-form-label">打印内容</label>
        <div class="layui-input-inline" style="width: 200px">
            <input type="text" name="txtPrint" id="txtPrint" placeholder="请输入打印内容" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <a id="print" class="layui-btn layui-btn-primary layui-btn-sm">
            <i class="layui-icon layui-icon-print"></i>
        </a>
    </div>
    
    1. js代码
    //自定义打印内容
    $("#print").click(function () {
        var v = document.createElement("div");
        $(v).append($("#txtPrint").val() + "</div>");
        var h = window.open("Print_window", "_blank");
        h.document.write($(v).prop("outerHTML"));
        h.document.close();
        h.print();
        h.close();
    })
    

    三、 自定义打印table的实现

    1. html代码
    <div class="layui-inline">
        <label class="layui-form-label">打印表格</label>
        <table id="table_info">
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
        </table>
    </div>
    <div class="layui-inline">
        <a id="printTable" class="layui-btn layui-btn-primary layui-btn-sm">
            <i class="layui-icon layui-icon-print"></i>
        </a>
    </div>
    
    1. js代码
    //自定义打印table
    $("#printTable").click(function () {
        var v = document.createElement("div");
        var f = ["<head>", "<style>", "body{font-size: 12px; color: #666;}", "table{width: 100%; border-collapse: collapse; border-spacing: 0;}", "th,td{line-height: 20px; padding: 9px 15px; border: 1px solid #ccc; text-align: left; font-size: 12px; color: #666;}", "a{color: #666; text-decoration:none;}", "*.layui-hide{display: none}", ".picture{ }", "</style>", "</head>"].join("");
        $(v).append($("#table_info").html() + "</div>");
        var h = window.open("Print_window", "_blank");
        h.document.write(f + $(v).prop("outerHTML"));
        h.document.close();
        h.print();
        h.close();
    })
    
    展开全文
  • layui 自定义 模块 hello

    2021-01-01 17:12:24
    这里写自定义目录标题layui 自定义模块hello参考链接截图源码效果 layui 自定义模块hello 参考链接 layui封装模块小白教程 版本layui-v2.5.7 截图 源码 hello.js /** layui-v2.5.7 自定义模块 */ layui.define(['...

    layui 自定义模块hello

    参考链接

    layui封装模块小白教程
    版本layui-v2.5.7

    截图

    在这里插入图片描述

    源码

    hello.js

    /** layui-v2.5.7 自定义模块 */
    layui.define(['jquery','layer'],function(exports){
    	//使用内置模块
    	var $ = layui.jquery,layer = layui.layer;
    	//自定义模块的对象
    	var obj = {
    		log: function(text){
    			console.log(text||'hello layui log.');
    		},
    		alert: function(text){
    			layer.msg(text||'hello layui msg.')
    		},
    		html: function(text){
    			$('body').append($('<div></div>').html(text||'<h1>hello layui html</h1>'));
    		}
    	};
    	//输出组件接口
    	exports('hello',obj);
    })
    

    layui.customs.js

    /** layui-v2.5.7 自定义模块-引用 */
    layui.config({
    	base:'static/layui/customs/'
    }).extend({
    	hello:'hello'
    })
    

    test.html

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    		<meta name="renderer" content="webkit"/>
    		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
    		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    		<meta http-equiv="Pragma" content="no-cache"/>
    		<meta http-equiv="expires" content="0"/>
    		<meta http-equiv="Cache" content="no-cache"/>
    		<link rel="icon" href="favicon.ico"/>
    		<title>首页</title>
    		<style type="text/css">
    			
    		</style>
    	</head>
    	<body>
    	</body>
    	<script src="static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    	<script src="static/layui/layui.customs.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript">
    		layui.use(['hello'],function(){
    			var hello = layui.hello;
    			hello.log();
    			hello.html();
    			hello.alert();
    		})
    	</script>
    </html>
    

    效果

    在这里插入图片描述

    展开全文
  • 【教程】layui自定义导出功能

    千次阅读 2020-06-12 21:52:59
    如无需自定义,去除该参数即可 title: '导出所有信息(按专业筛选)' ,layEvent: 'exports1' ,icon: 'layui-icon-export' }, { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可 title: '导出所有...
  • layui是一个极其不错的前端UI框架、是后端程序员的福音...为什么要自定义模块呢?好处很多、比如可以大量重用代码......我也是一个极其懒惰的人、总是想办法让代码可重用根据layui官方的文档说明、首先第一步是要确...
  • layui自定义打印功能

    千次阅读 2020-09-24 17:34:11
    <a style="float: right" onclick="print()" type="button" class="layui...i class="layui-icon layui-icon-print"></i> </a> <table id="table_info"> <tr> <td>1</t...
  • layui图标使用和自定义矢量库图标

    万次阅读 2018-07-03 21:01:52
    通过对一个内联元素(一般推荐用i标签)设定class="layui-icon",来定义一个图标,然后对元素加上图标对应的font-class(注意:layui 2.3.0 之前只支持采用unicode 字符),即可显示出你想要的图标。内置图...
  • Layui 自定义 **标签** 组件 checkbox只读效果如下图所示![可以设置只读](https://img-blog.csdnimg.cn/20200902183344555.jpg#pic_center)代码如图 效果如下图所示 代码如图 // html代码 <div class="layui-form...
  • Layui自定义模块的使用方式

    万次阅读 2018-01-21 15:04:02
    layui是一个极其不错的前端UI框架、是后端程序员的福音。...为什么要自定义模块呢?好处很多、比如可以大量重用代码...... 我也是一个极其懒惰的人、总是想办法让代码可重用 根据layui官方的文档说明、
  • 本章给大家分享的是Layui自定义字体图标。 图标扩展及使用方式 layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont)。因此你可以把一个 icon 看作是一个普通的文字,这意味着你直接用 css ...
  • 改变layui-icon图标样式

    千次阅读 2021-01-20 11:18:55
    设置图标颜色:设置color 改变图标大小:设置font-size 设置图标垂直居中: position: absolute; top: 8px; //根据(父元素高度-子元素高度)/2得出
  • layui自定义js模块(实例)

    万次阅读 2017-09-30 11:22:37
    注意:layui自定义模块整个过程就两步,步骤虽少,但还是要多注意的细节问题,不然在定义模块上花费太多精力就不值得了。第一步:定义模块tablechecked.js layui.define(['layer'], function(exports) {
  • layui表头自定义

    千次阅读 2020-09-11 10:41:10
    " :rowspan="item.subjects.length"> <button class="layui-btn icon-btn layui-btn-normal layui-btn-xs" @click="edit(item)" >编辑button> <button class="layui-btn icon-btn layui-btn-danger layui-btn-xs" @...
  • layUI分页列表,自定义插件
  • layui图标拓展-自定义图标

    千次阅读 2019-05-17 09:37:54
    所以我们 不进行替换 ,而是单独创建字体文件夹) 三、修改CSS 打开layui.css 搜索 @font-face 这里我们为了便于修改和查看 排下版 上面是未修改的 我们需要复制这二块 然后修改部分代码 四、使用 打开字体文件中的 ...
  • i.msg(f,{icon:5,shift:6}) // 替换成 i.tips(f, r) 如图1下所示(Hbuilder颜色未改,则是黄背景) 或如图2所示 我喜欢把提示框颜色改了,以下就是我修改的样式(打开layui.css换行放到后面即可) /* layer提示*/...
  • layui的图标取自于阿里巴巴的矢量图标库 Iconfont第一步,通过浏览器打开 http://iconfont.cn/ ,访问阿里巴巴矢量图标库。第二步,通过右上角的用户图标,授权登陆一个账号,在此我选择使用Github作为登陆账号。第...
  • layui使用,LayUI select不显示,LayUI文件上传,Layui自定义校验规则================================©Copyright 蕃薯耀 2020-08-06http://fanshuyao.iteye.com/一、引入js和css二、使用1、表单开发建设用地面积...
  • layui自定义tab主页简单操作

    千次阅读 2018-07-23 18:46:44
    一:layui资源,官网下载引入 二:直接上代码,我写的只为入门观看啊,大神就别批了,有些样式我直接改了,样式其实并不是什么大问题 .layui-layout-admin .layui-footer{height: 0px;} .layui-layout-admin ....
  • Layui数据表格之自定义模板

    千次阅读 2019-06-09 08:24:51
    Layui里面包含了很多个模块,这里我要讲解的是数据表格模块中的自定义模板。数据表格模块作为一个大模块,它里面自然少不了各个大大小小的模板,自定义模板作为数据表格模块的成员之一,它的作用是对表格进行个性化...
  • 项目中页面很多下拉框,都是...故使用layui自定义模块实现统一操作。 先看下效果: 项目情况 因为我项目使用的springboot+tymeleaf+layui,layui扩展用了layuimini. 直接上代码 项目结构如下: 1.新建dict...
  • Layui(九) Layui 自定义登录界面提示

    千次阅读 2020-02-28 21:48:57
    改为自定义的提示信息 过程: 1、更改config.js中的debug ps:将debug:true 改为debug:false // , debug: true //是否开启调试模式。如开启,接口异常时会抛出异常 URL 等信息 , debug: false //是否...
  • 最近在项目中用到了基于layui的table组件的单元格自定义功能,研究了一下,整理代码如下: <html lang="en"> <head> <title>考核管理 -- 特性统计</title> <meta name="renderer" ...
  • layui的图标取自于阿里巴巴的矢量图标库 Iconfont,同样的,这篇教程也是基于Iconfont进行扩展。 第一步,通过浏览器打开 http://iconfont.cn/ ,访问阿里巴巴矢量图标库。 第二步,通过右上角的用户图标,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,235
精华内容 894
关键字:

layui自定义icon