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 相关文章推荐
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
js获取页面description的方法
May 21 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
Bootstrap Table使用整理(一)
Jun 09 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
JavaScript中变量提升机制示例详解
Dec 27 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中的extract的作用分析
2008/04/09 PHP
php笔记之常用文件操作
2010/10/12 PHP
PHP抽象类 介绍
2012/06/13 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
js电信网通双线自动选择技巧
2008/11/18 Javascript
js 提交和设置表单的值
2008/12/19 Javascript
javascript 动态生成私有变量访问器
2009/12/06 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
js控制table合并具体实现
2014/02/20 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
pandas通过索引进行排序的示例
2018/11/16 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
python代码实现猜拳小游戏
2020/11/30 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
函授本科毕业生自我鉴定
2013/10/16 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
四风问题对照检查材料
2014/09/22 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python
mysql 生成连续日期及变量赋值
2022/03/20 MySQL
python中redis包操作数据库的教程
2022/04/19 Python