轻巧的jQuery提示框插件Tipso演示

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>轻巧的jQuery提示框插件Tipso演示_dowebok</title><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript" src="js/tipso.min.js"></script><link rel="stylesheet" href="css/tipso.min.css"><style>* {margin: 0;padding: 0;}body {font-family: "Microsoft Yahei";}h1 {padding: 45px 0;font: 32px "Microsoft Yahei";text-align: center;border: 1px solid red;}.dowebok {width: 500px;margin: 30px auto 0;border: 1px solid red;}.dowebok h2 {padding: 20px;font-size: 16px;font-weight: 400;background-color: #f5f5f5;border: 1px solid blue;}.dowebok .inner {padding: 100px;text-align: center;border: 3px solid black;}.dowebok p {position: relative;font-size: 14px;color: blueviolet;border: 1px solid red;height: 30px;}.dowebok input {position: absolute; top: 0px;left: 20px;margin-left: 40px;padding: 5px;border: 1px solid green;font-family: "Microsoft Yahei";}.dowebok a{margin-top: 4px;float: right;margin-right: 30px;}img{border: 2px solid blueviolet;}</style></head><body><h1>轻巧的jQuery提示框插件Tipso演示</h1><div class="dowebok"><h2>1、默认</h2><div class="inner"><span id="tip1" data-tipso="dowebok.com1">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.com2">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="111" 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><script>$(function() {// 1$('#tip1').tipso({useTitle: false});// 2$('#tip2').tipso({useTitle: false,position: 'bottom'//  position: 'left'   //right,top});// 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() {alert(1);$('#status').html('beforeShow');},onShow: function() {alert(2);$('#status').html('show');},onHide: function() {$('#status').html('hide');alert(3);}});});</script><p class="vad"><a href="http://www.dowebok.com/" target="_blank">dowebok.com</a><a href="http://www.dowebok.com/147.html" target="_blank">说 明</a><a href="http://www.dowebok.com/147.html" target="_blank">下 载</a></p><!-- 以下是统计及其他信息，与演示无关，不必理会 --><style>.vad {margin: 50px 0 30px;font-family: Consolas, arial, 宋体, sans-serif;text-align: center;}.vad a {display: inline-block;height: 36px;line-height: 36px;margin: 0 5px;padding: 0 50px;font-size: 14px;text-align: center;color: #eee;text-decoration: none;background-color: #222;}.vad a:hover {color: #fff;background-color: #000;}</style></body></html>

轻巧的jQuery提示框插件Tipso演示相关推荐

轻巧的jQuery提示框插件Tipso
http://www.jq22.com/jquery-info2307 转载于:https://www.cnblogs.com/coding4/p/6932191.html
15个友好的jQuery 提示框插件
需要在用户把光标移到某个元素上时显示一些额外信息时,提示框是一种不错的方式,提示框会在鼠标停留的时候显示,鼠标移开时消失. 适当的使用提示框能大大提升网站的友好度,并且可以节省一些不必要的网页空间,今 ...
在指定位置上方出现通用jquery悬浮提示框插件全站通用
工作需要,网站悬浮提示框要求出现在指定元素上方,由于工作量修改比较大所以要求全站通用,所以写了一个juqery插件,插件很简单,大家可以自行更改样式. 请转载此文的朋友务必附带原文链接,谢谢. 原文链 ...
数据可视化——（提示框插件）
提示框插件有很多,不同的框架中选择的也不一样. 本文主要分享toastr插件总结它的使用步骤如下: 使用步骤: 加载 jqury.js.toastr.css 和 toastr.js 文件全局配置. ...
vue.js提示框插件(vuejs-dialog)使用指南
vue.js提示框插件更多文章,请访问我的博客综述在项目中,代替浏览器原生的alert.confirm和prompt 名称:vuejs-dialog 用途:简洁美观的对话框官网:地址 gith ...
html js 循环提示框,纯js超酷消息提示框插件notice.js
notice.js是一款纯js超酷消息提示框插件.notice.js为纯js编写,没有任何依赖文件.通过它可以在页面上制作出漂亮的toast消息通知框效果.该js消息提示框插件的特点还有: 支持4中情 ...
java 输入框插件_[Java教程][英] 推荐 15 个 jQuery 选择框插件
[Java教程][英] 推荐 15 个 jQuery 选择框插件 0 2015-07-23 15:00:06 jQuery Selectbox Plugins let you create beaut ...
04.tooltip提示框插件，linkbutton按钮插件与progressbar进度条插件
tooltip提示框插件 1 渲染方式 2 属性 3 事件 4 方法 linkbutton按钮插件 21 渲染方式 22 属性 23 方法 progressbar进度条插件 1 渲染方式 2 属性 3 ...
漂亮实用的提示框插件SweetAlert
SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框,它将提示框进行了美化,并且允许自定义,支持设置提示框标题.提示类型.内容展示图片.确认取消按钮文 ...

轻巧的jQuery提示框插件Tipso演示

轻巧的jQuery提示框插件Tipso演示相关推荐

最新文章

热门文章