HomeBlog
How I made jCorner : How I made ... - 羡辙杂俎
2014.02.09 22:08:18
How I made jCorner

Series: How I made ...

What You Will Learn In This Post

In this post, I’m going to explain how to make jCorner, a jQuery plugin to create paper folding effect at the bottom-right corner.

jCorner is a jQuery plugin to create paper folding effect at the bottom-right corner, as shown above.

I used CSS Border tricks to make this, without using any image. So, we can use this plugin to create foldered corner of any size.

#CSS Border

CSS Border is an attribute that even beginners of Web programmers are familiar with. We use styles like border: 1px solid #f00; to create borders everywhere.

Now, CSS Border has a new use to us.

Jonrohan explained in detail how to use this trick to create triangles. The main idea is to create an element of width: 0; height: 0; and set the width of four borders respectively and thus creating four triangles.

.css-arrow-acute {
    border-color: red green blue orange;
    border-style: solid;
    border-width: 25px 10px 15px 30px;
    width: 0;
    height: 0;
}

#Divide-and-Conquer

In order to generate paper folding effect as shown above, we need to divide them into three triangles and then use CSS Border to create them all.

##.jCorner

First, we create a div <div class="jCorner"></div> to be positioned at the bottom-right coner, which will later be the root of our foldering corner elements.

Suppose each triangle’s right-angle sides are of 25px, then, width and height of .jCorner should be set to width: 50px; height: 25px;.

In order to make it at the bottom-right part of its parent, we had to set position of its parent (the one with blue blackground) to be relative. And then set position of .jCorner to be absolute, and bottom: 0; right: 0;.

.jCorner {
    position: absolute; 
    bottom: 0; 
    right: 0; 
    width: 50px; 
    height: 25px;
}

.jCorner has three children representing three triangles.

<div class="jCorner">
    <div class="jCorner_left"></div>
    <div class="jCorner_right"></div>
    <div class="jCorner_center"></div>
</div>

That’s all we need to do with .jCorner.

##.jCorner_left

We use the CSS Border tricks to create triangls, as talked before.

.jCorner_left {
    width: 0; 
    height: 0; 
    border-color: transparent transparent #999 transparent; 
    border-width: 0 0 25px 25px; 
    border-style: solid; 
    float: left; 
    z-index: 10; 
    opacity: 0.6;
}

##.jCorner_right

Watch carefully and you may find that .jCorner_left and .jCorner_right are of the same direction and only differ in color.

.jCorner_right {
    width: 0; 
    height: 0; 
    border-color: transparent transparent #eee transparent; 
    border-width: 0 0 25px 25px; 
    border-style: solid; 
    float: left;
}

##.jCorner_center

.jCorner_center is a little bit different from the former two. Pay attention to the difference with border attributes.

.jCorner_center {
    border-width: 25px 25px 0 0; 
    left: 25px; 
    top: -25px; 
    border-color: #fff transparent transparent transparent; 
    width: 0;
    height: 0; 
    position: relative; 
    float: left; 
    z-index: 10; 
    opacity: 0.6; 
    border-style: solid;
}

By now, we can create folding effect completely. Next, we need to make a jQuery plugin, which can set the size and more.

#jQuery Plugin

This is the second jQuery plugin I wrote. Last year, I wrote a jQuery plugin for Web Audio, so it’s easy for me to pick it up a year later.

jQuery official site provides a good example to start.

For jCorner, it’s quite simple to implement. The idea is to generate a string to append to the parent element. Don’t forget to set position of the parent to be relative.

(function($) {
    $.fn.jCorner = function(options) {
        return this.each(function() {
            var settings = $.extend({
                size: 40,
                id: undefined,
                link: undefined,
                background: '#fff' 
            }, options);

            var id = settings.id === undefined ? '' : ' id="' 
                    + settings.id + '"';
            var a_start = settings.link === undefined ? '' : '<a href="'
                    + settings.link + '" target="_blank">';
            var a_end = settings.link === undefined ? '' : '</a>';
            var element = '<div' + id + ' class="jCorner" style="width: '
                    + settings.size * 2 + 'px; height: ' + settings.size
                    + 'px;">' + a_start
                    + '<div class="jCorner_left" style="border-width: 0 0 '
                    + settings.size + 'px ' + settings.size 
                    + 'px;"></div><div class="jCorner_square" '
                    + 'style="border-width: 0 0 ' + settings.size + 'px '
                    + settings.size 
                    + 'px; border-color: transparent transparent ' 
                    + settings.background 
                    + ' transparent;"></div><div class="jCorner_right" '
                    + 'style="border-width: ' + settings.size + 'px ' 
                    + settings.size + 'px 0 0; left: ' + settings.size 
                    + 'px; top: -' + settings.size + 'px;"></div>' 
                    + a_end;

            return $(this).append(element).css('position', 'relative');
        });
    }
}(jQuery));

View on GitHub

博文对你有帮助吗?如果有的话,要不要送我一本书呢?:heart_eyes:

Series: How I made ...


微信公众号“羡辙部落格”(xianzheblog)提供本站优质非技术类博文推送。

Creative Commons License
Every blog post in this site by Wenli Zhang is licensed under a CC 3.0 License, based on a work at Github. You can see the source code of this blog site at github.com/Ovilia/blog.

Comments

comments powered by Disqus