首页 > 代码库 > 使用Less制作带箭头提示框
使用Less制作带箭头提示框
这里使用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); }
使用Less制作带箭头提示框
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。