jQuery DivCorners: create image corners & border layouts

What is DivCorners?

  • This plugin aims to create an easy way to add border layouts to screen content.
    • This can be rounded corners, simple borders, faded edges, box layouts, and more.
    • Currently this is achieved with images. In the future, I'll include functions to create simple layouts without images.
  • It includes three functions that can be called after jquery.js and jquery.divcorners.js are loaded.
    • Use $(selector).dcCreate(object [, boolean]) to create an instances of a layout.
    • Use $(selector).dcResize([boolean]) to resize instances of a layout.
    • Use $(selector).dcClear([boolean]) to remove instances of a layout.
  • DivCorners is comprised of jquery.divcorners.js and jquery.divcorners.css, both of which must be linked for desired results.

Why DivCorners?

“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.” jQuery.com

This extension was created to make life easier. DivCorners helps create a desired effect in more than half the time, and eliminates most browser issues. The extension even fixes PNGs in IE6.

How to use DivCorners?

$(selector).dcCreate(object [, boolean])

// This is the maximum definition
$("div").dcCreate({
    imgPrefix: "/images/",
    fileType: ".gif",
    expand: 4,            // optional
    radius: 0,            // optional, Note: Radius must be greater than expand. See Understand the Parameters
    position: "inside",   // optional
    resize: "img",        // optional
    exclude: "left, top"  // optional
}, true);                 // Note: This parameter is optional. By default it's true.
                          // This parameter controls whether parent .dCorner instances will be resized.

// This is the recommended definition
$("div").dcCreate({
    imgPrefix: "/images/dCorner-",
    fileType: ".gif",
    expand: 10
});

$(selector).dcResize([boolean])

// Call this function when the height or width of the container is altered.
$("div").dcResize(true);

// This is the recommended definition
$("div").dcResize();
    
// Note: This function's parameter is optional. By default it's true.
// This parameter controls whether parent .dCorner instances will be resized.

$(selector).dcClear([boolean])

// Call this function to remove any instances.
$("div").dcClear(true);

// This is the constructor definition
$("div").dcClear();
    
// Note: This function's parameter is optional. By default it's true.
// This parameter controls whether parent .dCorner instances will be resized.