quickcover组件开发

今天在网上浏览发现有一个纯css完成的蒙版效果，于是思考是不是可以做一个组件只需要开发者关注蒙版内的html内容编写，而不需要关注蒙版的设置与生成，于是就诞生了quickcover组件开发效果先展示一下呀，臭美一下了。

效果还可以吧，先说一下使用方法吧

<div>
<*>
</*>
</div>
<input data-role="quickcover" type="hidden "/>    

--------------------------------------------------------------------------------------------------------------------------------------

这样既可以了，需要注意的是这里的div的css样式会被组件修改为" position: relative; 

overflow: hidden; ",而<*></*>代表的是蒙版下面原本的内容注意的是<*></*>总体大小应应与div一样；这么看来是有些限制了不过还好可以在<*></*>套一层div直接与外层div大小一样就可以了。

----------------------------------------------------------------------------------------------------------------------------------

蒙版默认的为quickcover如果想编写自己的内容可以这样

代码只需要改动一处即可增加data-options='{"covercontent":"<h1>have a init test </h1>"}'即可

<div style="height: 200px; width: 200px">
	<img src="./img/demo.jpg" style="height: 200px; width: 200px" />
</div>
<input data-role="quickcover" data-options='{"covercontent":"<h1>have a init test </h1>"}'type="hidden" />

----------------------------------------------------------------------------------------------------------------------------------

当然也可以使用函数式的方式启用组件

<div style="height: 200px; width: 200px">
	<img src="./img/demo.jpg" style="height: 200px; width: 200px" />
</div>
<input type="hidden" />

启用只需要

var qc = $("input[type=hidden]").quickcover();
qc.overwrite("<h1>a test</h1>");

如果有多组那需要遍历qc,设置每个蒙版里的内容即可。

----------------------------------------------------------------------------------------------------------------------------------

今天先说一下用法了，至于里面的bug与开发思路在后啊面再讲了，一不注意有凌晨了。。。

对了这是我这个项目的项目地址原创不易希望大家多多支持呀https://github.com/JackWuChengHao/jquerycover