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>

显示效果

作者：西山

赞 (0)

相关推荐

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

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

    Fixie.js是一个自动填充HTML文档内容的开源工具 官方网址地址:http://fixiejs.com/ Fixie.js 下载地址 fixie_jb51.rar 为什么使用Fixie? 当我们设计网站的时候,由于无法确定最终填充的内容,经常需要添加一写lorem ipsum(关于Lorem ipsum)到页面里面来预览一下页面的展现效果. 问题来了,添加过多的无聊的内容,使得我们的HTML文档变得臃肿,并且陷入复制-粘贴,手工编辑的毅种循环中. Fixie.js就是针对这个问题而诞生的,

  • js 博客内容进度插件详解

    js 博客内容进度插件详解

    前面的话 最近在复习自己写的博客,但有的博客内容很长,长到不知道多少时间可以读完.这时,就有种泄气的冲动.但,如果能够提供一个博客内容进度的插件,根据所读内容的多少,显示进度条,让自己对所读的内容进度心里有数,可以让自己平静下来,一点一点读下去.本文将详细介绍博客内容进度插件的实现 效果演示 无论是通过鼠标滚轮,还是拖动滚动条,也或者是按空格键,只要发生了页面的滚动操作,就会触发页面底部博客内容进度条的变化.根据当前内容的多少计算与博客所有内容的比例,最终对应成进度条的宽度.当鼠标移入进度条范围

  • SQL语句中公共字段的自动填充方法

    1. 前言 我们在设计数据库的时候一定会带上新增.更新的时间.操作者等审计信息. 之所以带这些信息是因为假如有一天公司的数据库被人为删了,尽管可能有数据库备份可以恢复数据.但是我们仍然需要追踪到这个事是谁干的,在什么时间干的,具体干了哪些事等等,方便定责和修补.但是我们变更每条数据都要去显式变更这些信息就十分繁琐,我们希望无感知的来处理这些信息. 2. 通用方式 那么有什么好的解决思路呢?在Spring Data框架中提供@CreatedBy和@LastModifiedBy来捕捉谁创建或修改的实

  • MyBatis-Plus逻辑删除和字段自动填充的实现

    MyBatis-Plus逻辑删除和字段自动填充的实现

    目录 一.ID生成策略 1.使用@TableId注解 2.全局ID生成策略 二.逻辑删除 1.全局配置 2.使用@TableLogic注解 三.字段自动填充 1.指定字段自动填充 2.自定义MetaObjectHandler 3.测试 四.执行SQL分析打印 1.添加 spy.properties配置文件 2.修改数据源配置 3.测试查询 一.ID生成策略 1.使用@TableId注解 @TableId注解:主键注解 使用位置:实体类主键字段. @Data @ToString @TableNam

  • python pandas利用fillna方法实现部分自动填充功能

    昨天,我们学习了pandas中的dropna方法,今天,学习一下fillna方法.该方法的主要作用是实现对NaN值的填充功能.该方法主要有3个参数,分别是:value,method,limit等.其余参数可以通过调用help函数获取信息. (1)value 该参数主要是确定填充数值 >>> df = pd.read_excel(r'D:/myExcel/1.xlsx') >>> df name Chinese Chinese.1 id 0 bob 12.0 12 123

  • MybatisPlus 自动填充的实现

    一.设置填充时机 使用下面的注解设置填充的时机,例如insert .update语句 @TableField(fill = FieldFill.INSERT) 有下面4种规则 源码 /** * 字段填充策略枚举类 * * <p> * 判断注入的 insert 和 update 的 sql 脚本是否在对应情况下忽略掉字段的 if 标签生成 * <if test="...">......</if> * 判断优先级比 {@link FieldStrateg

  • mybatis-plus主键id生成、字段自动填充的实现代码

    mybatis-plus主键id生成、字段自动填充的实现代码

    一.主键id的生成 数据库表里通常都会有一个主键id,来作为这条数据的唯一标识. 常见的方式 1.数据库自动增长 这种很常见了,可以做到全库唯一.因为id是天然排序的,对于涉及到排序的操作会很方便. 2.UUID 上面的自动增长,虽然简单,但是对于分表这样的操作来说就比较麻烦.因为你在第二张插入数据的时候,需要拿到上一张表最后一个数据的id. UUID则不同,每次都一个随机唯一的值,不过因为是随机,所以也就没有排序了. 3.redis redis也可以用来生成id,利用redis的原子操作.好处

  • mybatis plus CU自动填充 和 软删除自动填充的实现方法

    说明 CU 是 CRUD 中的创建和修改 本文实现以下需求效果 创建数据时自动填充 createTime 更新数据时自动填充 updateTime(每次修改都自动填充新的 updateTime 值) 软删除数据时自动填充 deleteUserId 和 deleteTime 创建 实体类 为实体类(DO)的 createTime 字段配置以下 Annotation,代表标记在插入(insert into)时自动填充字段值 @TableField(fill = FieldFill.INSERT) p

  • MybatisPlus 插入或更新数据时自动填充更新数据解决方案

    目录 解决方案 1. 实体类 2.拦截器MetaObjectHandler 3.测试 参考文章 Maven <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.2.6.RELEASE</version> <relativePath/>

  • MyBatis-Plus实现字段自动填充功能的示例

    MyBatis-Plus实现字段自动填充功能的示例

    目录 一.前言 二.实现 1. 实体类 2. 公用字段 - 使用注解填充字段 3. 自定义MyMetaObjectHandler字段自动填充处理类继承MetaObjectHandler 一.前言 在项目中,我们有一些公共的字段需要做修改 如: gmt_create:创建时间 creator_id:创建人 gmt_modified:修改时间 modifier_id:修改人 这时候我们可以采用 MyBatis-Plus 中的字段自动填充功能去实现 思路:抽取公用字段封装到BaseEntity类中,再

随机推荐