Flexify
- 授权协议: 未知
- 开发语言:
- 操作系统: 未知
- 软件首页: http://plugins.jquery.com/project/Flexify
软件介绍
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
- Three full-page rows
- Three full-page columns
- A 3x3 grid (3 columns of 3 cells)
- A 3x3 grid (3 rows of 3 cells)
- A centered element, using flexible margins and borders
- A centered element using absolute positioning
- Two fixed-size columns, and one fluid, scollable column
- A complex application with form elements
- A resizable pane using flexible dimensions
- Use with other plugins (jWYSIWYG)
硅谷增长黑客实战笔记
曲卉 / 机械工业出版社 / 2018-4-10 / 65.00元
增长黑客这个词源于硅谷，简单说，这是一群以数据驱动营销、以迭代验证策略，通过技术手段实现爆发式增长的新型人才。近年来，互联网公司意识到这一角色可以发挥四两拨千斤的作用，因此对该职位的需求也如井喷式增长。 本书作者曾在增长黑客之父肖恩•埃利斯麾下担任增长负责人，用亲身经历为你总结出增长黑客必备的套路、内力和兵法。本书不仅有逻辑清晰的理论体系、干货满满的实践心得，还有Pinterest､SoFi......一起来看看 《硅谷增长黑客实战笔记》 这本书的介绍吧!
