又有好久没更新过博文了,一来最近一直在开发一套商业性网站,没什么精力来更新,二来这个网速确实有点乌龟。

好了,废话不说了;直接入正题。

玩过QQ空间的人都知道,在进行一些操作后,页面会出现一个漂亮的类似alert的tips提示,如图:

看着非常舒服,有时候需要更改某张设置的时候,前面的图片也会变成一个蓝色的感叹号,有时候操作失败或者网络延迟,前面的图片又会变成一个红色的叉叉,提示是不是很人性化呢?

再来看看其图片的原始构成;如图:

会扣代码的童鞋也许就能自主的将名称为gb_tip_layer.png 以及gb_tip_layer_ie6.png的两张png背景图拉下来。看着是不是很神奇?一张结构乱哄哄的图片,却能构成本文第一张图片那样美轮美奂的tips提示框。

先纠正一个观点,这个原始图的构成可不是乱哄哄的,而是非常有条理的,稍微懂得一点点csssprite技术的人就不难理解了,多的就不再赘述介绍了,我们要的是能够在自己的网站里使用类似的tips框架。很好,现在开始介绍这些开源的js类库(其实很大一部分上来说还得结合css与html布局的知识------我们简称为UI或者前端布局设计吧)。

1.lhgDialog库

开源库地址:https://bbs.lhgcore.com/

demo演示:https://bbs.lhgcore.com/lhg4/_demo/demo.html 其最新版为4.1.1,这个库是我在用的,也比较接近于QQ空间的tips,而且还可以模拟出js的许多原生态函数的功能,如Alert、Promopt,最为关键的是该库即支持单独使用也可以作为jQuery的一个插件来使用。最适用的功能就是html DOM以及事件的扩展与支持是非常适用的。当然,他也是支持fixed静态定位以及蒙版、拖拽等功能的。

怎么使用就不介绍了,具体请查看demo或者API文档。

2.JBOX库

官方地址:https://www.kudystudio.com/ (其实也是他的demo地址)

这个库的外观非常漂亮,以上图片就可以显示出其具有的功能了。当让拖动也是必须支持的。

这个库有个非常良好、漂亮的外观,建议使用。具体的使用方法请参考官方文档。

3.asyncui

官方地址:https://www.asyncui.com/

demo地址:https://www.asyncui.com/demo.html

这个库最近好像是在升级,官方站已经打不开了,而且这个库是个jQuery插件,是基于jQuery的,jQuery历来对BOM的支持是比较弱的,所以也造成了该库的一些弊端,比如拖动的时候会自动选择网页文本,拖动不流畅、fixed定位以及蒙版不全等等问题,有待改进,但该库作为一个学习型库,是非常好的,可以通过其代码的编写了解jQuery插件的开发。

今天就到此,以上介绍的三款插件,实际上都是基于jQuery库的;我选择了第一款库,原因就在于其提供了独立版本的tips库,可以摆脱对jQuery的依赖。

最后秀一段:

下方为有色背景,上方的tips提示框是不是有点类似QQ空间的意思了?

转载请注明本文标题和链接:《Js弹窗类库的开源库介绍》

html开源类库,Js弹窗类库的开源库介绍相关推荐

  1. 开源Math.NET基础数学类库使用(13)C#实现其他随机数生成器

    原文:[原创]开源Math.NET基础数学类库使用(13)C#实现其他随机数生成器                本博客所有文章分类的总目录:http://www.cnblogs.com/asxiny ...

  2. 开源Math.NET基础数学类库使用(11)C#计算相关系数

    阅读目录 前言 1.Math.NET计算相关系数的类 2.Correlation的实现 3.使用案例 4.资源                本博客所有文章分类的总目录:[总目录]本博客博文总目录-实 ...

  3. 【原创】开源Math.NET基础数学类库使用(06)直接求解线性方程组

    阅读目录 前言 1.数值分析与线性方程 2.Math.NET解线性方程源码分析 3.Math.NET求解线性方程的实例 4.资源                本博客所有文章分类的总目录:[总目录]本 ...

  4. 【原创】开源Math.NET基础数学类库使用(14)C#生成安全的随机数

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  5. 开源Math.NET基础数学类库使用(04)C#解析Matrix Marke数据格式

    原文:[原创]开源Math.NET基础数学类库使用(04)C#解析Matrix Marke数据格式 开源Math.NET基础数学类库使用系列文章总目录:   1.开源.NET基础数学计算组件Math. ...

  6. 【原创】开源Math.NET基础数学类库使用(05)C#解析Delimited Formats数据格式

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  7. 开源Math.NET基础数学类库使用(03)C#解析Matlab的mat格式

    开源Math.NET基础数学类库使用(03)C#解析Matlab的mat格式 原文:[原创]开源Math.NET基础数学类库使用(03)C#解析Matlab的mat格式 开源Math.NET基础数学类 ...

  8. 【原创】开源Math.NET基础数学类库使用(04)C#解析Matrix Marke数据格式

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  9. Faiss:Facebook 开源的相似性搜索类库

    Facebook 在今年 3 月份发布了 Facebook AI 相似性搜索(简称 Faiss)项目,该项目提供的类库可以从多媒体文档中快速搜索出相似的条目--这个场景下的挑战是基于查询的传统搜索引擎 ...

  10. 超棒的CSS开源UI界面元素类库 - TopCat

    日期:2013-4-25  来源:GBin1.com TopCoat是一套免费的开源UI元素类库,整套类库不使用任何javascript,而是使用CSS和HTML来生成. 整套UI元素非常丰富,使用标 ...

最新文章

  1. 使用Leangoo做销售管理体系
  2. 太拼了:谷歌第一编程语言小白也能学会!
  3. 2016去哪儿编程题:乘坐公交
  4. 服务型存储市场的现状
  5. graph slam tutorial : 从推导到应用1
  6. kafka 不同分区文件存储_Kafka 系列(二)文件存储机制与Producer架构原理怎样保证数据可靠性??...
  7. 系统优化的方法有哪些
  8. 考研初试将近,收好这份准备清单,祝你一战成硕
  9. 微控制器MCU四大平台你了解多少?(二)
  10. 工作流实现自定义表单
  11. 大数据Hadoop之——Hadoop图形化管理系统Hue(Hue环境部署)
  12. Eclipse如何使用Git完成代码比对并提交操作
  13. gsp计算机软件管理,药品进销存管理系统(含GSP管理)
  14. SharpShooter Reports.Web 7.5 Crack
  15. JTXQ、JTT部标模拟终端使用说明 --2 JTT808协议菜单
  16. 在线思维导图的制作教程分享,帮你快速掌握绘制要领
  17. excel countifs 计算包含了空白单元格,结果错误,不对,特别大。
  18. 计算机视觉目标检测算法综述
  19. springboot发送qq邮件详细步骤
  20. Android-实现邮箱格式的验证

热门文章

  1. python数据分析挖掘与可视化课件_python数据分析与可视化
  2. linux 安装qq2014,Ubuntu14.04安装wine QQ
  3. Nodejs KOA服务搭建打包
  4. oo结尾的单词发音规律
  5. 如何根据图片找到图中的地点
  6. 强大的Java辅助类工具箱Hutool
  7. Ubuntu18.04安装mysql8.0.XX
  8. Linux + ChromiumOS + ....操作系统资源(持续更新...)
  9. Chromium OS开启Android ADB调试、进入安卓开发者模式
  10. SOAP协议和HTTP协议的区别