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中yield实用简洁实现方式
Jun 12 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
jQuery plugin animsition使用小结
Sep 14 jQuery
vue实现模态框的通用写法推荐
Feb 26 Javascript
微信小程序实现天气预报功能
Jul 18 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
杏林同学录(五)
2006/10/09 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
PHP开发注意事项总结
2015/02/04 PHP
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
Python定时执行之Timer用法示例
2015/05/27 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
网吧收银员岗位职责
2013/12/14 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
啦啦队口号大全
2014/06/16 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS