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 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
基于JS实现table导出Excel并保留样式
May 19 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的面试题集,附我的答案和分析(一)
2006/11/19 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
Python中函数参数匹配模型详解
2019/06/09 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
波兰补充商店:Muscle Power
2018/10/29 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
服装厂厂长职责
2013/12/16 职场文书
幼儿园标语大全
2014/06/19 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
保卫工作个人总结
2015/03/03 职场文书
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python