基于jQuery消息提示框插件Tipso
今天要分享的这款jQuery消息提示框插件名叫Tipso,它的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件。效果图如下:
实现的代码:
- <div class="dowebok">
- <h2>
- 1、默认</h2>
- <div class="inner">
- <span id="tip1" data-tipso="dowebok.com">Tipso</span></div>
- </div>
- <div class="dowebok">
- <h2>
- 2、左边显示</h2>
- <div class="inner">
- <span id="tip2" data-tipso="dowebok.com">Tipso</span></div>
- </div>
- <div class="dowebok">
- <h2>
- 3、背景颜色</h2>
- <div class="inner">
- <span id="tip3" data-tipso="dowebok.com">Tipso</span></div>
- </div>
- <div class="dowebok">
- <h2>
- 4、使用title属性</h2>
- <div class="inner">
- <span id="tip4" title="内容来自 title 属性">Tipso</span></div>
- </div>
- <div class="dowebok">
- <h2>
- 5、单击显示/隐藏</h2>
- <div class="inner">
- <span id="tip5" data-tipso="dowebok">Tipso</span>
- <p>
- <a id="btn5" href="javascript:">显示</a></p>
- </div>
- </div>
- <div class="dowebok">
- <h2>
- 6、更新内容</h2>
- <div class="inner">
- <span id="tip6" data-tipso="dowebok.com">Tipso</span>
- <p>
- <input type="text"><a id="btn6" href="javascript:">更新</a></p>
- </div>
- </div>
- <div class="dowebok">
- <h2>
- 7、在图片上使用</h2>
- <div class="inner">
- <img id="tip7" src="data:images/tipso.png" alt="" data-tipso="dowebok.com">
- </div>
- </div>
- <div class="dowebok">
- <h2>
- 8、回调函数</h2>
- <div class="inner">
- <span id="tip8" data-tipso="dowebok.com">Tipso</span>
- <p>
- 状态:<em id="status"></em></p>
- </div>
- </div>
js代码:
- $(function () {
- // 1
- $('#tip1').tipso({
- useTitle: false
- });
- // 2
- $('#tip2').tipso({
- useTitle: false,
- position: 'left'
- });
- // 3
- $('#tip3').tipso({
- useTitle: false,
- background: 'tomato'
- });
- // 4
- $('#tip4').tipso();
- // 5
- $('#tip5').tipso({
- useTitle: false
- });
- $('#btn5').on({
- click: function (e) {
- if ($(this).text() == '显示') {
- $(this).text('隐藏');
- $('#tip5').tipso('show');
- } else {
- $(this).text('显示');
- $('#tip5').tipso('hide');
- }
- e.preventDefault();
- }
- });
- // 6
- $('#tip6').tipso({
- useTitle: false
- });
- $('#btn6').on('click', function () {
- var $val = $(this).prev().val();
- if ($val) {
- $('#tip6').tipso('update', 'content', $val);
- }
- });
- // 7
- $('#tip7').tipso({
- useTitle: false
- });
- // 8
- $('#tip8').tipso({
- useTitle: false,
- onBeforeShow: function () {
- $('#status').html('beforeShow');
- },
- onShow: function () {
- $('#status').html('show');
- },
- onHide: function () {
- $('#status').html('hide');
- }
- });
- });
基于jQuery消息提示框插件Tipso的更多相关文章
- jQuery消息提示框插件Tipso
在线演示 本地下载
- 基于jquery的提示框JavaScript 插件,类Bootstrap
目录 基于jquery的提示框JavaScript 插件,类Bootstrap 基于jquery的提示框JavaScript 插件,类Bootstrap 源码 github地址: https://gi ...
- Flutter Toast消息提示框插件
Flutter Toast消息提示框插件 在开发flutter项目中,想必大家肯定会用到toast消息提示,说到这里, 大家肯定会想到https://pub.dev/ 插件库, 但是插件市场上有太多类 ...
- js消息提示框插件-----toastr用法
(本文系转载) 因为个人项目中有一个提交表单成功弹出框的需求,从网上找了一些资料,发现toastr这个插件的样式还是不错的.所以也给大家推荐下,但是网上的使用资料不是很详细,所以整理了一下,希望能给 ...
- jquery消息提示框
用于ajax类型提示的,只显示一个. 只是给个思路而已,代码有很多不足. 4个参数,有2个是可选 调用 $.mTip('类型','显示内容',显示时间,回调函数) 类型: 0 为加载 1 为成功 2 ...
- TIPSO--基于JQUERY的消息提示框插件,用起来蛮顺手
项目产品经理要求, 呵呵,关于描述,十个字以内的,直接显示,多于十个字的,用消息框提示: 相关模板及JS如下: $(function() { $('.tip').tipso({ useTitle: f ...
- jQuery 消息提示/通知插件
常见消息提醒,类似于Chrome notification,易于使用,用户体验赞. // Simple $.sticky('hi, every body rock!'); // Advantage $ ...
- 强大的响应式jQuery消息通知框和信息提示框插件
lobibox是一款功能很强大的jQuery消息通知框和信息提示框插件.这个插件分为两个部分:消息通知框和信息提示框.它能很好的结合Bootstrap使用. 信息提示框 lobibox的信息提示框能够 ...
- [原]发布一个jQuery提示框插件,Github开源附主站,jquery.tooltips.js
一个简单精致的jQuery带箭头提示框插件 插件写好快一年了,和一个 弹出框插件(点击查看) 一起写的,一直没有整理出来,昨天得功夫整理并放到了github上,源码和网站均可在线看或下载. CSS中的 ...
随机推荐
- redis学习-列表(list)常用命令
redis学习-列表(list)常用命令 lpush:从列表左侧头部添加数据 rpush:从右侧尾部添加数据 lpop:从给左侧头部取出一个元素 rpop:从右侧尾部取出一个元素 lrange:取 ...
- JAVA主流日志梳理
JAVA主流日志梳理 引入 历史故事 Log4j - JDK1.3及以前 JUL - JDK1.4 JCL - 日志门面commons-logging的出现 SLF4j - 可能是最好的日志框架 lo ...
- SpringCloud-分布式配置中心(基于SpringBoot2.X)
一.配置中心的作用:可以将多种应用的配置进行集中式的管理,将这些配置统一存放到git或svn里面存储: 二.搭建SpringCloud-Config-Server 2.1如图后续步骤勾选Config ...
- mysql中加入海量数据
delimiter // create procedure m() begin declare num int; set num=1; while num < 100000 insert int ...
- 2019/3/2周末 java集合学习(一)
Java集合学习(一) ArraysList ArraysList集合就像C++中的vector容器,它可以不考虑其容器的长度,就像一个大染缸一 样,无穷无尽的丢进去也没问题.Java的数据结构和C有 ...
- hadoop2.7集群安装
1. 按照官方文档对单节点的配置,将etc/hadoop/core-site.xml中的localhost改成node13. http://hadoop.apache.org/docs/r2.7.3/ ...
- vue图片上传
之前花了两个月用vue做了一个建筑照片我的webApp,前端就我一人,负责用vue写页面对接接口,后台一个程序员负责写接口,嵌套个安卓ios的壳.搞的是风风火火,过程也是很心累,大多不在技术,在于所谓 ...
- python yield 关键字
最近看代码看到python里面的yield关键字,和我之前接触的语言好像都没有来着,我就查了查它的含义,大概理解如下: >>> def createGenerator(): ... ...
- Photon自定义加载Resource之外的资源
PhotonNetwork.cs 结尾添加如下代码: #region >>> Photon自定义异步加载GameObject public delegate void CustomL ...
- .net core DI 注册 Lazy<> 类型
当我们在 .net core (2.1) 中运行如下代码注入 Lazy<T> 变量的时候: public AccountService(Lazy<IHttpContextAccess ...