j C o r n e r

A jQuery Plugin

to Fold Paper Corners



Features jCorner is a jQuery plugin to create a flat designed paper folding effect at the bottom-right corner, which is useful for both stylishness and a hint for a link. It uses CSS border tricks to achieve the effect, without using any image, which enables us to create corners of any size. See how to achieve this. It's a tiny library with minified JavaScript file of 1.2KB. Download Now!

Hello World To use jCorner, the following files should always be included. <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="jCorner.js" type="text/javascript"></script> Suppose we want to add a corner to an element with id paper in the HTML, jCorner makes it as simple as: HTML: <div id="paper"></div> JavaScript: $('#paper').jCorner();

Documentation There're 4 parameters to set with jCorner, none of which is compulsory. Default values are: size: 40; id: undefined; link: undefined; background: '#fff'; Example: $('#paper').jCorner({ size: 25, background: 'black' }); $('#paper').jCorner({ background: '#ffcc00', link: 'about.html', id: 'about' }); size As its name suggests, the size parameter defines how big is the corder, in pixels. id It might be useful to set an id to the corner. We can do this by setting the id parameter. If it is undefined, there would be no id attribute of the corner. link We may add a link to the corner so that it will open a new tab when the corner is clicked. The value of link should be a string like "http://zhangwenli.com". background We usually need to set this parameter since the background in different web pages are different. For example, the background is set to be "#ccc" in this page.