zoukankan      html  css  js  c++  java
  • layer插件学习——弹框(自定义页)

    本文是自己整理的关于layer插件的弹框样式结果

    介绍:

      官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,layer已成为国内最多人使用的web弹层组件,GitHub自然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在使用layer。

      同时也高居年度最受欢迎的开源项目榜单:2017年度最流行的十大中国开源软件:https://www.jianshu.com/p/d7a76eee56e6

      受到如此追捧也是有原因的,使用起来快速方便容易上手,界面美观大方不累赘,看上去很舒服,在项目中用到一部分,也记录下一些常用的功能和属性

    项目中常见的一些弹框层,快速使用这个文档,layui
    官方总文档:http://layer.layui.com/
    此文档已经不在维护http://layer.layui.com/api.html
    新版弹框文档:http://www.layui.com/doc/modules/layer.html
    讨论社区:http://fly.layui.com/

      以下代码在线调试网址:http://www.layui.com/doc/modules/layer.html

    一:弹出到另外一个页面的写法,及其关闭,添加保存之后关闭页面的写法

      运用:点击添加按钮,弹出另外一个页面

    $("#adduser").on("click", function() { 
      layer.open({   type : 2,  title : '添加标签', area : [ '800px', '470px' ], fix : false, content :'useradd.jsp', end : function() { }
      }); });

      页面点击关闭按钮和添加后保存按钮逻辑代码:

    //添加后保存(数据也可以使用表单序列化提交)
    var index = parent.layer.getFrameIndex(window.name);
    $("#addBtn").on("click", function() {
      $.ajax({   url : "xxxxxxxxxx", data : {   loginName : $("#loginName").val(), username : $("#username").val(), password : $("#password").val(), rePassword:$("#rePassword").val(), xxxxx : $("#xxxxxxxxxxx option:selected").val(), }, type : "post", success : function(data) { }   }); })
    //关闭按钮 $('#close').on('click', function() {   parent.layer.close(index); })

      

     更多弹出实例:http://layer.layui.com/test/more.html

    图片.png


    普通示例:http://layer.layui.com/

  • 相关阅读:
    HDUOJ---1863畅通工程
    HDUOJ---1879 继续畅通工程
    HDUOJ---1102Constructing Roads
    HDUOJ---1102Constructing Roads
    hdu--DFS
    poj1611---The Suspects
    nyoj-----幸运三角形
    HDUOJ --2523
    HDUOJ---1195Open the Lock
    HDUOJ----2952Counting Sheep
  • 原文地址:https://www.cnblogs.com/javahr/p/9314485.html
Copyright © 2011-2022 走看看