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 相关文章推荐
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
JavaScript实现tab栏切换效果
Mar 16 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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
php的控制语句
2006/10/09 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
Python计算三角函数之asin()方法的使用
2015/05/15 Python
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
python实现用户登录系统
2016/05/21 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
python常用排序算法的实现代码
2019/11/08 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
《池塘边的叫声》教学反思
2014/04/12 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
教师工作表现自我评价
2015/03/05 职场文书
环保建议书作文400字
2015/09/14 职场文书
九年级数学教学反思
2016/02/17 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server