jQuery自定义弹窗插件dialog.js(原创)

所属分类:UI-对话框,弹出层

 10823  82  查看评论 (4)
分享到微信朋友圈
X
jQuery自定义弹窗插件dialog.js(原创) ie兼容6

更新时间:2020-08-30 23:01:42

更新说明:增加了一些新的配置项,大大丰富了功能:

  - easyClose: 点击遮罩层也可以关闭窗口,默认值false

  - afterInit:用于初始化后运行函数

内置函数(新增内置函数)

  - clearAllData(id)  去除对应id的对话框里的所有数据,可用于提交成功后

  - moveBtn(id, height)  向下移动按钮的位置,参数id是对话框的id,参数height是向下移动的高度


更新时间:2020-08-30 00:31:01

简介

一个轻量级的、可高度自定义的、可自动收集数据的弹窗对话框插件。

快速上手

插件依赖(这些需要引入)

- jquery_3.4.1

- dialog.css

- dialog.js

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/dialog.css" />
</head>
<body>
    <button type="button" id="openDialog">点我打开对话框</button>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/dialog.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $("#openDialog").dialog({
            id: "superDialog", //必填,必须和已有id不同
            title: "我的标题", //对话框的标题 默认值: 我的标题
            type: 0, //0 对话框有确认按钮和取消按钮 1 对话框只有关闭按钮
            form: [{
                description: "用户名",
                type: "text",
                name: "username",
                value: "tom"
            }, {
                description: "密码",
                type: "text",
                name: "password",
                value: "123456"
            }], //form 是填充表单的数据,必填
            submit: function(data) {
                //data是表单收集的数据
                console.log(data);
            }
        })
    </script>
</body>
</html>

当你点击确定的时候,就会执行submit里面的函数,

submit里面的参数data,就是收集整理后的数据。

可以直接通过 data.属性名 获取 详细数据

参数解析

id

- 创建成功后弹窗的id

title

- 窗口的标题,默认值:我的标题

type

- 0 对话框有确认按钮和取消按钮 

- 1 对话框只有关闭按钮

form

- 渲染表单的数据来源

- 数组里面有几个对象,就渲染几个输入框

   - description: 输入框的具体描述,对应输入框前面的文字描述

   - type:对应生成的input标签的type  <input type="text" }/>

   - name: 对应收集数据后对应的属性名

   - value: 输入框的初始值,可以不设置

   -  easyClose: 点击遮罩层也可以关闭窗口,默认值false

   - afterInit:用于初始化后运行函数

- 内置函数,可以用于配置一些参数

   -  clearAllData(id)  去除对应id的对话框里的所有数据,可用于提交成功后

   -   moveBtn(id, height)  向下移动按钮,参数id是对话框的id,参数height是向下移动的高度

兼容性

IE9+都兼容,因为使用了ES6语法,IE8无法模拟。

里面有dialog.js和dialog.min.js , 其中dialog.min.js是经过压缩和Bable转换的,直接调用dialog.min.js就好了。

相关插件-对话框,弹出层

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    MERCURY 0
    2021/4/21 18:32:26
    请问怎么在弹出框中添加下拉选项呀 回复
    腐草为萤 0
    2021/2/3 17:54:02
    可以当作登录/注册用吗
        躬自厚而薄责于人1
        2021/2/3 22:11:20
        可以,但是登陆注册,相关的接口js逻辑,得你自己写
        大海0
        2021/3/9 22:37:41
        submit重复提交问题怎么解决的?每刷新一下留存一次,重复调后台很严重啊
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复