मैं jquery प्लगइन्स के बारे में जानना चाहता था, इसलिए मैंने एक साधारण गोलाकार कोने बॉक्स बनाने का प्रयास करने का फैसला किया। मुझे पता है कि वहां पहले से ही कुछ गोलाकार कोने प्लगइन्स हैं, लेकिन नौकरी की आवश्यकता के मुकाबले यह मेरे लिए एक सीखने का अभ्यास है।गोलाकार कोनों के लिए jquery प्लगइन पर सुझावों की आवश्यकता है
गोलाकार कोनों मैंने here से लिया था। मुझे यह नमूना पसंद है क्योंकि यह छवियों का उपयोग नहीं करता है, यह बॉक्स के रंग को बदलना आसान होगा।
मुझे लगता है कि मुझे ऐसा करने के लिए सबसे अच्छे तरीके से अपने दिमाग को लपेटने में परेशानी हो रही है। मेरे पास एक बहुत ही मोटा नमूना है जो काम कर रहा है, लेकिन यह सही नहीं लगता है। वह हिस्सा जो मुझे लटक रहा है वह सामग्री क्षेत्र के चारों ओर गोलाकार कोनों का निर्माण कर रहा है। अभी यह "सामग्री" बॉक्स लेता है और इसके चारों ओर कोनों को जोड़ता है। ऐसा करने के बेहतर तरीके क्या हैं?
यहां बॉक्स बनाने के लिए कॉल है - $ ('# content')। राउंडबॉक्स();
यदि यह पर्याप्त जानकारी नहीं है तो मुझे बताएं।
//
(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;}
बॉक्स के अंतिम संरचना होना चाहिए:
<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, बहुत अच्छा विचार है। मुझे लगता है कि मैं इसका उपयोग शुरू करने जा रहा हूं ... –