JAVAWEB实训(3) layer

最新推荐文章于 2022-01-11 14:40:45 发布

hnu哈哈

最新推荐文章于 2022-01-11 14:40:45 发布

阅读量640

点赞数

分类专栏： Java理论学习文章标签： javascript html5 html

本文链接：https://blog.csdn.net/qq_43496675/article/details/120666191

版权

Java理论学习专栏收录该内容

41 篇文章 0 订阅

订阅专栏

1. 概述

layer 是一款历年来备受青睐的 Web 弹出层组件，具备全方位的解决方案，面向各个水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。

在与同类组件的比较中，layer 会更能被开发者所选择。这不仅是凭「脸」取胜，而是它尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，layer 甚至还兼容了包括 IE6 在内的所有主流浏览器。其数量可观的基础属性和方法，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，广受欢迎。

下载layer工具包：layer-v3.1.1
提取码：y56h

2. 使用

把压缩包内的layer文件夹复制到项目文件夹下，除此之外还需要jquery的js文件

使用时引入即可

3. 常用的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layer demo</title>
    <script src="js/jquery2.1.4.js"></script>
    <script src="js/layer/layer.js"></script>
    <script>
        function msgTest(){
            layer.msg("要提示出的文字",function (){
              //窗口关闭时执行
            });
        }

        function loadTest(){
          //返回弹出层id
          var windowId = layer.load(1);//0~16表示不同加载效果
          setTimeout(function (){//两秒以后关闭
            layer.close(windowId);//通过窗口id进行关闭
          },2000);
        }

        function msg_loadTest(){
            layer.msg("提示文字",{icon:16,shade:0.01});
        }

        function alertTest(){
            layer.alert("文字",{icon:10});
        }

        function tipsTest(){
            layer.tips("这里有一个秘密","#s1",{tipsMore:true,tips:3});//tips:1~4
        }
    </script>
</head>
<body>
  <button onclick="msgTest()">msg函数</button>
  <button onclick="loadTest()">load函数</button>
  <button onclick="msg_loadTest()">msg函数(load效果)</button>
  <button onclick="alertTest()">alert函数</button>
  <button onclick="tipsTest()">tips函数</button>
  锄禾日<span id="s1">当午</span>汗滴禾下土
</body>
</html>

效果：

msg函数：