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 相关文章推荐
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
基于jquery的监控数据是否发生改变
Apr 11 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
js网页实时倒计时精确到秒级
Feb 10 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
Vue表单实例代码
Sep 05 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
JS简单实现数组去重的方法示例
Mar 27 Javascript
详解如何使用babel进行es6文件的编译
May 29 Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
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不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
javascript整除实现代码
2010/11/23 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
Python中判断输入是否为数字的实现代码
2018/05/26 Python
Django实现表单验证
2018/09/08 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
2013英文求职信模板范文
2013/11/15 职场文书
招商经理岗位职责
2013/11/16 职场文书
优秀大学生的自我评价
2014/01/16 职场文书
军训考核自我鉴定
2014/02/13 职场文书
大学老师推荐信
2014/02/25 职场文书
2015元旦节寄语
2014/12/08 职场文书
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL