jSize 介绍
Gone were the days of framesets during the late 90s. Usability studies then
showed that frames (not iframe) are detremental. The Web 2.0 platform has made
the frames concept emerge once again in another form to simulate interfaces
that are found in desktop software. As a frequent Yahoo! mail or even Live
mail user, you probably have noticed that you can resize reading panels by
dragging the sliders/helpers. In this era, we are Now talking about divs not
frames and making them behave does take quite a bit of effort in your CSS and
JavaScripting.
I am approaching this problem from a JavaScript perspective, the CSS to make
it work is still daunting if you don’t have a firm concept of it. Let’s look
at a illustration of what the example layout will be.
To make #v-slide and #h-slide work as a slider/resizer, just simply do this.
$(“#v-slide”).jSize({
type: ‘left-right’,
c1: ‘#left’,
c2: ‘#right’,
static: ‘#left’
});
$(“#h-slide”).jSize({
type: ‘top-bottom’,
c1: ‘#top’,
c2: ‘#bottom’,
static: ‘#top’
});
Let us look at the code above and see what it means.
type: (left-right | top-bottom) those are the two choices for your slider
c1: (jQuery css selectors) means the left container or the top container
c2: (jQuery css selectors) means the right container or the bottom container
static: (jQuery css selectors) the container that has min-width and max-width
specified on their CSS (either c1 or c2).
Word of caution: min-width and max-width for your container plays an extremely
important role to prevent the frames from breaking.