实现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时空间性能优化测试代 ...
随机推荐
- C# 反转字符串方法
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 反转字符 ...
- Mac打开关闭隐藏文件功能
在终端输入: 打开:defaults write com.apple.finder AppleShowAllFiles -bool true 关闭:defaults write com.apple.f ...
- URAL1132_Square Root
求解方程,x^2=n (mod P). 解二次同余方程的步骤: 1.首先判断勒让德符号(n,p)是否的等于1,即n^((p-1/2)=1 (mod p)是否成立.不成立显然无解.(略) 2.任取0-( ...
- 8天入门wpf（转）
8天入门wpf—— 第一天 基础概念介绍 8天入门wpf—— 第二天 xaml详解 8天入门wpf—— 第三天 样式 8天入门wpf—— 第四天 模板 8天入门wpf—— 第五天 数据绑定 8天入门w ...
- ubuntu14.04上Trac配置记录
系统环境:ubuntu14.04 (并假设Apache2服务可以正常运行) 1. 安装软件: sudo aptitude install trac python-mysqldb 2. 创建数据库Tra ...
- 使用doxygen制作C代码文档
使用doxygen制作C代码文档 C 代码注释风格约定 行间注释 /*! * * 这里是注释 * */ 行内注释 <code here> /*! 这里是注释 */ doxygen 风格的宏 ...
- [转]jQuery实现清空table表格除首行外的所有数据
1.其实网上有很多版本,试了好几个都不行,最后还是查到了一个非常方便的:不会清除表格第一行表头部分. 其中J_tab_fam是table的id. 1 $("#J_tab_fam tr:no ...
- ant 的详细的入门教程
Ant是一个Apache基金会下的跨平台的构件工具,它可以实现项目的自动构建和部署等功能.在本文中,主要让读者熟悉怎样将Ant应用到Java项目中,让它简化构建和部署操作. 一． ...
- TortoiseSVN客户端使用说明
TortoiseSVN客户端使用说明 TortoiseSVN不是一个独立的窗口程序,而是集成在windows右键菜单中,下面对TortoiseSVN的菜单项做简要的说明.01.SVN Checkout ...
- python 装饰器学习（decorator）
最近看到有个装饰器的例子,没看懂, #!/usr/bin/python class decorator(object): def __init__(self,f): print "initi ...