CSS+Jquery实现页面圆角框方法大全(3)


<script type="text/JavaScript">
$(".corner").prepend("<div class=\"cortop\"><div class=\"bgcortopl\"></div><div class=\"bgcortopr\"></div></div>");
$(".corner").after("<div class=\"corbom\"><div class=\"bgcorboml\"></div><div class=\"bgcorbomr\"></div></div>");
</script>


生成的HTML代码:

复制代码 代码如下:


<div><div><div/><div/></div>
<div>
<input type="submit" value="查询" />
<input type="submit" value="导出"/>
<input type="submit" value="打印"/>
<input type="submit" value="连续打印" />
</div>
</div>
<div><div/><div/></div>


第三步:编辑CSS样式,实现你想要的圆角样子。


总结:以上只要将要做圆角的DIV块的源码中class="corner",通过调用JS代码后就可以生成想要做圆角背景的div标签,就不需要每做一个圆角块手动添加那些代码,这样就使得工作简单,源文件也清晰精简,方便研发人员和UI人员。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdpjdz.html