Fixie.js 自动填充内容的插件
更新时间：2012年06月28日 18:54:38 作者：
Fixie.js 自动填充内容的插件，需要的朋友可以参考下
Fixie.js是一个自动填充HTML文档内容的开源工具
官方网址地址：http://fixiejs.com/
Fixie.js 下载地址 fixie_jb51.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>
官方网址地址：http://fixiejs.com/
Fixie.js 下载地址 fixie_jb51.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>
显示效果
作者：西山
相关文章
这篇文章主要为大家介绍了Three.js物理引擎Cannon.js创建简单应用程序详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
本篇文章主要介绍了webpack引入eslint配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
本篇文章主要介绍了JS操作xml对象转换为Json对象示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
这篇文章主要介绍了javascript笛卡尔积算法实现方法,实例分析了笛卡尔积算法的javascript实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了javascript 数据存储的常用函数总结的相关资料,需要的朋友可以参考下2017-06-06
本文主要介绍了微信小程序动画效果的实现方法与原理解析。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
当页面加载时，浏览器会创建页面的文档对象模型（Document Object Model）。文档对象模型定义访问和处理HTML文档的标准方法，本篇文章给大家介绍javascript dom 学习总结(五)，感兴趣的朋友一起学习吧2015-11-11
二维码作为现代信息传递的重要工具,其黑白色调一直是其标志性特征,然而,有时我们可能希望个性化定制二维码的颜色,以适应特定设计需求或提高可识别性,在这篇文章中,我们将深入探讨如何使用Canvas技术修改二维码的颜色,为二维码添加更多创意和个性2023-11-11
这篇文章主要介绍了js replace 全局替换的操作方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
这篇文章主要介绍了PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法,造成这个问题的原因是PHP上传大小限制为2MB,修改PHP.ini配置即可解决这问题,需要的朋友可以参考下2015-03-03
最新评论