RTC脚本模型课堂 - ShowMessage(Star5的博客)
ShowMessage对delphi开发人员而言,是个非常熟悉的玩意,常常需要在软件上做一些合适的提醒,以达到更好的用户体验。今天我们来介绍一下网站里的提示框,也就是JavaSciprt中的alert,同时也介绍一下如何使用三方的js插件,来达到更好的效果。
首先,我们来看一下JavaScript的alert代码和效果,如下:
1
2
3
|
<script type= "text/javascript" > alert( 'hello world!' ); </script> |
这就是js基本的提示框样式了,比较简单,我们一般在调试时用来输出一些数据用用,正式场合一般不用,所以就这样简单的盖过吧。
推荐一个三方的js插件,名字叫sweetalert,官网地址是 http://t4t5.github.io/sweetalert/ github地址是 https://github.com/t4t5/sweetalert ,简单介绍一下它的用法和效果,如下:
首先,讲下如何安装sweetalert,非常简单,只要在页中引用它的js和css就可以了,代码如下:
1
2
|
<script src= "//cdn.bootcss.com/sweetalert/1.1.3/sweetalert-dev.min.js" ></script> <link href= "//cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel= "stylesheet" > |
我这里是引用的cdn上的链接,你也可以去官网下载到本地,引用本地文件。然后就可以开始调用它了,代码如下:
1
2
3
|
<script type= "text/javascript" > swal( "Hello world!" ); </script> |
也就是把alert直接替换成swal就行了,是不是很简单?效果如下:
我们再来介绍一下它的其它几种用法,效果图就不贴了,只贴代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
//用于提示出错信息 swal({ <a href= "title:"","这是个出错提示" >title: "" , "这是个出错提示</a>!" , type: "error" , confirmButtonColor: "#428bca" , confirmButtonText: "关闭" }); //用于提示完成信息,注意timer参数,是指这个时间后自动关闭提示框 swal({ <a href= "title:"","恭喜!操作完成!",timer: 5000,type:"success"" >title: "" , "恭喜!操作完成!" , ti</a><a href= "mer: 5000,t" >mer: 5000, t</a><a href= "title:"","恭喜!操作完成!",timer: 5000,type:"success"" >ype: "success" </a>, confirmButtonColor: "#428bca" , confirmButtonText: "关闭" }); |
当然还有询问提示框等应用方式,比如询问是否进行删除操作,代码和效果如下:
1
2
3
4
5
6
7
8
9
10
11
12
|
swal({ title: "Are you sure?" , text: "You will not be able to recover this imaginary file!" , type: "warning" , showCancelButton: true , confirmButtonColor: "#DD6B55" , confirmButtonText: "Yes, delete it!" , closeOnConfirm: false }, function (){ swal( "Deleted!" , "Your imaginary file has been deleted." , "success" ); }); |
其它的一些用法,请参考官网的介绍,今天是否学会如何为您的网站或者应用页增加提示框了呢?网上还有很多类似的js插件,可以像delphi的vcl一样帮您解决很多问题,增加开发效率。
https://www.offeu.com/www/index_id_134.html
RTC脚本模型课堂 - ShowMessage(Star5的博客)的更多相关文章
- 浅谈Linux下的五种I/O模型 两篇别人的博客
http://blog.csdn.net/sinat_34990639/article/details/52778562 http://www.cnblogs.com/chy2055/p/5220 ...
- hash课堂测试补分博客
题目要求: 开放地址法: 概念: 所谓的开放定址法就是一旦发生了冲突,就去寻找下一个空的散列地址,只要散列表足够大,空的散列地址总能找到,并将记录存入. 它的公式为: 解题过程(在下图中): 拉链法: ...
- 【技术博客】基于JsPlumb和JQuery-UI的流程图的保存和再生成
开发组在开发过程中,都不可避免地遇到了一些困难或问题,但都最终想出办法克服了.我们认为这样的经验是有必要记录下来的,因此就有了[技术博客]. 基于JsPlumb和JQuery-UI的流程图的保存和再生 ...
- MarkWord - 可发布博客的 Markdown编辑器 代码开源
因为前一段时间看到 NetAnalyzer 在Windows10系统下UI表现惨不忍睹,所以利用一段时间为了学习一下WPF相关的内容,于是停停写写,用了WPF相关的技术,两个星期做了一个Markdow ...
- hexo建立github,gitcafe博客并实时同步的要点
把hexo博客的源码和生成的页面实时同步到github和gitcafe. 用搜索引擎搜索"github 博客"等关键字会出现大量很好的文章教小白一步步搭建.我这里列出一些关键点,希 ...
- 使用Hexo搭建个人博客的终极资料
一.前言 Hexo 是一个基于 NodeJs 博客框架,可以快速的帮我们搭建一个博客系统,Hexo使用的是Markdown(下文简称MD)解析文章的,在几秒内即可利用靓丽的主体生成静态网页. 推荐使用 ...
- Django1.7开发博客
转自: http://www.pycoding.com/articles/category/django 基于最新的django1.7写的,通俗易懂,非常适合新手入门. 感谢博主! 参考教程: htt ...
- 为你的CSDN博客添加CNZZ流量统计功能
一.流量统计介绍 流量统计是指通过各种科学的方式,准确的纪录来访某一页面的访问者的流量信息,目前而言,必须具备可以统计. 1.简介 统计独立的访问者数量(独立用户.独立访客): 可以统计独立的IP地址 ...
- Flask—08-建立自己的博客(02)
博客项目 上一篇内容完善 自定义字段验证函数 class RegisterForm(FlaskForm): ... def validate_username(self, field): user = ...
随机推荐
- P1279 字串距离 (动态规划)
题目描述 设有字符串X,我们称在X的头尾及中间插入任意多个空格后构成的新字符串为X的扩展串,如字符串X为”abcbcd”,则字符串“abcb□cd”,“□a□bcbcd□”和“abcb□cd□”都是X ...
- 2>&1使用
2>&1使用 一 相关知识 1)默认地,标准的输入为键盘,但是也可以来自文件或管道(pipe |).2)默认地,标准的输出为终端(terminal),但是也可以重定向到文件,管道或后引号 ...
- response.sendRedirect(location)与rd.forward()区别
在Java Web开发中,经常会用到跳转页面的方法,一般有下面两种方法. HttpServletResponse response = new HttpServletResponse(); respo ...
- 花匠(codevs 3289)
题目描述 Description 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大,也越来越挤.栋栋决定把这排中的一部分花移走,将剩下的留在原地,使得剩下的花能有空间长大,同时,栋栋希望剩下的花 ...
- 标准C程序设计七---31
Linux应用 编程深入 语言编程 标准C程序设计七---经典C11程序设计 以下内容为阅读: <标准C程序设计>(第7版) 作者 ...
- linux 内核源码arch/ 目录的前世今生
历史的痕迹:在最新的linux-2.6.31/arch/arm/文件夹下,仍然保留Linux最初向ARM处理器移植的痕迹,最初的移植由黑客完成,在老的移植的代码文件的头部保留着黑客的名字:最初的ARM ...
- awk 对简单文本处理试水
#juanjuan是一个文件 [root@localhost c_test]# cat juanjuan , , bffd97d0 , , bffd97cc , , bffd97c8 , , #-F ...
- Laravel 之Artisan
简介: Artisan是Laravel中自带的命令行工具的名称: 由强大的Symfony Console组件驱动的: 提供了一些对应用开发有帮助的命令: 查看所有可用的Artisan的命令 php a ...
- NSArray,NSMutableArray的一些常用方法
不可变数组 ——NSArray 常用的初始化一个数组: NSArray *array1 = [[NSArray alloc] init]; NSArray *array2 = ...
- 让Mac OS X下的终端像Linux那样拥有丰富多彩的颜色显示
我们知道Linux下的命令行终端具有颜色回显功能,用ls命令查看目录或者文件,终端会以不同的颜色来区分:使用vim命令行编辑器打开脚本或其他源程序代码会以语法高亮模式显示.而Mac OS X下的终端却 ...