实现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时空间性能优化测试代 ...
随机推荐
- 为什么Smalltalk不流行
最近读到一本书,说Python程序员比Java程序员聪明.同理,懂Smalltalk的程序员也比Java程序员聪明.所以,我在StackOverflow上找到这个关闭很久的问题,整理了一下,跟大家分享 ...
- Linux SVN 命令详解(zz)
Linux下常用SVN命令 2012-04-02 11:46:00 标签:服务器 目录 Linux checkout linux系统 1.将文件checkout到本地目录 svn checkout p ...
- 15.Xcode8 升级遇到的问题
一:注释快捷键cmd+/不能用,解决方法: 1. Swift_3.0 没法快捷键(command+/)注释的原因:这个是因为苹果解决xcode ghost,把插件屏蔽了. 2. 解决办法: (1) 终 ...
- 14.Xcode8imageview图片圆角不显示的bug
第一种方法: 在imageView调用clipToBounds的之前,[super awakeFromNib]之后,加上[self.contentView layoutIfNeeded];就可以了,反 ...
- bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...
- String、StringBuffer、StringBuilder的一些小经验……
一说String.StringBuffer和StringBuilder,想必大家都很熟悉,这三者经常在我们的面试题中出现,我也是看到了关于这三个的经典面试题,才触动了我之前工作中的一些经历,故而根据我 ...
- CodeForces 742A Arpa’s hard exam and Mehrdad’s naive cheat
题意:求1378 n次幂的最后一位. 析:两种方法,第一种,就是快速幂,第二种找循环节,也很好找,求一下前几个数就好. 代码如下: #pragma comment(linker, "/STA ...
- HibernateUtil
package com.ssh.util; import org.hibernate.SessionFactory; import org.hibernate.boot.registry.Standa ...
- IB交换机配置命令总结
串口通过远程CRT登录,波特率9600用户名和密码都是adminDo you want to use the wizard for initial configuration?选择no打开ip rou ...
- coalesce函数用法
COALESCE函数会依次检查输入的参数,返回第一个不是NULL的参数,只有当传入COALESCE函数的所有的参数都是NULL的时候,函数才会返回NULL