Tôi muốn tìm hiểu về các plugin jquery, vì vậy tôi quyết định cố gắng tạo một hộp góc tròn đơn giản. Tôi biết đã có một số plugin góc tròn ngoài kia, nhưng đây là một bài tập học tập cho tôi hơn là một yêu cầu công việc.cần gợi ý về plugin jquery cho các góc bo tròn
Các góc tròn tôi lấy từ here. Tôi thích mẫu này vì nó không sử dụng hình ảnh, nó sẽ dễ dàng thay đổi màu sắc của các hộp.
Tôi đoán tôi đang gặp sự cố khi gói não của mình theo cách tốt nhất để thực hiện việc này. Tôi có một mẫu rất thô sơ, nhưng nó không cảm thấy đúng. Phần treo tôi lên là xây dựng các góc tròn xung quanh khu vực nội dung. Ngay bây giờ phải mất hộp "nội dung" và nối các góc xung quanh nó. Cách tốt nhất để làm điều này là gì?
Đây là cuộc gọi để tạo hộp - $ ('# content'). Roundbox();
Nếu điều này không đủ thông tin, hãy cho tôi biết.
//
(function($)
{
jQuery.fn.roundbox = function(options)
{
var opts = $.extend({}, $.fn.roundbox.defaults, options);
var outer = $("<div>");
var topBorder = $("<b class='xtop'><b class='xb1'></b><b class='xb2'></b><b class='xb3'></b><b class='xb4'></b></b>");
var bottomBorder = $("<b class='xbottom'><b class='xb4'></b><b class='xb3'></b><b class='xb2'></b><b class='xb1'></b></b>");
var title = $("<h1>Select Funding</h1>");
var separator = $("<div></div>");
$(this).append(title);
$(this).append(separator);
var firstElement = $(this).children()[0];
if (firstElement != null)
{
title.insertBefore(firstElement);
separator.insertBefore(firstElement);
}
outer.append(topBorder);
outer.append($(this));
outer.append(bottomBorder);
$("#fundingAdminContainer").append(outer);
//Add classes
outer.addClass(opts.outerClass); //outer container
$(this).addClass(opts.contentClass); //inner content
title.addClass(opts.titleClass); //roundbox title
separator.addClass(opts.lineClass); //line below title
};
$.fn.roundbox.defaults =
{
outerClass: 'roundbox',
contentClass: 'roundboxContent',
titleClass: 'roundboxTitle',
lineClass: 'roundboxLine'
};
})(jQuery);
//CSS
.roundbox
{
float:left;
width:400px;
margin-right:20px;
}
.roundboxContent
{
display:block;
background:#ffffff;
border:0 solid #D4E2FE;
border-width:0 1px;
height:180px;
padding:10px;
}
.roundboxLine
{
background: url(../images/fundingAdmin_line.gif);
background-repeat:no-repeat;
height:5px;
}
.roundboxTitle
{
font-size:1.3em; color:#17A2D3;
}
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ffffff; border-left:1px solid #D4E2FE; border-right:1px solid #D4E2FE;}
.xb1 {margin:0 5px; background:#D4E2FE;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
cấu trúc cuối cùng của hộp nên là:
<div id="fundingAdminContainer"><!-- Not part of rounded box, just serves as a container. -->
<div class="roundbox">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div id="content" class="roundboxContent">
<h1 class="roundboxTitle">Title</h1>
<div class="roundboxLine"></div>
//CONTENT
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
</div>
BTW, ý tưởng khá mát mẻ. Tôi nghĩ tôi sẽ bắt đầu sử dụng ... –