超級(jí)好用的jQuery圓角插件 Corner速成

2019-11-20 14:13:29

字體：大中小

供稿：網(wǎng)友

jQuery Corner是一款jQuery的插件，最初由Dave Methvin開(kāi)發(fā)，但后在Malsup同志的協(xié)助下，進(jìn)行了一些重要的改進(jìn)?，F(xiàn)在項(xiàng)目放在github上，當(dāng)然為了方便，本文會(huì)以附件的形式提供該插件，但要想得到最新版，請(qǐng)到項(xiàng)目的github上拿。
之所以會(huì)像變魔術(shù)一樣地展現(xiàn)圓角及其他樣式，是由于該插件為目標(biāo)元素增加了一些小條塊，這些小條塊為背景色，所以人眼看上去出現(xiàn)了圓角而已，其實(shí)就是小東西遮蓋了本來(lái)的直角。

看來(lái)我真不是干魔術(shù)師的料，一上來(lái)就先把老底給揭了出來(lái)。不急，我再補(bǔ)充一下，這個(gè)魔術(shù)的一些要求：

1、插件專為block元素編寫(xiě)，所以div、p等均適用；而inline的元素則沒(méi)有那么幸運(yùn)了，當(dāng)然也不是說(shuō)inline根本不能用，只是面對(duì)為span增加corner要多費(fèi)點(diǎn)神。不過(guò)，正常人不會(huì)和span的圓角較勁吧，把span改成div得了。
2、對(duì)于插件新增的border-radius功能，IE<=8全體不支持，除了IE外全體瀏覽器都支持。娘的，再對(duì)自己國(guó)度IE6泛濫的現(xiàn)狀深切鄙視一下。

OK，介紹完了基本要點(diǎn)。教大家如何使用，這是重點(diǎn)，但很簡(jiǎn)單。第一步，構(gòu)建基本HTML網(wǎng)頁(yè)和DIV格局，并CSS。

<html><head><style type="text/css">div{width:350px;height:200px;background-color: #6af;}</style></head><body><div></div></body>

</html>

效果如下：

第二步，引入jQuery，和jQuery Corner插件。

<html><head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="js/jquery.corner.js"></script><style type="text/css">div{width:350px;height:200px;background-color: #6af;}</style></head><body><div></div></body></html>

此時(shí)，還是剛才圖的效果，直角沒(méi)變。
第三步，寫(xiě)js代碼，讓插件對(duì)DIV塊起作用。

<html><head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="js/jquery.corner.js"></script><script type="text/javascript">$(function(){$("div").corner();});</script><style type="text/css">div{width:350px;height:200px;background-color: #6af;}</style></head><body><div></div></body></html>

此時(shí)，圓角就出現(xiàn)了。

至此，小功告成。開(kāi)始拓展拔高啦。

********************************拓展************************************

一、有多種Corner可選

如果你喜歡凹狀，那么上圖第一排，第三列就是好選擇。先認(rèn)識(shí)個(gè)單詞notch，就是凹槽的意思。只需把一處代碼改成：

<script type="text/javascript">$(function(){$("div").corner("notch");});</script>

就可以得到這個(gè)效果：

這里出現(xiàn)了明顯的問(wèn)題，當(dāng)前在chrome下只有一個(gè)角。在IE下也不正常。滴答滴答，時(shí)間經(jīng)過(guò)了近半個(gè)小時(shí)。我終于發(fā)現(xiàn)：
應(yīng)該給有角的Div加一個(gè)父Div，否則我自己做的例子中父級(jí)為body，而插件自己還要再增加一個(gè)Div，就弄亂套了。所以我修改了最初的代碼：

<html><head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="js/jquery.corner.js"></script><script type="text/javascript">$(function(){$("#mydiv").corner('bevel');});</script><style type="text/css">#mydiv{width:350px;height:200px;background-color: #6af;}</style></head><body><div><div id="mydiv"></div></div></body></html>

看圖吧：

但有兩句話需要大家注意（原文）：* Fold lines are not supported in Internet Explorer for pages rendered in quirksmode.* Fold lines are only supported on top corners in Internet Explorer, unless running in IE8 standards-mode. 所以，盡量老老實(shí)實(shí)地用Corner樣式吧。二、有多種位置可選可以使用top/bottom/left/right/tl/tr/bl/br設(shè)置corner出現(xiàn)的具體位置。看圖：

比如對(duì)于notch而言，想為mydiv的底部增加notch效果，則改寫(xiě)代碼如下：

$("#mydiv").corner('bevel bottom');

于是，就只有底部產(chǎn)生notch角了。

三、可自定義角度大小這功能很好，填寫(xiě)個(gè)像素值，就能改變角度。試試吧：

$("#mydiv").corner('bevel bottom 50px');

驚奇的圖像如下：

神奇吧，呵呵，還有呢。

四、混搭就剛才這個(gè)例子，把上邊兩個(gè)角變?yōu)閳A角，而下方仍然不變。看代碼：

$("#mydiv").corner('top 30px').corner('bevel bottom 50px');

沒(méi)錯(cuò)，就是用兩句corner。當(dāng)然你可以完全使用四個(gè)corner把各個(gè)角都自定義。

五、邊框裝飾這是亮點(diǎn)，感謝一個(gè)名叫Kevin Scholl的家伙提出的這個(gè)建議，不過(guò)這的確是一個(gè)非常棒的提議?？创a吧：

<html><head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="js/jquery.corner.js"></script><script type="text/javascript">$(function(){$("#mydiv p").corner('round 8px').parent().css('padding','8px').corner('round 14px');});</script><style type="text/css">#mydiv{width:360px;background-color: #600;}#mydiv p{width:350px;height:200px;background-color: #6af;}</style></head><body><div><div id="mydiv"><P></p></div></div></body></html>

就會(huì)這樣：