导入控件主题

<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/

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

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

    浏览器高度: FireFox中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高 ...

  2. 简单 JS 弹出层 背景变暗

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 一个简单的弹出层ProgressBar

    https://github.com/eltld/SimpleLoading

  4. layer弹出层框架alert与msg详解

    ayer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,layer ...

  5. layer —— 一个简单的jQuery弹出层插件

    layer的使用 4.24更新:注意:layer现在有旧版1.8.5版本和新版本3.0版本的,对应引入的JQ也要不同,相对应的JQ引入1.1和3.1,否则JQ会出问题 4.21更新: 解答4-19的问 ...

  6. layui弹出层之应用实例讲解

    从酒店管理系统到智能门锁及其现在的资源共享平台,layui框架,我们团队用的比较多的就是这个layui弹出层. layui弹出层,除了页面iframe层我们比较常用还有就是表单校验和其他相关的友好提示 ...

  7. Layui弹出层详解

    今天空了学习一下弹出层 还是一步步展示把 首先,layer可以独立使用,也可以通过Layui模块化使用.我个人一直是用的模块化的 所以下面素有的都是基于模块化的. 引入好相关文件就可以开始啦  今天放 ...

  8. LayUI之弹出层

    1.导入插件 layui使用需要导入layui的js和css: <link rel="stylesheet" href="layui/css/layui.css&q ...

  9. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

随机推荐

  1. 网站目录下多出的 core 文件

    1.core 文件简介 在一个程序崩溃时,一般会在指定目录下生成一个core文件.core文件仅仅是一个内存映象(同时加上调试信息),主要是用来调试的.也就是说这种文件是程序意外中断时候生成的 deb ...

  2. centos redis 自动重启

    配置init脚本 对于Centos,有一份https://gist.github.com/1335694 经过修改,如下: ########################## PATH=/usr/l ...

  3. maven windows 环境变量

    MAVEN_HOME,内容是解压的maven文件路径 Path中添加 %MAVEN_HOME%\bin 为了测试安装成功,打开命令提示符,输入 mvn -version

  4. Argument 1 passed to Illuminate\Auth\SessionGuard::login() must be an instance of Illuminate\Contracts\Auth\Authenticatable, instance of App\User given,

    使用laravel内置的注册认证系统,注册账号,提示如下错误.Google之后,发现github的一个答案,解决了.分享一下 Argument 1 passed to Illuminate\Auth\ ...

  5. HDU4267 树状数组

    题意描述: 给定一个数组,有两种操作: 操作一:a b k c 对于区间a~b之间的元素如果下标满足(i-a)%k=0则给元素i加上c 操作二:a          查询下标为a的元素当前值 解题思路 ...

  6. 详解VirtualBox虚拟机网络环境解析和搭建-NAT、桥接、Host-Only、Internal、端口映射

    本文以VirtualBox为例 如果出现主机无法ping通虚拟机的情况,请首先确认虚拟机防火墙已关闭. 一.NAT模式 特点: 1.如果主机可以上网,虚拟机可以上网 2.虚拟机之间不能ping通 3. ...

  7. 利用 gdb 探究main(int argc, char *argv[]){} 中的char *argv[]

    在 Linux 系统中编写小程序 代码如下 编译并采用gdb调试  在调试之前设置三个参数   a   bb   ccc 输入 start 执行代码到 return 0; 从这里可以看到 argc = ...

  8. SaaS模式介绍

     SaaS是Software-as-a-service(软件即服务). SaaS是一种通过Internet提供软件的模式,用户不用再购买软件,而改用向提供商租用基于Web的软件,来管理企业经营活动,且 ...

  9. leetcode 每个结点的右指针 python

    每个节点的右向指针     给定一个二叉树 struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *n ...

  10. [HDU5713]K个联通块

    [HDU5713]K个联通块 题目大意: 有一张\(n(n\le14)\)个点,\(m\)条边无重边的无向图,求有多少个边集,使得删掉边集里的边后,图里恰好有\(k\)个连通块. 思路: 一个显然的动 ...