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实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
angularjs基础教程
Dec 25 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
JS获取鼠标选中的文字
Aug 10 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
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 FPDF类库应用实现代码
2009/03/20 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
python实现批量注册网站用户的示例
2019/02/22 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
英语专业毕业个人求职自荐信
2013/09/21 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
企业口号大全
2014/06/12 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
部门主管竞聘书
2015/09/15 职场文书
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript