这里使用Less来制作带箭头的提示框,跟css比起来,方便多了,可以剩下很多的代码,别的不扯了,先看看效果吧。
这里我实现了4个方向的提示框,下面是具体实现代码:
提示框代码:
<div class="top_prompt">
<div class="top_triangle">
<span class="line"></span>
<span class="back"></span>
</div>
<div class="prompt_border">
上提示框<br/>
</div>
</div>
<div class="left_prompt">
<div class="top_triangle">
<span class="line"></span>
<span class="back"></span>
</div>
<div class="prompt_border">
左提示框<br/>
</div>
</div>
<div class="right_prompt">
<div class="top_triangle">
<span class="line"></span>
<span class="back"></span>
</div>
<div class="prompt_border">
右提示框<br/>
</div>
</div>
<div class="bottom_prompt">
<div class="top_triangle">
<span class="line"></span>
<span class="back"></span>
</div>
<div class="prompt_border">
下提示框<br/>
</div>
</div>
less部分:
这里将实现提示框的代码封装到一个library.less文件中的,方面多个地方调用,其他less文件使用该文件时,直接使用@import "library";就可以引入该文件了
library.less文件代码:
//边框
.border(all,@b_w:1px,@color:#cdcdcd,@style:solid){
border:@b_w @style @color;
}
//上边框
.border(top,@b_w:1px,@color:#cdcdcd,@style:solid){
border-top:@b_w @style @color;
}
//右边框
.border(right,@b_w:1px,@color:#cdcdcd,@style:solid){
border-right: @b_w @style @color;
}
//下边框
.border(bottom,@b_w:1px,@color:#cdcdcd,@style:solid){
border-bottom:@b_w @style @color;
}
//左边框
.border(left,@b_w:1px,@style:solid,@color:#cdcdcd){
border-left: @b_w @style @color;
}
//定位->相对定位
.position(r){
position: relative;
}
//定位->绝对定位
.position(a){
position: absolute;
}
//定位->固定定位
.position(f){
position: fixed;
}
//字体
.font(@size:14px,@lh:30px,@style:normal,@family:"微软雅黑"){
font:@style @size/@lh @family;
}
//内边距
.padd(all,@distance:10px){
padding:@distance;
}
.padd_top_left(@top_distance:5px,@left_distance:10px){
padding:@top_distance @left_distance;
}
//上内边距
.padd(top,@distance:10px){
padding-top: @distance;
}
//右内边距
.padd(right,@distance:10px){
padding-right: 10px;
}
//下内边距
.padd(bottom,@distance:10px){
padding-bottom: @distance;
}
//左内边距
.padd(left,@distance:10px){
padding-left: @distance;
}
//外边距
.margin(all,@distance:10px){
margin:@distance;
}
.margin_top_left(@top_distance:5px,@left_distance:10px){
margin:@top_distance @left_distance;
}
//上外边距
.margin(top,@distance:10px){
margin-top:@distance;
}
//右外边距
.margin(right,@distance:10px){
margin-right:@distance;
}
//下外边距
.margin(bottom,@distance:10px){
margin-bottom:@distance;
}
//左外边距
.margin(left,@distance:10px){
margin-left:@distance;
}
/**
向上的三角
top:匹配模式
@b_width:三角的宽度
@color:三角的颜色
*/
.triangle(top,@b_width:10px,@color:#cdcdcd) when(iscolor(@color)){
border-width: @b_width;
border-color:transparent transparent @color transparent;
border-style:solid dashed dashed dashed;
}
/**
向右的三角
right:匹配模式
@b_width:三角的宽度
@color:三角的颜色
*/
.triangle(right,@b_width:10px,@color:#cdcdcd) when(iscolor(@color)){
border-width: @b_width;
border-color: transparent transparent transparent @color;
border-style: dashed solid dashed dashed;
}
/**
向下的三角
bottom:匹配模式
@b_width:三角的宽度
@color:三角的颜色
*/
.triangle(bottom,@b_width: 10px,@color: #cdcdcd) when(iscolor(@color)){
border-width: @b_width;
border-color: @color transparent transparent transparent;
border-style: dashed dashed solid dashed;
}
/**
向左的三角
bottom:匹配模式
@b_width:三角的宽度
@color:三角的颜色
*/
.triangle(left,@b_width: 10px,@color: #cdcdcd) when(iscolor(@color)){
border-width: @b_width;
border-color: transparent @color transparent transparent ;
border-style: dashed dashed dashed solid;
}
//这里是上面的公公样式,不需要手动调用,less会自动调用
.triangle(@_,@b_width:10px,@color:#cdcdcd){
width: 0px;
height: 0px;
display: inline-block;
}
//圆角
.border-radius(@raiuds:5px){
border-radius:@raiuds;
-webkit-border-radius: @raiuds;
-moz-border-radius: @raiuds;
}
/*
箭头向上的提示框
top:匹配模式
@pb_w:提示框的宽度
@color:提示框边框颜色
*/
.prompt(top,@pb_w:200px,@color: #cdcdcd){
.top_triangle{
top:-20px;
left:10px;
.line{
.triangle(top,10px,@color);//向上的三角
}
.back{
.triangle(top,10px,#ffffff);//向上的三角
top:1px;
}
}
}
/*
箭头向左的提示框
left:匹配模式
@pb_w:提示框的宽度
@color:提示框边框颜色
*/
.prompt(left,@pb_w:200px,@color: #cdcdcd){
.top_triangle{
left:-20px;
top:10px;
.line{
.triangle(left,10px,@color);//向左的三角
}
.back{
.triangle(left,10px,#ffffff);//向左的三角
left:1px;
}
}
}
/*
箭头向右的提示框
right:匹配模式
@pb_w:提示框的宽度
@color:提示框边框颜色
*/
.prompt(right,@pb_w:200px,@color: #cdcdcd){
.top_triangle{
left:@pb_w+21;
top:10px;
.line{
.triangle(right,10px,@color);//向右的三角
}
.back{
.triangle(right,10px,#ffffff);//向右的三角
left:-1px;
}
}
}
/*
箭头向下的提示框
bottom:匹配模式
@pb_w:提示框的宽度
@color:提示框边框颜色
*/
.prompt(bottom,@pb_w:200px,@color: #cdcdcd){
.top_triangle{
bottom: 0px;
left:10px;
.line{
.triangle(bottom,10px,@color);//向下的三角
}
.back{
.triangle(bottom,10px,#ffffff);//向下的三角
top:-1px;
}
}
}
//提示框公共样式,不需要手动调用
.prompt(@_,@pb_w:200px,@color: #cdcdcd){
.position(r);//相对定位
.margin(top,5px);//上外边距
.top_triangle{
z-index: 1;
.position(a);//绝对定位
.line{
.position(a);//绝对定位
}
.back{
.position(a);//绝对定位
}
}
.prompt_border{
.position(r);//相对定位
.border(all,1px,@color);//边框
.padd_top_left();//内边距
background: #ffffff;
width: @pb_w;
.border-radius();//圆角
.font();
}
}
使用另外一个文件调用:
@import "lib/library";
.top_prompt {
.prompt(top);
}
.left_prompt{
.prompt(left);
}
.right_prompt{
.prompt(right);
}
.bottom_prompt{
.prompt(bottom);
}