Fixie.js 自动填充内容的插件_Javascript教程-查字典教程网
Fixie.js 自动填充内容的插件
Fixie.js 自动填充内容的插件
发布时间:2016-12-30 来源:查字典编辑
摘要:Fixie.js是一个自动填充HTML文档内容的开源工具官方网址地址:http://fixiejs.com/Fixie.js下载地址fixi...

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></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></h1>` - 添加几个单词的文本,`h2 - h6`亦然。

- `<p></p>` - 填充一段文字

- `<article></article>` - 填充几段文本(几个段落)

- `<section></section>` - 同上

- `<img></img>` - 填充一张注明了尺寸的图片

- `<a></a>` - 填充一个随机的链接(做广告嫌疑?)

提示

修改默认的图片填充

执行`fixie.setImagePlaceholder(source)`.

比如,如果你想从Flickr下载图片来填充,可以执行

fixie.setImagePlaceholder('http://flickholdr.com/${w}/${h}/canon').init();

给容器添加class="fixie"

容器内部所有的非空后代元素(注意后代与子代的区别)都会受到影响

看下面的说明

复制代码 代码如下:

<div>

<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></h1><>

<p> Check us out at <a></a>,<>

and don't forget to view source.</p>

<section><>

<p></p>

<img/>

<ul></ul>

<p></p>

<ol></ol>

</section>

<h2></h2>

<section></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>

显示效果

作者:西山

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类