在界面上有时需要显示一个提示,大多的前端框架都把提示做成一个带有小尖角的提示框,因此自己也仿照了实现了一下,效果图如下:

尖角的实现很简单的,一般都是通过css将div的宽高设置为0,然后将尖角朝向的那一边的边的宽度设置为0,然后给两边的边框设置宽度为一个大于0的数字,并将颜色设置为透明,然后将剩余的一边框设置宽度和颜色即可。

下面是我的实现方式:

首先是对应的HTML文件:

<!DOCTYPE>
<html>
<head>
<title>tip_demo</title>
<link rel="stylesheet" href="css/tip.css">
<script src="js/jquery-2.2.3.js"></script>
<script src="js/tip.js"></script>
<script>
$(function(){
leftTip();
rightTip();
topTip();
bottomTip();
});
</script>
<style>
.tip-left, .tip-right, .tip-top, .tip-bottom
{
width:250px;
}
</style>
</head>
<body>
<div class="tip-left">
This is left arrow tip
</div>
<br>
<div class="tip-right">
This is right arrow tip
</div>
<br>
<div class="tip-top">
This is top arrow tip
</div>
<br>
<div class="tip-bottom">
This is bottom arrow tip
</div>
</body>
</html>

CSS文件:

.tip-left-arrow
{
width:;
height:;
border-left:0px solid transparent;
border-top:5px solid transparent;
border-right:10px solid gray;
border-bottom:5px solid transparent;
display:inline-block;
} .tip-left-content
{
display:inline-block;
height:50px;
line-height:50px;
vertical-align:middle;
background-color:gray;
border-radius:10px;
padding:5px;
padding-left:10px;
text-align:left;
} .tip-right-arrow
{
width:;
height:;
border-right:0px solid transparent;
border-top:5px solid transparent;
border-left:10px solid gray;
border-bottom:5px solid transparent;
display:inline-block;
} .tip-right-content
{
display:inline-block;
height:50px;
line-height:50px;
vertical-align:middle;
background-color:gray;
border-radius:10px;
padding:5px;
padding-right:10px;
text-align:right;
} .tip-top-arrow
{
width:;
height:;
border-top:0px solid transparent;
border-left:5px solid transparent;
border-bottom:10px solid gray;
border-right:5px solid transparent;
display:inline-block;
} .tip-top-content
{
height:50px;
line-height:50px;
vertical-align:middle;
background-color:gray;
border-radius:10px;
padding:5px;
padding-left:10px;
} .tip-bottom-arrow
{
width:;
height:;
border-bottom:0px solid transparent;
border-left:5px solid transparent;
border-top:10px solid gray;
border-right:5px solid transparent;
display:inline-block;
} .tip-bottom-content
{
height:50px;
line-height:50px;
vertical-align:middle;
background-color:gray;
border-radius:10px;
padding:5px;
padding-right:10px;
}

最后是JS文件:

function leftTip()
{
var length = $(".tip-left").length;
for(var i=0; i<length; i++)
{
var content = $(".tip-left:eq(" + i + ")").text();
$(".tip-left:eq(" + i + ")").text("");
$(".tip-left:eq(" + i + ")").append("<div class='tip-left-arrow'></div>");
$(".tip-left:eq(" + i + ")").append("<div class='tip-left-content'>" + content + "</div>");
} } function rightTip()
{
var length = $(".tip-right").length;
for(var i=0; i<length; i++)
{
var content = $(".tip-right:eq(" + i + ")").text();
$(".tip-right:eq(" + i + ")").text("");
$(".tip-right:eq(" + i + ")").append("<div class='tip-right-content'>" + content + "</div>");
$(".tip-right:eq(" + i + ")").append("<div class='tip-right-arrow'></div>"); }
} function topTip()
{
var length = $(".tip-left").length;
for(var i=0; i<length; i++)
{
var content = $(".tip-top:eq(" + i + ")").text();
$(".tip-top:eq(" + i + ")").text("");
$(".tip-top:eq(" + i + ")").append("<div class='tip-top-arrow'></div>");
$(".tip-top:eq(" + i + ")").append("<div class='tip-top-content'>" + content + "</div>");
$(".tip-top:eq(" + i + ")").css("text-align", "center");
} } function bottomTip()
{
var length = $(".tip-bottom").length;
for(var i=0; i<length; i++)
{
var content = $(".tip-bottom:eq(" + i + ")").text();
$(".tip-bottom:eq(" + i + ")").text("");
$(".tip-bottom:eq(" + i + ")").append("<div class='tip-bottom-content'>" + content + "</div>");
$(".tip-bottom:eq(" + i + ")").append("<div class='tip-bottom-arrow'></div>");
$(".tip-bottom:eq(" + i + ")").css("text-align", "center");
} }

实现需要jquery的支持。

封装tip控件的更多相关文章

  1. .net的自定义JS控件,运用了 面向对象的思想 封装 了 控件(.net自定义控件开发的第一天)

    大家好!我叫刘晶,很高兴你能看到我分享的文章!希望能对你有帮助! 首先我们来看下几个例子 ,就能看到 如何 自定义控件! 业务需求: 制作  一个   属于 自己的    按钮 对象    ,然后 像 ...

  2. 封装BackgroundWorker控件(提供源代码下载,F5即可见效果)

    Demo源码 背景 经常做些小程序或者小DEMO的时候会用到异步,多线程来执行一些比较耗时的工作同时将进度及时进行反馈.我通常会使用位于[ System.ComponentModel]命名空间下的Ba ...

  3. 封装TeeChart控件

    public class MyChart { //字段 private TChart tChart; /// <summary> /// 构造函数,默认不是3D效果 /// </su ...

  4. IP Editor IP控件(对比一下封装IP控件)

    HWND hIpEdit; void __fastcall TForm2::FormCreate(TObject *Sender) { hIpEdit = CreateWindow(WC_IPADDR ...

  5. js封装日历控件

    最终效果 代码实现 <script> $(function () { $(".j-calendar").calendar({ date: '2017-08-03', c ...

  6. 9.2.1 .net framework下的MVC 控件的封装(上)

    在写.net core下mvc控件的编写之前,我先说一下.net framework下我们MVC控件的做法. MVC下控件的写法,主要有如下三种,最后一种是泛型的写法,mvc提供的控件都是基本控件. ...

  7. 控件使用经验-MVP模式+控件封装

    项目背景 几年前参与了一个面向学校的人事管理软件的开发,基于WinForm平台.今天主要想谈一谈其中关于控件的使用经验.这个项目我们大量使用了第三方控件.由于这个产品的生命周期很长,我们在设计时要考虑 ...

  8. 基于wke封装的duilib的webkit浏览器控件,可以c++与js互交,源码及demo下载地址

    转载请说明原出处,谢谢~~ 前些日子用wke内核封装了duilib的webkit浏览器控件,好多群里朋友私聊我希望可以我公布源码,今天把这个控件的源码和使用demo公布.其实这个控件封装起来没什么难度 ...

  9. 将VLC库封装为duilib的万能视频播放控件

    转载请说明出处,谢谢~~ 昨天封装好了基于webkit的浏览器控件,修复了duilib的浏览器功能的不足,而我的仿酷狗播放器项目中不光需要浏览器,同时也需要视频播放功能,也就是完成MV的功能.所以我打 ...

随机推荐

  1. SolidWorks的简单介绍及基本用法

    写这博客的动机来源于构建之法微信群里面的的一位老师.sw是一个强大的机械设计制图软件,我记得大一的时候学制图学的3d软件是inventor,而后发现sw用起来更方便更高效,于是就自学了sw,由于是自学 ...

  2. linux别名和快捷键

    别名永久生效和删除别名 永久生效: vi ~./bashrc 写入环境变量配置文件 删除别名: unalias 别名 source命令可以让本身需要重新登录的命令不重新登录也生效 命令生效顺序: 1. ...

  3. 【Cocos2d-x 3.x】屏幕自适应匹配

    在进行游戏开发时, 由于市场上的Android移动设备的分辨率有很多种,而且IOS移动设备的分辨率也不相同,为了能让手游能在90%以上的移动设备较为完美的运行,因此需要考虑屏幕的自适应问题,让一套资源 ...

  4. OS实验报告——作业调度模拟程序

    一.目的和要求 1. 实验目的 (1)加深对作业调度算法的理解: (2)进行程序设计的训练. 2.实验要求 用高级语言编写一个或多个作业调度的模拟程序. 单道批处理系统的作业调度程序.作业一投入运行, ...

  5. mysql 求最小值/最大值

    计算所有人最低工资和最高工资,需分别用到min()和max()函数.(请注意,MIN和MAX函数会忽略NULL值) select min(sal) as min_sal , max(sal) as m ...

  6. System.Linq.Enumerable 中的方法 Aggregate 函数

      语法: public static TSource Aggregate<TSource>( this IEnumerable<TSource> source, Func&l ...

  7. C#参数化执行SQL语句,防止漏洞攻击本文以MySql为例【20151108非查询操作】

    为什么要参数化执行SQL语句呢? 一个作用就是可以防止用户注入漏洞. 简单举个列子吧. 比如账号密码登入,如果不用参数, 写的简单点吧,就写从数据库查找到id和pw与用户输入一样的数据吧 sql:se ...

  8. JavaScriptPolyfillShim 在JavaScript中Shim和Polyfill有什么区别?

    在JavaScript的世界里,有两个词经常被提到,那就是Shim和Polyfill,它们指的都是什么,又有什么区别?在本文中,将简短的给大家介绍他们之间的联系和区别.Shim一个shim就是一个库, ...

  9. Kubernetes系统架构简介

    1. 前言 Together we will ensure that Kubernetes is a strong and open container management framework fo ...

  10. 如何通过WPS 2013 API 将Office(Word、Excel和PPT)文件转PDF文件

    1. 描述 PDF 文件是一种便携文件格式,是由Adobe公司所开发的独特的跨平台文件格式.PDF文件以PostScript语言图象模型为基础,无论在哪种打印机上都可保证精确的颜色和准确的打印效果,即 ...