zoukankan      html  css  js  c++  java
  • layer

    layer是一款近年来备受青睐的web弹层组件。

    ayer采用MIT开源协议,将会永久性提供无偿服务

    文档:http://layer.layui.com/

    配置

    (1)获取layer

    获取地址:http://layer.layui.com/

    (2)配置部署

    下载layer后,把它部署到你项目中的任何一个目录(当然,我们推荐放在前端相关目录里),你不能去挪动layer里面的文件结构,因为它们是不可拆散的组合。就像这样:

    (3)页面引用

    <!doctype html>
    <html>
    <head>
    <title>开始使用layer</title>
    </head>
    <body>
    <button id="test1">小小提示层</button>
    
    你必须先引入jQuery1.8或以上版本
    <script src="jQuery的路径"></script>
    <script src="layer.js的路径"></script>
    <script>
    
    $('#test1').on('click', function(){
      layer.msg('Hello layer');
    });
    
    </script>
    当然,你也可以写在外部的js文件
    </body>
    </html>   

    (4)使用

    由于layer是基于jQuery,你可以选择用jQuery的api方式去抒写。当你想弹出一个layer实例的时候,你首先应该绑定事件,就像上面的那个例子。

    父层demo.html

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>layer-test</title>
      <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
      <script src="layer/layer.js"></script>
      
      <script>
          layer.ready(function(){ 
        
            $("p").click(function(){
            layer.open({
            type: 2,
            title: 'test',
            maxmin: true,
            area: ['800px', '500px'],
            content: 'form.html',
            end: function(){
            layer.tips('Hi', '#about', {tips: 1})
            }
        });
        
        })
      });
      </script>
    </head>
    <body>
    
        <div>
            <p class="test1">test1</p>
        </div>
    
    </body>
    </html>

    弹出层form.html

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>form</title>
    </head>
    
    <body>
      <div>
        <form action="#">
        First name:<br>
        <input type="text" name="firstname" value="Mickey">
        <br>
        Last name:<br>
        <input type="text" name="lastname" value="Mouse">
        <br><br>
        <input type="submit" value="提交">
        <input type="reset" value="取消">
        </form> 
      </div>
    </body>
    
    </html>
  • 相关阅读:
    nsurlSession
    IOS 锁
    常见问题
    xcode编译太慢
    ios之keychain
    iOS多线程系列(四)----GCD之Dispatch Queues
    iOS多线程系列(三)----NSOperationQueue
    iOS多线程系列(二)------NSOperation
    iOS多线程系列(一)------NSThread
    kvm虚拟机最佳实践系列3-kvm克隆和静态迁移
  • 原文地址:https://www.cnblogs.com/ouym/p/7338531.html
Copyright © 2011-2022 走看看