bisogno di suggerimenti sul plugin jquery per gli angoli arrotondati

Volevo conoscere i plugin jquery, quindi ho deciso di provare a creare una semplice scatola d'angolo arrotondata. So che ci sono già alcuni plugin per angoli arrotondati, ma per me è più un esercizio di apprendimento che un requisito di lavoro.bisogno di suggerimenti sul plugin jquery per gli angoli arrotondati

Gli angoli arrotondati che ho preso da here. Mi piace questo esempio poiché non usa le immagini, sarà facile cambiare il colore delle scatole.

Immagino che stia avendo problemi a sistemare il mio cervello nel modo migliore per farlo. Ho un campione molto approssimativo che funziona, ma non mi sembra giusto. La parte che mi sta impiccando sta costruendo gli angoli arrotondati attorno all'area del contenuto. In questo momento prende la casella "contenuto" e aggiunge gli angoli attorno ad essa. Quali sono i modi migliori per farlo?

Ecco la chiamata per rendere la casella - $ ('# contenuto'). Roundbox();

Se questa informazione non è sufficiente fammelo sapere.

// 
(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;}

struttura finale della scatola dovrebbe essere:

<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>

fonte

2009-06-20 tessa

BTW, un'idea piuttosto fresco. Penso che inizierò a usare questo ... –

Il modo in cui si sta facendo sembra buono per me. Non vorrei inserire i fondi nel Finanziamento però.

Si può fare il titolo e il separatore in opzioni per la funzione, e invece di aggiungere al #fundingAdminContainer, si può fare

outer.insertBefore($(this));

prima di aggiungere $ (questo) per esterno.

EDIT: Questa risposta è piuttosto vecchia ora, e direi non aggiornata. La maggior parte dei browser ora supporta gli angoli arrotondati attraverso la proprietà CSS border-radius o almeno un'alternativa specifica del browser. Direi anche che per la maggior parte dei casi, non vale nemmeno la pena aggiuntiva necessaria per arrotondare gli angoli di arrotondamento per i vecchi browser che non supportano il CSS (ovviamente questo è il parere). Quindi, se dovessi dare una risposta completa, direi semplicemente usare this e fare ciò che ti dice :).

Ma se vuoi veramente i tuoi angoli arrotondati in < IE9, suggerirei qualcosa come this in modo che tu possa ancora usare il CSS da solo nella maggior parte dei browser, e solo IE deve fare qualsiasi lavoro extra (in un file htc) per arrotondare gli angoli.

L'unico problema è che il file htc è obsoleto e dovrebbe essere modificato per verificare l'esistenza di border-radius usando qualcosa come this. L'htc è solo JS. Questo avrebbe sollevato IE9 dal dover fare la manipolazione del DOM JS.

fonte

2009-06-20 13:14:48