实现tip浮层
实现简单的tip浮层：
html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>demo标题</title>
<script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js" charset="utf-8"></script>
<link rel="stylesheet" href="http://a.tbcdn.cn/s/kissy/1.3.0/css/dpl/base.css" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="tip.css" />
<style>
p {
margin-left:20px;
}
li {
display: block;
width: 200px;
height: 200px;
background: grey;
border: 2px solid white;
}
</style>
</head>
<body>
<h2>基本模式</h2> <ul class="base-style">
<li id="tip1">test1</li>
<li id="tip2">test2</li>
<li id="tip3">test3</li>
<li id="tip4"></li>
<li id="tip5"></li>
<li id="tip6"></li>
<li id="tip7"></li>
<li id="tip8"></li>
<li id="tip9"></li>
<li id="tip10"></li>
<li id="tip11"></li>
<li id="tip12"></li>
</ul> <script>
var S = KISSY;
if (S.Config.debug) {
var srcPath = "../../../";
S.config({
packages:[
{
name:"gallery",
path:srcPath,
charset:"utf-8",
ignorePackageNameInUri:true
}
]
});
} S.use('gallery/tip/1.0/index', function (S, Tip) {
var init = function(){ new Tip('#tip1',{
headerText:'跟随鼠标定位',
contentText:'鼠标定位点为左下角，默认mouseHook:true',
delayIn:100,
fleeting:false,
closeable:true
}); new Tip('#tip2',{
headerText:'相对定位',
contentText:'points:["tl","br"],mouseHook:false',
points:['tl','br'],
mouseHook:false,
delayIn:100
}); new Tip('#tip3',{
headerText:'相对定位',
contentText:'不需要箭头,points:["tr","bl"],arrow:false',
points:['tr','bl'],
mouseHook:false,
arrow:false,
delayIn:100
}); new Tip('#tip4',{
headerText:'相对定位',
contentText:'带箭头,points:["tr","bl"],arrow:true',
points:['tl','bl'],
offsetX:-15,
mouseHook:false,
delayIn:100
}); new Tip('#tip5',{
headerText:'相对定位',
contentText:'points:["lb","tr"],arrow:false',
points:['lb','tr'],
mouseHook:false,
arrow:false,
delayIn:100
}); new Tip('#tip6',{
headerText:'定位到很远',
contentText:'points:["lb","tr"],offsetX:-123',
points:['lb','tr'],
mouseHook:false,
offsetX:-132,
arrow:false,
delayIn:100
}); new Tip('#tip7',{
headerText:'鼠标跟随定位',
contentText:'跟随鼠标移动而移动 withMouseMove:true',
withMouseMove:true,
arrow:false,
delayIn:100
}); new Tip('#tip8',{
contentText:'没有标题,headerText:""',
arrow:false,
delayIn:100
}); new Tip('#tip9',{
headerText:'没有正文,contentText:""',
contentText:'',
arrow:false,
delayIn:100
}); new Tip('#tip10',{
headerText:'定义offsetX和offsetY',
contentText:'points:["lb","tr"],offsetX:-20,offsetY:-100',
mouseHook:false,
offsetX:-30,
offsetY:-100,
points:['lb','tr'],
arrow:false,
delayIn:100
}); new Tip('#tip11',{
headerText:'鼠标跟随的offsetX和offsetY',
contentText:'withMouseMove:true,offsetX:-20,offsetY:-100',
withMouseMove:true,
offsetX:-30,
offsetY:-100,
arrow:false,
delayIn:100
}); new Tip('#tip12',{
headerText:'带箭头的offsetX和offsetY',
contentText:'arrow:true,points:["lb","tr"],offsetX:-120,offsetY:-30',
withMouseMove:true,
mouseHook:false,
arrow:true,
offsetX:-128,
offsetY:-30,
points:['tc','bc'],
delayIn:100,
smarty:false
}); new Tip('#simpletip'); new Tip('#t1',{
contentText:'鼠标可以移入Tip',
fleeting:false,
delayIn:100
}); new Tip('#t2',{
contentText:'鼠标不可以移入Tip',
delayIn:100
}); }; S.ready(function(){
init();
});
// var tip = new Tip("#tip");
})
</script>
</body>
</html>
style.css:
.base-style {
width:160px;height:52px;
}
.base-style li {
display:block;
float:left;width:50px;height:50px;border:1px solid #ccc;margin-left:6px;margin-top:6px;
cursor:pointer;
}
.custom-tip-style {
width:300px;border:5px solid #116497;
padding:0px;
border-radius:4px;
}
.custom-tip-style .hd {
background-color: #0D7CD0;
color:white;
font-size:11px;
padding:4px;
}
.custom-tip-style .z-close {
position:absolute;
width:18px;height:14px;
cursor:pointer;
font:bold 10px/13px Tahoma,sans-serif;
text-align:center;
border:0px solid #aaa;
background:#116497;
color:white;
text-indent:;
border-radius:3px;
vertical-align:middle;
text-decoration:none;
display:block;
top:4px;right:4px;
display:none;
}
.custom-tip-style .bd{
padding:5px;
line-height:150%;
background:#1E90FF;
color:white;
font-size:11px;
}
tip.css:
.z-tip {
border-radius:4px;
box-shadow:0px 0px 8px 1px #bbb;
background:white;
border:1px solid #cfcfcf;
padding:8px;
position:absolute;
/*test*/
left:100px;
margin-top:20px;
}
.z-tip {
max-width:350px;
min-width:120px;
/*
*width:expression((this.width > 350) ? "350px" : this.width + "px" );
*/
}
.z-tip .z-taper {
background:url('http://img03.taobaocdn.com/tps/i3/T1bEXSFXtgXXaSQP_X-16-16.png') no-repeat transparent;
display:block;
overflow:hidden;
position:absolute;
}
.z-tip .z-close {
position:absolute;
width:18px;height:14px;
cursor:pointer;
font:bold 10px/13px Tahoma,sans-serif;
text-align:center;
border:1px solid #aaa;
color:#777;
text-indent:;
border-radius:3px;
vertical-align:middle;
text-decoration:none;
display:block;
top:4px;right:4px;
display:none;
}
.tl .z-taper{
background-position:0px 0px;
width:16px;height:8px;
top:-8px;
left:15px;
}
.tc .z-taper{
background-position:0px 0px;
width:16px;height:8px;
top:-8px;
left:50%;
margin-left:-8px;
}
.tr .z-taper{
background-position:0px 0px;
width:16px;height:8px;
top:-8px;
right:15px;
}
.br .z-taper{
background-position:0px -8px;
width:16px;height:8px;
bottom:-8px;
right:15px;
}
.bl .z-taper{
background-position:0px -8px;
width:16px;height:8px;
bottom:-8px;
left:15px;
}
.bc .z-taper{
background-position:0px -8px;
width:16px;height:8px;
bottom:-8px;
left:50%;
margin-left:-8px;
}
.rt .z-taper{
background-position:-8px 0px;
width:8px;height:16px;
right:-8px;
top:15px;
}
.rb .z-taper{
background-position:-8px 0px;
width:8px;height:16px;
right:-8px;
bottom:15px;
}
.rc .z-taper{
background-position:-8px 0px;
width:8px;height:16px;
right:-8px;
top:50%;
margin-top:-8px;
}
.lt .z-taper{
background-position:0px 0px;
width:8px;height:16px;
left:-8px;
top:15px;
}
.lb .z-taper{
background-position:0px 0px;
width:8px;height:16px;
left:-8px;
bottom:15px;
}
.lc .z-taper{
background-position:0px 0px;
width:8px;height:16px;
left:-8px;
top:50%;
margin-top:-8px;
}
在网上看了个写的非常好的tip浮层实现，收了...
原文地址：http://gallery.kissyui.com/tip/1.0/guide/index.html
GitHub：https://github.com/kissygalleryteam/tip
实现tip浮层的更多相关文章
- Android浮层点击穿透问题
最近做微信公众号开发的时候遇到一个问题,上线后发现此问题后检查代码没有发现问题,无奈只能回滚到上一个版本. 问题是这样的:页面一个选择的浮层,在浮层点击确定后,下面的页面会自动提交 在测试环境上无法重 ...
- 项目经理排期的几个tip
互联网敏捷开发的流程可以演绎出很多玩法,但最好都遵循以下几个tip: 1, 对项目经理最重要的一条是,通读所有需求文档,跟相关PM进行彻底沟通,把需求都搞熟搞透,防止漏排任务: 2, Stroy拆分要 ...
- 基于1.3.3版本tooltip的datagrid单元格tip实现
基于1.3.3版本tooltip的datagrid单元格tip实现 2013年05月25日 ⁄ datagrid ⁄ 共 6122字 ⁄ 评论数 26 ⁄ 被围观 7,033 views+ 文章目录 ...
- Windows Universal 应用 – Tip Calculator
声明 以下内容取材于 Bob Tabor 的课程<Windows Phone 8.1 Development for Absolute Beginners>,链接地址为:http://ww ...
- 2015.5.2-2015.5.8 Tip jQuery ，前端组件库，inline-block元素间距等
有忙于它事,故延迟了,但在坚持! 1.Tip jQuery 2.给span加display: inline-block; 怎样能对齐? 解决方法:vertical-align: bottom: ...
- JS弹出浮层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 封装tip控件
在界面上有时需要显示一个提示,大多的前端框架都把提示做成一个带有小尖角的提示框,因此自己也仿照了实现了一下,效果图如下: 尖角的实现很简单的,一般都是通过css将div的宽高设置为0,然后将尖角朝向的 ...
- [js开源组件开发]tip提示组件
tip提示组件 常见的应用场景中,总是难免会遇到提示信息,比如显示不完全时需要鼠标移上去显示title,比如验证时的错误提示,比如操作按钮的辅助说明等,所以我独立出来了一个小的js组件,tip提示组件 ...
- Java程序性能优化Tip
本博客是阅读<java time and space performance tips>这本小书后整理的读书笔记性质博客,增加了几个测试代码,代码可以在此下载:java时空间性能优化测试代 ...
随机推荐
- [php-src]扩展中封装业务与 call_user_function 的使用建议
内容均以php5.6.14为例. 从一个封装 uniqid 的例子来讲. /* {{{ wrapper of uniqid */ PHP_FUNCTION(fox) { // #1. zval *pr ...
- 第四章 使用Docker镜像和仓库
第4章 使用Docker镜像和仓库 回顾: 回顾如何使用 docker run 创建最基本的容器 $sudo docker run -i -t --name another_container_mum ...
- 数字与字母 随机数小demo
public String generateRandomId(){ String chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHI ...
- yii使用createCommand()增删改查
查询单条数据$sql = "SELECT `name` FROM `table` WHERE id='7'";$users=Yii::$app->db->createC ...
- smarty模板中获得循环次数
在smarty中可以有两种写法来获得循环次数(当然lz只会这两种:>,要是有大神会有其他的,欢迎补充) 写法一: {section name=loop loop=3} {$smarty.loop ...
- [fortify] preg_replace命令注入
慎用preg_replace危险的/e修饰符(一句话后门常用) 作者: 字体:[增加 减小] 类型:转载 时间:2013-06-19我要评论 要确保 replacement 构成一个合法的 PHP 代 ...
- Win7 64位 VS2015环境使用SDL2-2.0.4
之前在VS中使用SDL2,如果只链接SDL2.lib,会提示 error LNK2019: unresolved external symbol _main referenced in functio ...
- Spring绑定表单数据
Spring提供了一些jsp页面常用的form标签,很大程度上提高了我们开发的速度,不用再一个个的标签去绑定属性,而且后台接收数据也很简单,可以直接接收object对象作为属性.官方form标签介绍的 ...
- MIPS ABI n32意味着什么？
ABI是应用程序二进制接口的简称,用于标识处理器的工作模式及规范目标文件的编码格式. MIPS指令集架构自MIPS3起正式支持64位工作模式,故编码可以遵从o32(o意思是old).n32(n意思是n ...
- INotifyPropertyChanged接口的PropertyChanged 事件
INotifyPropertyChanged 接口用于向客户端(通常是执行绑定的客户端)发出某一属性值已更改的通知. 例如,考虑一个带有名为 FirstName 属性的 Person 对象. 若要提供 ...