layUI 几个简单的弹出层

导入控件主题

<link rel="stylesheet" href="dist/themes/default/style.min.css" />

创建容器

也就是包含jsTree控件的元素,一般使用<div>就可以了。

 <div id="jstree_demo_div"></div>

引入jQuery

jsTree依赖于jQuery,所以需要引入jQuery:

<script src="dist/libs/jquery.js"></script>

引入jsTree

部署环境使用压缩版的jsTree.min.js,如果是开发环境可以使用jsTree.js

<script src="dist/jstree.min.js"></script>

创建jsTree实例

DOM加载完毕之后,就可以创建jsTree实例对象了。

$(function () { $(‘#jstree_demo_div‘).jstree(); });

监听事件

jsTree使用事件来监听用户与属性控件之间的交互,所以给jsTree绑定事件也很容易,下面这个例子监听选择事件

$(‘#jstree_demo_div‘).on("changed.jstree", function (e, data) {
  console.log(data.selected);
});

与jsTree实例进行交互

创建完实例之后,就可以调用实例的方法了,下面三个方法实现的功能是一样的:

$(‘button‘).on(‘click‘, function () {
  $(‘#jstree‘).jstree(true).select_node(‘child_node_1‘);
  $(‘#jstree‘).jstree(‘select_node‘, ‘child_node_1‘);
  $.jstree.reference(‘#jstree‘).select_node(‘child_node_1‘);
});

介绍几个常见的弹出层效果代码:
//初体验
layer.alert(‘内容‘)
//第三方扩展皮肤
layer.alert(‘内容‘, {
  icon: 1,
  skin: ‘layer-ext-moon‘ //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则,去这里查阅
})
//询问框
layer.confirm(‘您是如何看待前端开发?‘, {
  btn: [‘重要‘,‘奇葩‘] //按钮
}, function(){
  layer.msg(‘的确很重要‘, {icon: 1});
}, function(){
  layer.msg(‘也可以这样‘, {
    time: 20000, //20s后自动关闭
    btn: [‘明白了‘, ‘知道了‘]
  });
});
//提示层
layer.msg(‘玩命提示中‘);
//墨绿深蓝风
layer.alert(‘墨绿风格,点击确认看深蓝‘, {
  skin: ‘layui-layer-molv‘ //样式类名
  ,closeBtn: 0
}, function(){
  layer.alert(‘偶吧深蓝style‘, {
    skin: ‘layui-layer-lan‘
    ,closeBtn: 0
    ,anim: 4 //动画类型
  });
});
//捕获页
layer.open({
  type: 1,
  shade: false,
  title: false, //不显示标题
  content: $(‘.layer_notice‘), //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
  cancel: function(){
    layer.msg(‘捕获就是从页面已经存在的元素上,包裹layer的结构‘, {time: 5000, icon:6});
  }
});
//页面层
layer.open({
  type: 1,
  skin: ‘layui-layer-rim‘, //加上边框
  area: [‘420px‘, ‘240px‘], //宽高
  content: ‘html内容‘
});
//自定页
layer.open({
  type: 1,
  skin: ‘layui-layer-demo‘, //样式类名
  closeBtn: 0, //不显示关闭按钮
  anim: 2,
  shadeClose: true, //开启遮罩关闭
  content: ‘内容‘
});
//tips层
layer.tips(‘Hi,我是tips‘, ‘吸附元素选择器,如#id‘);

//iframe层
layer.open({
  type: 2,
  title: ‘layer mobile页‘,
  shadeClose: true,
  shade: 0.8,
  area: [‘380px‘, ‘90%‘],
  content: ‘mobile/‘ //iframe的url
}); 

官方网站链接:http://layer.layui.com/
时间: 2024-11-08 01:46:24

layUI 几个简单的弹出层的相关文章

实现一个简单的弹出层

弹出层的实现方式是让一个块层遮挡住最底下的层,在最顶上显示相应的内容,因为最底下的块级和最上面的块级属于一个页面,他们之间也可以共享一些数据(实现一些特定的操作) 下面是简单的一个实现的过程 首先我们定义一个基本的页面结构 <div id="show"> //最底下的层 <input type="button" value="测试" id="test"/> </div> <div id

火狐浏览器高度&amp;制作简单万年历&amp;弹出层

浏览器高度: FireFox中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 万年历: 1 <!DOCTYPE html> 2 <html> 3 4 &l

Layui 总结(1) 弹出层

1.弹出小提示tips       默认吸附在自己地方控制弹出的位置 可以让其吸附在其他元素附近  ,在内容后面增加一个jq选择器 <input type="text"> <span id="ss">asdasdasdasdweq</span> <script> function tan() { layer.tips('我是另外一个tips,只',"#ss" ,{ tips: [1, '#3c3c3

简单的弹出层加遮罩层效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c

弹出层详解,从简单到复杂

一.最简单的弹出 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

layer弹出层框架alert与msg详解

layer--->web弹层组件 代码: 1 layer.alert('见到你真的很高兴', {icon: 6}); 这是一个最简单的弹出层,可根据icon配置左边的图标 通常情况下,除了弹窗之外我们一般都会有对按钮做回调处理的一些操作 如图: 1 layer.alert('墨绿风格,点击确认看深蓝', { 2 skin: 'layui-layer-molv' //样式类名 自定义样式 3 ,closeBtn: 1 // 是否显示关闭按钮 4 ,anim: 1 //动画类型 5 ,btn: ['

自定义弹出层!

当不能运用框架的弹出层时,自定义简单的弹出层! <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <head> <title>弹出层</title> <script src="jquery-1.6.2.min.js" type="text/javascript

LAYUI弹出层详解

今天空了学习一下弹出层 还是一步步展示把 首先,layer可以独立使用,也可以通过Layui模块化使用.我个人一直是用的模块化的 所以下面素有的都是基于模块化的. 引入好相关文件就可以开始啦  今天放图片把 试着学一下放图片 1.最简单的弹层,这个弹层的效果其实就是一个加了特效和样式的alert();代码如下: <script>layui.use("layer", function () {var layer = layui.layer;layer.msg("大家

jquery 简单弹出层

预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* width height is defined by javascript */ position: absolute; top:0; left: 0; z-index: 1000; background-color: #000; opacity: 0.2; *filter:alpha(opacity=2