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

尖角的实现很简单的，一般都是通过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. HTML5新标签video在iOS上默认全屏播放

    今天做一个app时发现一个问题,应用html5中的video标签加载视频,在Android手机上默认播放大小,但是换成iPhone手机上出问题了,默认弹出全屏播放,查找了好多论坛,都没有谈论这个的.然 ...

  2. Linux Command Line 笔记（1）

    Yunduan CUI graphical user interfaces make easy tasks easy, while command line interfaces make diffi ...

  3. 安卓开发学习历程1——《第一行代码》coolweather项目setOnItemClickListener函数，Sql语句修改对模拟app程序机影响

    今天,将<第一行代码>最后实战的coolweather项目,认真做了一遍. 今晚,在书中第一阶段开发代码认眞在Android studio敲完,发现setOnItemClickListen ...

  4. 【转载】关于OpenGL的图形流水线

    本文转载自 http://blog.csdn.net/racehorse/article/details/6593719 GLSL教程 这是一些列来自lighthouse3d的GLSL教程,非常适合入 ...

  5. 一般处理程序上传文件（html表单上传、aspx页面上传）

    html 表单上传文件        一般处理程序由于没有 apsx 页面的整个模型和控件的创建周期,而比较有效率.这里写一个用 html 表单进行文件上传的示例.        1. 表单元素选用 ...

  6. PLC数据访问

    PLC是很多机床设备上都有的控制中心,和PLC通信是很多做工厂管理系统的必经之路. 一年前有个项目需要和PLC(西门子S200)通信,不仅读取里面的数据,还需要写数据需要控制机床的运行,当时不大了解, ...

  7. Jquery 防止页面刷新

    1.禁止鼠标右键功能$(document).ready(function() { $(document).bind("contextmenu",function(e) { aler ...

  8. [zz] Principal Components Analysis (PCA) 主成分分析

    我理解PCA应该分为2个过程:1.求出降维矩阵:2.利用得到的降维矩阵,对数据/特征做降维. 这里分成了两篇博客,来做总结. http://matlabdatamining.blogspot.com/ ...

  9. 支持Cookie并开放了一些特殊设置项的HttpWebClient

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...

  10. navicat连接My SQL时忘记root密码处理方法

    前端时间安装完My SQL5.6以后很长时间没用过,用navicat连接时有错误提示 应该是密码错误了,但是忘记了root的密码. 在网上找了很久,终于找到修改root密码的方法并修改成功. 1. 关 ...