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 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
详谈 Jquery Ajax异步处理Json数据.
Sep 09 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
微信小程序位置授权处理方法
Jun 13 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
JS setTimeout与setInterval的区别
Apr 20 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
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
python编写简单爬虫资料汇总
2016/03/22 Python
python实现按行切分文本文件的方法
2016/04/18 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
python 显示数组全部元素的方法
2018/04/19 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
通信专业个人自我鉴定
2013/10/21 职场文书
英语商务邀请函范文
2014/01/16 职场文书
优秀员工评语
2014/02/10 职场文书
洗车工岗位职责
2014/03/15 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js