一、效果图
效果视频
https://www.bilibili.com/video/BV1SC4y1h7qX/
二、思路部分
首先,做出基本的布局样式,将CSS样式写出,封装到CSS文件里
其次,将提示布局写出,将CSS样式和界面布局分别分装到CSS和JS文件里,这里我写了5个,如图所示
三、功能实现部分:
根据演示效果:按一个按钮,提示框出现,根据你按的是取消或者确认,在“尚未操作”文本那里,会变成别的文本。用jQuery写出功能,如图所示:
其他操作: (function($){})(window.jQuery):匿名函数与自执行
$confirm: 提示界面布局(ES6写法)
$.otherAction:添加一个对象,在里面创建带有回调函数的confirm方法
confirm:1、将界面放到htmlbody中并显示
2、监听取消事件
如果有回调函数,就执行这个回调函数
然后隐藏界面
3、监听确认事件
如果有回调函数,就执行这个回调函数
然后隐藏界面
$confirm: 提示界面布局
$.loadAction:添加一个对象,在里面创建confirm方法
confirm:1、将这个界面放到html的body当中并且显示
2、监听界面的点击状态,如果点击,就隐藏
还有几个都差不多,这里放图:
html:
第一张,不多说,各种CSS文件和JS文件的导入,还有原始界面的布局
第二张:
用jQuery来写JS脚本,实现功能:
1、监听删除按钮事件:
调用对象deleteAction的confirm方法,
带有回调函数:
指定需要改写的文本域的文本
2、3、4、5同上