源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Fixie.js 自动填充内容的插件

  • 时间:2022-01-22 12:23 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Fixie.js 自动填充内容的插件
Fixie.js是一个自动填充HTML文档内容的开源工具 官方网址地址:[url=http://fixiejs.com/]http://fixiejs.com/[/url] Fixie.js 下载地址 [url=http://xiazai.jb51.net/201206/yuanma/fixie_jb51.rar]fixie_jb51.rar[/url] [b]为什么使用Fixie?[/b] 当我们设计网站的时候,由于无法确定最终填充的内容,经常需要添加一写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" 容器内部所有的非空后代元素(注意后代与子代的区别)都会受到影响 看下面的说明
[u]复制代码[/u] 代码如下:
<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里面,以便区分填充内容与真实内容。 ## 授权 废话,不翻译了。 示例说明:
[u]复制代码[/u] 代码如下:
<!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>
显示效果 [img]http://files.jb51.net/upload/201206/20120628183511253.png[/img] 作者:西山
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部