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.
jSize 官网
http://plugins.jquery.com/project/jSize
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
