ドキュメント

Tutorials:Rounded Corners

From jQuery JavaScript Library

Jump to: navigation, search

Adding rounded corners to an element, using no extra markup.

Original: http://15daysofjquery.com/wrap-it-up-pretty-corners/13/
Author: Jack Born

Similar Tutorials: Manipulation

Contents

Introduction

Recently, Dustin Diaz posted an edgy “take-it-or-leave-it” kind of post called “Enough With Rounded Corners”.

So I checked out this new resource for rounded corners and saw that the html would be perfect for an impromptu tutorial on jQuery - combining the wrap(), prepend(), and append() functions.

Here’s the html markup that we’re going to use as our starting point:

 <div class="dialog">
  <div class="hd">
   <div class="c"></div>
  </div>
  <div class="bd">
   <div class="c">
    <div class="s">
     <-- main content goes here -->
    </div>
   </div>
  </div>
  <div class="ft">
   <div class="c"></div>
  </div>
 </div>

So, how would we take this html, and use jQuery to clean up the code?

Well, first we need a “hook” - a unique html element, or an id, or a class name - to tell jQuery to target.

The solution I’m gunning for will remove all of the divs you see above. Therefore, I think a great “hook” would be a simple div with either a unique id or class name.

Let’s try this:

 <div class="roundbox">
   <-- main content goes here -->
 </div>

Next step… we use jQuery to add in our html code:

 $(document).ready(function(){
   $("div.roundbox").wrap('<div class="dialog"><div class="bd">'+
     '<div class="c"><div class="s"></div></div></div></div>');
 });

Where Are The Other Divs?

Look closely at the code above and you’ll see that all of the divs fit nicely inside of each other and also wrap nicely around the content that will go inside our rounded box we’ll soon create.

You should also notice that I’ve left out quite a bit of the markup from the original. That’s because the wrap() function in jQuery needs perfectly nested divs in order to work.

Specifically, I’ve left out these two parts:

 <div class="hd">
   <div class="c"></div>
 </div>
 <div class="ft">
   <div class="c"></div>
 </div>

Append and Prepend All At Once

If you notice, the parts that I left out go just inside, but at the beginning and at the end of the class=”dialog” div. This is a perfect opportunity to use append and prepend functions of jQuery and chain them together.

 $('div.dialog')
   .prepend('<div class="hd">'+
     '<div class="c"></div></div>')
   .append('<div class="ft">'+
     '<div class="c"></div></div>');

Example And Code

I’ve put a Rounded Corners with jQuery example online for you to see. Be sure to view the source code because I want you to see how clean the HTML looks when all the JavaScript and CSS is packaged off into separate files.

Here is a simple example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam suscipit faucibus augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed a risus. Nullam vel felis. Fusce blandit ligula a massa. Sed non purus posuere diam porta blandit. Etiam iaculis ante in leo. Maecenas augue velit, congue auctor, elementum ut, vulputate in, ligula. Nunc eleifend mi. Sed urna. Praesent massa purus, hendrerit nec, placerat ac, euismod vitae, nisi. Etiam ac tortor. Pellentesque sed augue. Donec non mauris. Fusce sollicitudin.


Here is another example.

This approach makes use of the "sliding doors" technique of background image layering, where two elements are nested in order to provide "left" and "right" images.

In this particular case, the left images have been cut at 800px width but could easily be larger for fluid use.

 

The code comes from an article on Schillmania and that’s where I would recommend grabbing the zip file with the image slices that make the rounded corners so pretty.

Rounded Corners Without Images

There are many other ways to create rounded corners - some involving no images whatsoever.

In the jQuery Plugins Repository there are a number of plugins for making rounded corners without images. It’s not for everyone (or every application) but worth checking out. Don’t ask me to break down the code of those plugins because it’s pretty intense and chock full of trig functions that I am a little rusty on.

But look at how nice the code looks (using one of the plugins):

 $(document).ready(function(){
   $("#box1").corner();
 });

You can't really beat that, can you?

Plugins: jQuery Corner jquery-roundcorners-canvas