zw7534313
- 浏览: 1342450 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (896)
- spring4 (14)
- hibernate3 (26)
- spring2 (35)
- struts2 (55)
- struts1 (15)
- 设计模式 (15)
- java (172)
- mybatis3 (11)
- sql (17)
- mysql (13)
- jbpm (10)
- J2EE (45)
- tools (29)
- js (83)
- 数据结构 (13)
- Html (26)
- web (22)
- flex (33)
- Oracle (57)
- linux (49)
- 算法 (6)
- 其它 (12)
- easyui (1)
- bootstrap (13)
- xml (2)
- tomcat (1)
- redis (10)
- activemq (2)
- webservice (11)
- maven (2)
- springboot (1)
- ubuntu (1)
- python (14)
- rocketmq (1)
- springcloud (10)
- opencv (1)
最新评论
-
mike_eclipse：
Hashtable是线程不安全的吗？好像是线程安全的吧？
多线程之集合类 -
July01：
推荐用StratoIO打印控件，浏览器和系统的兼容性都很好，而 ...
lodop打印控件 -
xingcxb：
经过测试，假的，依旧会出现中文乱码！！！！store方法里面采 ...
java 读写Properties文件，不会出现中文乱码 -
tiger20111989：
...
Spring注解方式管理事务 -
zw7534313：
...
js 文字上下滚动 无间断循环显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layer弹层 - layui</title>
<link rel="stylesheet" href="../layui/css/layui.css">
<style>
body{padding: 100px;}
</style>
</head>
<body>
<button class="layui-btn layui-btn-primary demo" data-type="test">Alert</button>
<button class="layui-btn demo" data-type="test2">Confirm</button>
<button class="layui-btn demo" data-type="test3">Msg</button>
<button class="layui-btn demo" data-type="test4">Tips</button>
<button class="layui-btn demo" data-type="test5">Page</button>
<button class="layui-btn demo" data-type="test6">Iframe</button>
<button class="layui-btn demo" data-type="test7">Prompt</button>
<button class="layui-btn demo" data-type="test8">Tab</button>
<a href="http://layer.layui.com/" target="_blank" class="layui-btn demo">更多例子</a>
<div id="test11111" style="display: none;padding: 20px;">
123
</div>
<script src="../layui/layui.js"></script>
<script>
layui.use('layer', function(){
var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
//触发事件
var active = {
test: function(){
layer.alert('你好么，体验者');
}
,test2: function(){
layer.confirm('您是如何看待前端开发？', {
btn: ['重要','奇葩'] //按钮
}, function(){
layer.msg('的确很重要', {icon: 1});
}, function(){
layer.msg('也可以这样', {
time: 20000, //20s后自动关闭
btn: ['明白了', '知道了']
});
});
}
,test3: function(){
layer.msg('玩命提示中');
}
,test4: function(){
layer.tips('Hi，我是一个小提示', this, {tips: 1});
}
,test5: function(){
layer.open({
title:'更新论坛信息',
type: 1,
skin: 'layui-layer-rim',
area: ['500px', '580px'],
content: $('#test11111')
});
}
,test6: function(){
layer.open({
type: 2
,content: 'http://fly.layui.com/'
,area: ['375px', '500px']
,maxmin: true
});
}
,test7: function(){
layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
layer.close(index);
layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
layer.close(index);
layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
});
});
}
,test8: function(){
layer.tab({
area: ['600px', '300px'],
tab: [{
title: 'TAB1',
content: '内容1'
}, {
title: 'TAB2',
content: '内容2'
}, {
title: 'TAB3',
content: '内容3'
}]
});
}
};
$('.demo').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
</body>
</html>
http://layer.layui.com/
https://www.layui.com/doc/#get
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layer弹层 - layui</title>
<link rel="stylesheet" href="../layui/css/layui.css">
<style>
body{padding: 100px;}
</style>
</head>
<body>
<button class="layui-btn layui-btn-primary demo" data-type="test">Alert</button>
<button class="layui-btn demo" data-type="test2">Confirm</button>
<button class="layui-btn demo" data-type="test3">Msg</button>
<button class="layui-btn demo" data-type="test4">Tips</button>
<button class="layui-btn demo" data-type="test5">Page</button>
<button class="layui-btn demo" data-type="test6">Iframe</button>
<button class="layui-btn demo" data-type="test7">Prompt</button>
<button class="layui-btn demo" data-type="test8">Tab</button>
<a href="http://layer.layui.com/" target="_blank" class="layui-btn demo">更多例子</a>
<div id="test11111" style="display: none;padding: 20px;">
123
</div>
<script src="../layui/layui.js"></script>
<script>
layui.use('layer', function(){
var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
//触发事件
var active = {
test: function(){
layer.alert('你好么，体验者');
}
,test2: function(){
layer.confirm('您是如何看待前端开发？', {
btn: ['重要','奇葩'] //按钮
}, function(){
layer.msg('的确很重要', {icon: 1});
}, function(){
layer.msg('也可以这样', {
time: 20000, //20s后自动关闭
btn: ['明白了', '知道了']
});
});
}
,test3: function(){
layer.msg('玩命提示中');
}
,test4: function(){
layer.tips('Hi，我是一个小提示', this, {tips: 1});
}
,test5: function(){
layer.open({
title:'更新论坛信息',
type: 1,
skin: 'layui-layer-rim',
area: ['500px', '580px'],
content: $('#test11111')
});
}
,test6: function(){
layer.open({
type: 2
,content: 'http://fly.layui.com/'
,area: ['375px', '500px']
,maxmin: true
});
}
,test7: function(){
layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
layer.close(index);
layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
layer.close(index);
layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
});
});
}
,test8: function(){
layer.tab({
area: ['600px', '300px'],
tab: [{
title: 'TAB1',
content: '内容1'
}, {
title: 'TAB2',
content: '内容2'
}, {
title: 'TAB3',
content: '内容3'
}]
});
}
};
$('.demo').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
</body>
</html>
http://layer.layui.com/
https://www.layui.com/doc/#get
分享到：
发表评论
-
postMessage的使用,frame跨域传值
2020-07-11 10:03 5331、postMessage()方法允许来自不同源的脚本采用异步 ... -
javascript闭包
2020-05-31 16:01 707循环，setTimeout与闭包 for(var i=1;i ... -
跨域过滤器CrosFilter
2019-12-23 09:48 726本机部署：8081 ajax请求跨域： function i ... -
jquery的extend
2018-04-13 20:42 672jquery的$.extend()、$.fn和$.fn.ex ... -
jquery-validate 表单较验
2017-12-05 15:08 673(1) <script type=" ... -
dijit的组件不显示的问题
2011-12-17 17:13 1067在html页面引入： <script type=&qu ... -
dojo 通过widgetid获取对象，dojo.query
2011-12-17 17:12 3626通过widgetid来获取dijit.fr ... -
dojo中grid 不显示的问题？
2011-12-17 16:56 1348解决方法： setTimeout(function(){ ... -
图片延迟加载技术
2011-02-22 09:36 2212尤其是对于高清晰的图片，占的几M的空间。 ImageLazyL ... -
图片的js效果
2010-09-20 17:53 7771.当鼠标放在这个图片上时，图片变换 a {backgrou ... -
Google Maps JavaScript API 实例 --显示自已所在地的地图
2010-09-17 15:09 17151.显示一个详细的地方： <!DOCTYPE html ... -
使用ext2的form提交表单（非AJAX方式）
2010-08-16 09:50 1737http://beckrabbit.iteye.com/blo ... -
js 图片预加载
2010-08-09 15:13 947http://www.iteye.com/topic/7321 ... -
学习js
2010-07-28 11:26 1071http://www.webairness.com/ ... -
js图片切割
2010-06-22 10:28 1107http://www.cnblogs.com/cloudgam ... -
css中应用js
2010-06-21 10:50 1126.TR{ //<tr class=tr> 它是鼠 ... -
javascript的匿名函数
2010-06-05 10:44 1100http://jeneate.blog.163.com/blo ... -
js 刷新页面
2010-06-01 15:41 1287一、自动刷新页面 1.页面自动刷新：把如下代码加 ... -
js 压缩(在线)
2010-05-24 10:52 1118http://www.jb51.net/tools/jsmin ... -
jquery 操作checkbox的例子(全选,反选,获取选取值)
2010-05-18 15:36 1051http://yuleihome.iteye.com/blog ...
相关推荐
在本文中，我们将探讨如何在Layui弹框中实现数据表格中双击选择一条数据的功能。Layui是一款优秀的前端UI框架，提供了丰富的组件，包括表格、弹窗等，可以方便地构建交互式Web应用。 首先，我们需要创建一个包含...
然而，在实际开发过程中，有时可能会遇到layui弹框失效的问题，表现为弹框无法正常显示或者报错。本文将详细探讨这个问题，并提供解决方案。 首先，layui弹框的失效可能有多种原因，其中包括JavaScript文件加载顺序...
LayUI是一个基于前端的轻量级框架，它提供了丰富的组件和优雅的样式，使得开发者可以快速构建现代网页应用。在LayUI中，弹出层（Poplayer）是一个非常重要的功能，它允许用户在不离开当前页面的情况下展示额外的信息...
用JAVASCRIPT实现联动的弹出层窗口的效果，而且加了屏蔽层.
在IT行业中，layui和Vue.js都是非常流行的前端框架。layui是一款基于HTML5的中国风轻量级前端组件库，而Vue.js则是一个用于构建用户界面的渐进式框架。本项目结合了两者，提供了"layui使用vue的例子"，帮助初学者更...
2. Layui弹框的开启与自定义：通过调用`layer.open`方法可以创建一个弹框，该方法允许自定义弹框的标题（`title`）、类型（`type`）、大小（`area`）以及弹框内容（`content`）等属性。弹框类型有多种，如`type:1`...
7. layui弹框：layui的layer模块提供了一种轻量级的弹窗解决方案，可以创建各种类型的弹出层，如提示、确认、加载、iframe等，增强了用户体验。 8. layui布局：layui的layout模块允许开发者轻松实现复杂的页面布局...
在今天的分享中，我们将深入了解如何使用layui框架来固定下拉框的显示条数，并为其添加滚动条。这是一项在网页设计和开发中非常实用的技术，它可以帮助我们控制下拉列表中可以显示的元素数量，当元素数量超出设定...
<div class=layui-form> <input type=text class=txt name=newName lay-verify=newName lay-verType=tips placeholder=请输入姓名> <input type=text class=txt name=newCard lay-verify=newCard lay-...
layui 弹窗父子窗口之间传参数的方法 layui 是一个非常流行的前端框架，它提供了许多实用的功能，例如弹窗功能。弹窗功能可以让用户在当前页面打开一个新的窗口，以便进行一些操作。但是，在layui 弹窗父子窗口之间...
本文将详细解读如何快速解决在使用layui框架进行前端开发时遇到的弹窗组件按Enter键导致重复弹出的问题。LAYui是一个前端UI框架，它基于jQuery，提供了丰富的网页UI组件和一套完整的解决方案。在日常开发中，开发者...
在使用layui框架构建Web应用时，经常会遇到需要在弹出层（popup layer）与主页面之间传递数据的情况。layui提供了一种优雅的方式来实现弹出层的值回传，本文将详细解析这一功能的实现方法。 首先，我们来看一下...
在使用layui框架进行前端开发时，我们经常会遇到需要对用户输入进行限制的情况。例如，在一个输入框中只允许用户输入中文，并且还需要限制输入长度。这篇文章将介绍如何在layui中创建一个只允许输入中文的输入框，...
layui 是一个轻量级的前端组件库，它提供了一系列丰富的UI组件，包括弹出层（popup layer）等。在使用layui时，有时可能会遇到弹出层在页面上瞬间显示后立即消失的问题，这通常是由于多种原因导致的。以下是一些可能...
在本文中，我们将深入探讨如何使用layui框架在弹出层中通过按钮提交iframe表单的方法。layui是一款轻量级的前端UI框架，它提供了丰富的组件和便捷的操作方式，包括弹出层（layer）和表单处理等。在某些场景下，我们...
因为官方没有提供，只能自己实现了，包括按钮倒计时和标题倒计时，标题倒计时在注释部分： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><...sc
在网页开发中，layer是一个常用的JavaScript弹层组件，它提供了丰富的弹窗功能，包括提示、信息、对话框等。在本文中，我们将深入探讨当使用layer弹出窗口时遇到的一个常见问题：用户关闭弹出窗口时意外触发了表单...