使用jQuery实现各式各样的边框

最新推荐文章于 2023-09-20 19:45:12 发布

sean1203

最新推荐文章于 2023-09-20 19:45:12 发布

阅读量6.5k

点赞数 1

分类专栏： jquery||js 文章标签： jquery class div dialog html function

jquery||js 专栏收录该内容

6 篇文章

订阅专栏

介绍三种方法：
第一种：最原始的Html+CSS
这个其实很简单，有网页设计的朋友应该都晓得：设计的技巧在于CSS和DIV的使用。

<div class="dialog"> <div class="hd"> <div class="c"></div> </div> <div class="bd"> <div class="c"> <div class="s"> <main content goes here > </div> </div> </div> <div class="ft"> <div class="c"></div> </div> </div>

这是原始的Div布局框架，有兴趣的可以参考完整的例子和代码。（也可以自行下载，见附件）一个传统的框架设计。不过还是很实用的哦。
方法二：利用JQuery对上面的方法加以改进

首先，我们需要一个“钩子”，一个特殊的HTML元素，或者一个id，或者一个对象名–来告诉jQuery处理的目标。

现在我们改成了这个样子：

<div class=“roundbox”> <main content goes here > </div>

下一步，我们使用jQuery来将剩下的代码添加进去：

$(document).ready(function(){ $("div.roundbox") .wrap('<div class="dialog">'+ '<div class="bd">'+ '<div class="c">'+ '<div class="s">'+ '</div>'+ '</div>'+ '</div>'+ '</div>'); });

仔细观察代码，你就会发现它们都跑到了js代码里面，在wrap函数执行时它们将嵌套在“钩子Div”的内部。

细心的观众会发现我漏掉了部分代码。这是因为jQuery中的wrap()函数要求div标签必须严格对称嵌套才能工作。

具体的，我去掉了下面两个部分：

<div class="hd"><div class="c"></div></div> <div class="ft"><div class="c"></div></div>

下一步我们将会通过prepend和append函数将这两段代码添加进带有dialog对象名的div标记内部，并且使用“连锁”方法。

$('div.dialog').prepend('<div class="hd">'+ '<div class="c"></div>'+ '</div>') .append('<div class="ft">'+ '<div class="c"></div>'+ '</div>');

可以查看DEMO演示
本段资料来源：（http://wiki.jquery.org.cn）。
方法三：利用Jquery Corner Gallery：
使用方法很简单：首先所有的jquery project都需要最新的jquery.js,其次下载下载jquery.corner.js
只需要调用类似 $().corner("effect corners width")的方法就可以画出你需要的边框，其中effect可以是 round、bevel、dog等关于边框类型参考Jquery corner demo
width是宽度参数一px为单位。如果你对$()方法的使用感到陌生的话，不必当心，其实跟CSS中元素调用类似：比如你需要所有id为class为round的标记的边框类型为圆角，那么调用方法就是：$("div.round").corner().如果需要为id为slant的元素置顶边框类型dog以及宽度4px，那么表达式就可以是：$("#slant").corner("dog 4px").很简单吧。好了来看一个具体的例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="../lib/jquery/jquery.js"></script> <script type="text/javascript" src="jquery.corner.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.corner1').corner("10px"); $('.corner2').corner("tear 10px"); }); </script> <title>Round conrners</title> <style type="text/css"> .corner1, .corner2 { background: #6FA; width: 23em; text-align: center; padding: 20px 2px; margin: 1em 0.25em; color:red; } .corner1 h1,.corner2 h1 { font-size: 120%; } </style> </head> <body> <div class="corner1"><h1>round corner with 10px</h1></div> <div class="corner2"><h1>Tear corner with 10px</h1></div> </body> </html>

效果图：

关于jquery Api参考：http://www.k99k.com//jquery/api/jquery1.1_api_cn.xm
append() 向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。$("p").append("<b>Hello</b>");

prepend()向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。

$("p").prepend("<b>Hello</b>");
Wrap()把所有匹配的元素用其他元素的结构化标记包装起来。
这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。

这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。

当HTML标记代码中的元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包装完成之后再行添加。