Fixie.js 自动填充内容的插件


Posted in Javascript onJune 28, 2012

Fixie.js是一个自动填充HTML文档内容的开源工具
官方网址地址:http://fixiejs.com/
Fixie.js 下载地址 fixie_3water.rar

为什么使用Fixie?
当我们设计网站的时候,由于无法确定最终填充的内容,经常需要添加一写lorem ipsum(关于Lorem ipsum)到页面里面来预览一下页面的展现效果。
问题来了,添加过多的无聊的内容,使得我们的HTML文档变得臃肿,并且陷入复制-粘贴,手工编辑的毅种循环中。
Fixie.js就是针对这个问题而诞生的,通过解析语义化的HTML5标签,Fixie可以自动填充匹配标签元素类型的内容,使得我们的HTML文档简洁,测试高效。

使用说明:
第一步:添加fixie.js 到文档中
在body结束标签之前添加

<script type="text/javascript" src="fixie.js"></script>

第二步:这里有两种方法:

1,任何需要填充内容的位置,设置`class="fixie"`就行了,
比如,如果先填充p标签的内容,直接设置`<p class="fixie"></p>`就行了,over,就这么简单。
2,通过`fixie.init`填充内容
通过CSS选择器选择待填充的元素,在console(控制台啊,亲)或者script标签里面执行

fixie.init([".array", "#of > .selectors", ".that", ".should", "#be > .populated", ".with", ".lorem"])
或者
fixie.init(".string, #of > .comma, .separated, .selectors, .that, .should, #be > .populated, .with, .lorem")
命令,就可以自动填充了
另外,执行

fixie.init(':empty')
可以填充文档里所有的空元素;

支持的元素
Fixie是通过标签类型来决定填充的内容的,这里有几类是需要了解的。
- `<h1 class="fixie"></h1>` - 添加几个单词的文本,`h2 - h6`亦然。
- `<p class="fixie"></p>` - 填充一段文字
- `<article class="fixie"></article>` - 填充几段文本(几个段落)
- `<section class="fixie"></section>` - 同上
- `<img class="fixie"></img>` - 填充一张注明了尺寸的图片
- `<a class="fixie"></a>` - 填充一个随机的链接(做广告嫌疑?)

提示
修改默认的图片填充
执行`fixie.setImagePlaceholder(source)`.
比如,如果你想从Flickr下载图片来填充,可以执行

fixie.setImagePlaceholder('http://flickholdr.com/${w}/${h}/canon').init();
给容器添加class="fixie"
容器内部所有的非空后代元素(注意后代与子代的区别)都会受到影响
看下面的说明

<div class="fixie"> 
<p>Hello <a></a></p> 
</div>

Fixie会保留P标签里面的"Hello"文本,但是会填充a标签里面的内容

### Fixie for Rails
[fixie-rails](https://github.com/csexton/fixie-rails)

突出填充内容
可以添加

.fixie{ border:4px solid red; }
到CSS里面,以便区分填充内容与真实内容。

## 授权
废话,不翻译了。

示例说明:

<!DOCTYPE html> 
<html> 
<head> 
<title>Fixie.js Sample</title> <style> 
body{ 
font-family: Helvetica, arial, sans-serif; 
width:800px; 
margin:150px auto; 
} 
img{ 
width:400px; 
height:300px; 
float:right; 
margin:20px; 
} 
.fixie{ color: red;} 
</style> 
</head> 
<body> 
<article> 
<h1 class="fixie"></h1><!--这里会填充标题--> 
<p> Check us out at <a class="fixie"></a>,<!--这里会填充连接,但是外部的P标签因为非空,所以不会受影响--> 
and don't forget to view source.</p> 
<section class="fixie"><!--section的后代元素都会填充--> 
<p></p> 
<img/> 
<ul></ul> 
<p></p> 
<ol></ol> 
</section> 
<h2 class="fixie"></h2> 
<section class="fixie"></section> 
</article> 
<script type="text/javascript" src="fixie.js"></script> 
<script> 
// Changes default image source to Flickr 
fixie.setImagePlaceholder('http://flickholdr.com/${w}/${h}/fixie').init(); 
</script> 
</body> 
</html>

显示效果

Fixie.js 自动填充内容的插件

作者:西山

Javascript 相关文章推荐
Jquery 学习笔记(一)
Oct 13 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
jQuery1.6 正式版发布并提供下载
May 05 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
动态加载JavaScript文件的两种方法
Apr 22 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
node.js入门学习之url模块
Feb 25 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 #Javascript
妙用Jquery的val()方法
Jun 27 #Javascript
jQuery.extend 函数的详细用法
Jun 27 #Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 #Javascript
javascript 事件处理程序介绍
Jun 27 #Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 #Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 #Javascript
You might like
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
PHP 字符串操作入门教程
2006/12/06 PHP
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
php中取得文件的后缀名?
2012/02/20 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
php中apc缓存使用示例
2013/12/25 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
Python实现的求解最小公倍数算法示例
2018/05/03 Python
Python列表切片操作实例总结
2019/02/19 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
经典C++面试题一
2016/11/06 面试题
介绍下Lucene建立索引的过程
2016/03/02 面试题
计算机大学生的自我评价
2013/10/15 职场文书
质检部职责
2013/12/28 职场文书
浙江文明网签名寄语
2014/01/18 职场文书
医校毕业生自我鉴定
2014/01/25 职场文书
八年级美术教学反思
2014/02/02 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript