necesito sugerencias sobre el plugin jquery para esquinas redondeadas

Quería aprender acerca de los complementos de jquery, así que decidí intentar hacer un simple recuadro de esquina redondeado. Sé que ya hay algunos complementos de esquina redondeados, pero esto es más un ejercicio de aprendizaje para mí que un requisito de trabajo.necesito sugerencias sobre el plugin jquery para esquinas redondeadas

Las esquinas redondeadas que tomé de here. Me gusta esta muestra ya que no usa imágenes, será fácil cambiar el color de las cajas.

Creo que estoy teniendo problemas para enfocar mi cerebro en la mejor forma de hacerlo. Tengo una muestra muy aproximada que funciona, pero no me parece bien. La parte que me cuelga es construir las esquinas redondeadas alrededor del área de contenido. En este momento toma el cuadro de "contenido" y agrega las esquinas a su alrededor. ¿Cuáles son las mejores formas de hacer esto?

Aquí está la llamada para hacer el cuadro - $ ('# content'). Roundbox();

Si esto no es suficiente información házmelo saber.

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

estructura final de la caja debe ser:

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

Fuente

2009-06-20 tessa

Por cierto, una idea bastante fresco. Creo que voy a empezar a usar esto ... –

La forma en que lo está haciendo parece bueno para mí. Sin embargo, no codificaría las cosas de Funding.

Usted puede hacer título y separador en opciones para la función, y en lugar de añadir a #fundingAdminContainer, puede hacerlo

outer.insertBefore($(this));

antes de añadir $ (este) para exterior.

EDIT: Esta respuesta es bastante antigua, y diría que está desactualizada. La mayoría de los navegadores ahora admiten esquinas redondeadas a través de la propiedad CSS border-radius o al menos una alternativa específica del navegador. También diría que para la mayoría de los casos, ni siquiera vale la pena agregar los js adicionales necesarios para rellenar esquinas de redondeo para los navegadores antiguos que no admiten el CSS (por supuesto, esa es la opinión). Entonces, si tuviera que dar una respuesta completa, diría que solo use this y haga lo que le diga :).

Pero si realmente quieres las esquinas redondeadas en < IE9, te sugiero algo como this para que puedas seguir usando CSS solo en la mayoría de los navegadores, y solo IE tiene que hacer un trabajo extra (en un archivo htc) para redondear las esquinas.

El único problema es que el archivo htc también está desactualizado y debe modificarse para comprobar la existencia de border-radius usando algo como this. El htc es solo JS. Eso aliviaría IE9 de tener que hacer la manipulación JS DOM.

Fuente

2009-06-20 13:14:48