Flexify

码农软件 · 软件分类 · 其他jQuery插件 · 2020-01-11 21:44:44

软件介绍

Flexify is a jQuery plugin which allows web authors to create fluid, full-page, flexible layouts for their web applications. Overlaying the CSS box model, Flexify lets you specify flexible dimensions for content, margin, padding, borders, or position, by taking up all available space on a page. Additionally, Flexify can define whether an elements displays its children vertically (the default) or horizontally, creating rows or columns of elements.

Introduction

Flexify adds the flow and flex functions to jQuery. The former allows you to specify whether an element has vertical or horizontal 'flow', changing the orientation of how its children are displayed. The latter lets you specify which CSS properties should 'flex' and take up all available space.

Example

Using the following page:

<body>
  <div style="background: red">This is some content.</div>
  <div style="background: blue">This is some content.</div>
  <div style="background: green">This is some content.</div>
</body>

The following script would create three full-page rows:

$(function () {
     /* make the page full-height, and divide the height of each row evenly */
     $('html, body, div').flex('height', 1);
     /* flexify the document */
     $(document).flexify();
});

Similarly, we could create three full-page columns with the following script:

$(function () {
     /* make the page and columns full-height */
     $('html, body, div').flex('height', 1);
     /* split the widths of the three columns evenly */
     $('div').flex('width', 1);
     /* three columns in a row */
     $('body').flow('horizontal');
     /* flexify the document */
     $(document).flexify();
});

Usage

To use Flexify, include flexify.js in your page. In your document.ready script, you can then add calls to the flow and flex methods of any element. Finally, after specifying all flexible properties, add a call to $(document).flexify().

The flow function takes one argument, either the string "vertical" or "horizontal". This determines the 'flow' or orientation of its children. Additionally, you can retrieve the flow of any object (if any) by calling this function without arguments.

The flex function takes two arguments: the property to flexify, and the flex ratio. The property can be a string of any of the margin-*, padding-*, border-*, width, or height properties, as well as top, right, bottom, or left for positioned elements. The flex ratio is any integer greater than 0 (usually 1), which is calculated as a ratio with other properties on the same axis to determine how free space is divided.

Browser Support

Flexify is currently supported for Firefox 2.0+, IE 6+, and Opera 9.0+, and Safari 3.

Demos

本文地址:https://codercto.com/soft/d/23179.html

UML用户指南

UML用户指南

[美] Grady Booch、James Rumbaugh、Ivar Jacobson / 邵维忠、麻志毅、马浩海、刘辉 / 人民邮电出版社 / 2006-6 / 49.00元

《UML用户指南》(第2版)是UML方面最权威的一本著作,三位作者是面向对象方法最早的倡导者,是UML的创始人。本版涵盖了UML 2.0。书中为具体的UML特征提供了参考,描述了一个使用UML进行开发的过程,旨在让读者掌握UML的术语、规则和语言特点,以及如何有效地使用这种语言,知道如何应用UML去解决一些常见的建模问题。《UML用户指南》(第2版)由7个部分组成,而且每章都描述了一个特定UML特......一起来看看 《UML用户指南》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

MD5 加密
MD5 加密

MD5 加密工具