layuiu按钮
1.关于layui图标 唯一要提的是这是一个矢量图标 因此可以像对待文字一样加上style = font-size 以及color属性
eg: <i class="layui-icon" style="font-size:200px;color:red"></i>
引入css和js文件就ok。
动画效果也很简单不多写了。
2.按钮:
***向任意HTML元素设定class="layui-btn",建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合,从而形成更多种按钮风格。
首先测试一下向任意HTML元素设定class="layui-btn",建立一个基础按钮这个。
没有问题。
eg:
<h1 class="layui-btn">h1</h1>
<p class="layui-btn">p</p>
<i class="layui-btn">i</i>
<ul class="layui-btn">
<li>ul</li>
</ul>
<input class="layui-btn" type="text" name="name" value="测试按钮(文本)" />
全都被渲染成了按钮。
layui对于button来说是相当宽容的了。正常使用话我觉得还是input吧。这样应该 便于操控。看一下input type=button.效果很ok。
***这里需要注意一点,类layui-btn-disabled可以直接将button禁用也就是说当需要js控制 按钮的可选状态时候,只需要像下面:
eg:
<input type="button" class="layui-btn" name="btnChangeDis" id="btnDis" value="可选/不可选" />
<script>
$(function () {
$("#btnDis").click(function () {
$('#btntest').addClass("layui-btn-disabled")
});
});
</script>
轻松改变状态。
***按钮还可以和图标结合使用。也很简单
eg:
<button type="button" class="layui-btn"><i class="layui-icon"></i> 添加</button>
layuiu按钮的更多相关文章
- ExtJS 4.2 Date组件扩展:添加清除按钮
ExtJS中除了提供丰富的组件外,我们还可以扩展他的组件. 在这里,我们将在Date日期组件上添加一个[清除]按钮,用于此组件已选中值的清除. 目录 1. Date组件介绍 2. 主要代码说明 3. ...
- 关于Android避免按钮重复点击事件
最近测试人员测试我们的APP的时候,喜欢快速点击某个按钮,出现一个页面出现多次,测试人员能不能禁止这样.我自己点击了几下,确实存在这个问题,也感觉用户体验不太好.于是乎后来我搜了下加一个方法放在我们U ...
- Expression Blend创建自定义按钮
在 Expression Blend 中,我们可以在美工板上绘制形状.路径和控件,然后修改其外观和行为,从而直观地设计应用程序.Button按钮也是Expression Blend最常用的控件之一,在 ...
- 步入angularjs directive(指令)--点击按钮加入loading状态
今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...
- iOS 键盘添加完成按钮,delegate和block回调
这个是一个比较初级一点的文章,新人可以看看.当然实现这个需求的时候自己也有一点收获,记下来吧. 前两天产品要求在工程的所有数字键盘弹出时,上面带一个小帽子,上面安装一个“完成”按钮,这个完成按钮也没有 ...
- wordpress优化之结合prism.js为编辑器自定义按钮转化代码
原文链接 http://ymblog.net/2016/07/24/wordpress-prism/ 继昨天花了一天一夜的时间匆匆写了主题Jiameil3.0之后,心中一直在想着优化加速,体验更好,插 ...
- Android快乐贪吃蛇游戏实战项目开发教程-05虚拟方向键(四)四个三角形按钮
该系列教程概述与目录:http://www.cnblogs.com/chengyujia/p/5787111.html 一.如何判断点击的是哪个方向键按钮 在上篇教程中我们实现了左边的三角形按钮效果, ...
- Android快乐贪吃蛇游戏实战项目开发教程-04虚拟方向键(三)三角形按钮效果
该系列教程概述与目录:http://www.cnblogs.com/chengyujia/p/5787111.html 一.知识点讲解 当我们点击系统自带的按钮时,按钮的外观会发生变化.上篇博文中我们 ...
- mono for android Listview 里面按钮 view Button click 注册方法 并且传值给其他Activity 主要是context
需求:为Listview的Item里面的按钮Button添加一个事件,单击按钮时通过事件传值并跳转到新的页面. 环境:mono 效果: 布局代码 主布局 <?xml version=" ...
随机推荐
- Tensorflow学习笔记No.4.2
使用CNN卷积神经网络(2) 使用Tensorflow搭建简单的CNN卷积神经网络对fashion_mnist数据集进行分类 不了解是那么是CNN卷积神经网络的小伙伴可以参考上一篇博客(Tensorf ...
- 工信部今日向三大运营商和中国广电发放5G商用牌照
央视快讯:工信部向中国电信.中国移动.中国联通.中国广电发放5G商用牌照. 2016年5月5日,工信部向中国广播电视网络有限公司颁发了<基础电信业务经营许可证>,批准中国广播电视网络有限公 ...
- dockerfile镜像设置中文
一.dockerfile镜像设置中文 centos镜像默认不支持中文,把下面的内容加到dockerfile即可 # 修改时区 RUN rm -rf /etc/localtime && ...
- 本文介绍如何使用 Docker Swarm 来部署 Nebula Graph 集群,并部署客户端负载均衡和高可用
本文作者系:视野金服工程师 | 吴海胜 首发于 Nebula Graph 论坛:https://discuss.nebula-graph.com.cn/t/topic/1388 一.前言 本文介绍如何 ...
- 多测师讲解html _有序列表005_高级讲师肖sir
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>有 ...
- CentOS 7操作系统基础优化介绍
01 前言 操作系统部署完毕后,需要做一些基础的简单优化操作,可以为系统未来的使用过程带来更多便捷. 02 操作系统安全优化配置 系统安装完毕后,默认系统中会存在两个重要的安全服务程序,建议将其首先进 ...
- linux(centos8):用systemctl管理war包形式的jenkins(java 14 / jenkins 2.257)
一,如何安装jenkins? 参见: https://www.cnblogs.com/architectforest/p/13685904.html 说明:刘宏缔的架构森林是一个专注架构的博客,地址: ...
- java-类和数组
java内存划分 Java的内存划分为5个部分: 1.栈 (Stack) : 存放的都是方法中的局部变量,方法的运行一定要在栈当中 局部变量: 方法的参数,或者是方法()内部的变量 作用域: 一旦超出 ...
- mac 解决安卓模拟器链接不上网络
方法1.临时方法,每次启动都要加114.114.114.114 1.进入到下面的目录 /Users/anxiaodong/Library/Android/sdk/emulator 2.执行以下命令 e ...
- sql 存储过程 输出参数 输入参数
1.简单的存储过程 create procedure porc_name as select * from 表 go 调用时: exec proc_name 2. 带参数的存储过程 create pr ...