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代码
Mar 10 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
javascript与有限状态机详解
May 08 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 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
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
Yii实现简单分页的方法
2016/04/29 PHP
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
在Python的Django框架中包装视图函数
2015/07/20 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
Django的models模型的具体使用
2019/07/15 Python
python实现邮件自动发送
2019/08/10 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
django admin 添加自定义链接方式
2020/03/11 Python
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
override和overload的区别
2016/03/09 面试题
理工大学毕业生自荐信
2013/11/01 职场文书
大专学生推荐信范文
2013/11/19 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
企业安全标语
2014/06/07 职场文书
四年级小学生评语
2014/12/26 职场文书
网络营销计划书
2015/01/17 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python