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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
ExtJS DOM元素操作经验分享
Aug 28 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
Windows下Node.js安装及环境配置方法
Sep 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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
php与Mysql的一些简单的操作
2015/02/26 PHP
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
一秒学会微信小程序制作table表格
2019/02/14 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
python3中eval函数用法使用简介
2019/08/02 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
Python 寻找局部最高点的实现
2019/12/05 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
python如何判断IP地址合法性
2020/04/05 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
一些PHP的面试题
2015/05/06 面试题
物业保安员岗位职责制度
2014/01/30 职场文书
电子信息专业自荐书
2014/02/04 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
项目安全员岗位职责
2015/02/15 职场文书
特此通知格式
2015/04/27 职场文书
军训通讯稿范文
2015/07/18 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers