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 相关文章推荐
JavaScript 高效运行代码分析
Mar 18 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
node.js中的http.createClient方法使用说明
Dec 15 Javascript
javascript this详细介绍
Sep 19 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 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
PHP常用正则表达式集锦
2014/08/17 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
Python对象与引用的介绍
2019/01/24 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
python如何提升爬虫效率
2020/09/27 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
介绍一下Python中webbrowser的用法
2013/05/07 面试题
摄影实习自我鉴定
2013/09/20 职场文书
学校安全教育制度
2014/01/31 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers