实现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时空间性能优化测试代 ...
随机推荐
- Freemarket学习整理。
导入freemarker.jar包 把word文档另存为xml格式,2007以上版本支持. 编写代码,把路径更改为xml所在路径. 把需要更改的地方写成${}形式. package Document. ...
- js-正则表达式的替换
正则表达式替换使用的是replace()方法.Replace()方法是用一些字符途欢另一些字符 语法:stringObject.replace(regexp,replacement) regexp 必 ...
- 学习codeIgniter的一点小感受
用CI好几天了,最终还是放弃用CI做完整的项目,感觉CI在前后端的交互上还比较差,比如说用户表单验证,仍然是需要把数据提交给服务器之后才能显示逻辑判断的结果.而这一点明显是相对落后了. 但不可否认CI ...
- java中FileInputStream和FileOutputStream对图片操作的例子
package a.ab; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.F ...
- 通过inflate获取布局，设置layoutparams无效
给ll——addtiem当设置layoutparams无效时,试着修改上一个布局的属性
- webkit浏览器css设置滚动条
主要有下面7个属性: ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scroll ...
- 使用IConfigurationSectionHandler在web.config中增加自定义配置
一. 场景 这里仅举一个简单应用的例子,我希望在web.config里面增加网站的基本信息,如:网站名称,网站版本号,是否将网站暂时关闭等.二. 基本实现方法1. 定义配置节点对应的类:Site ...
- Python 3 —— 控制语句
控制语句 1.if if <s>: ... elif <s>: ... else: ... 2 for for e in list .. if <s> break; ...
- (转)Linux下root密码丢失和运行级别错误的解决办法
我们知道,root用户在Linux中是相当重要的,其地位如同Windows中的Adminstrator 有了root权限我们还能修改其他用户的密码,可是,如果root用户的密码丢失该怎么办? 不用担心 ...
- Django-数据模型
修改model.py文件 from django.db import models # Create your models here. class Question(models.Model): q ...