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 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
webpack5 联邦模块介绍详解
Jul 08 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 addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
一段实用的php验证码函数
2016/05/19 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
python实现k-means聚类算法
2018/02/23 Python
python实现简单的文字识别
2018/11/27 Python
python中正则表达式与模式匹配
2019/05/07 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
电影雷锋观后感
2015/06/10 职场文书
春节慰问简报
2015/07/21 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书