标题嵌在外框上边框的样式

最新推荐文章于 2021-01-15 11:57:46 发布

原创最新推荐文章于 2021-01-15 11:57:46 发布 · 483 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ui #javascript #ViewUI

java前端样式专栏收录该内容

1 篇文章

订阅专栏

代码如下：

$(function(){
	$(".panel_border").each(function(){
	//创建一个边框对象
		var $borderPanel = $([
		                      "<div>",
			                      "<div class='my_panel_wrap'>",
			                      "<div class='my_border'>",
				                      "<div class='my_border_left'></div>",
				                      "<div class='my_border_right'></div>",
			                      "</div>",
			                      "<div class='my_title'></div>",
			                      "<div class='my_blank'></div>",
			                      "<div class='my_content'></div>",
			                      "</div>",
		                      "</div>"
		                      ].join(""));

			var $this = $(this);
			var title = $this.attr("title");
			var id =  $this.attr("id");
			$borderPanel.find(".my_title").html(title);//给边框添加标题
			$this.replaceWith($borderPanel);//用边框对象（$borderPanel）,取代需要添加边框的对象（ $(".panel_border") ）
			$borderPanel.find(".my_content").append($this);//将添加边框的对象的内容放在"<div class='my_content'></div>",中

			//设置上边框（左右）
			var width = $(".my_title").width();
			$(".my_border_right").css("width","calc(92% - "+(parseInt(width)+20)+"px)");
			var lwidth = $(".my_border_left").width();
			$(".my_title").css("margin-left",(parseInt(lwidth)+10)+"px");

	});
})

.my_panel_wrap{
	border:1px solid #95B8E7;
	border-top:none; 
	margin-top:20px;
}
.my_title{
	height:20px;
	position: absolute;
  	margin-top: -10px;
  	font-size:14px;
}
.my_content{
 	height: calc(100% - 25px);
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-bottom: 10px;
}
.my_border_left{
   	width: 8%;
    border-top: 1px solid #95B8E7;
    float: left;
}
.my_border_right{
    float: right;
    border-top: 1px solid #95B8E7;
}
.my_blank{
	height:10px;
}

[img]http://dl2.iteye.com/upload/attachment/0114/1196/78964bca-a8c1-312f-90d8-933d797ef927.png[/img]

网上看到好多这样的边框，感觉挺好的，可惜没找到代码，自己粗略的写了份，在使用的时候只需要在 <div id="" class="panel_border" title="">需要加样框的内容</div>中添加id，class="panel_border",以及需要显示标题title，在使用的时候有一点需要注意，如果在同时使用其他的ui框架，需要在引入js文件时优先将该js文件引入，即jquery文件后 > 样框js文件 >其他ui框架文件，这样是防止影响其他ui框架的功能