超級好用的jQuery圓角插件 Corner速成

2019-11-20 14:13:29

字體：大中小

來源：轉載

供稿：網友

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

看來我真不是干魔術師的料，一上來就先把老底給揭了出來。不急，我再補充一下，這個魔術的一些要求：

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

OK，介紹完了基本要點。教大家如何使用，這是重點，但很簡單。第一步，構建基本HTML網頁和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>

此時，還是剛才圖的效果，直角沒變。
第三步，寫js代碼，讓插件對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>

此時，圓角就出現了。

至此，小功告成。開始拓展拔高啦。

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

一、有多種Corner可選

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

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

就可以得到這個效果：

這里出現了明顯的問題，當前在chrome下只有一個角。在IE下也不正常。滴答滴答，時間經過了近半個小時。我終于發現：
應該給有角的Div加一個父Div，否則我自己做的例子中父級為body，而插件自己還要再增加一個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. 所以，盡量老老實實地用Corner樣式吧。二、有多種位置可選可以使用top/bottom/left/right/tl/tr/bl/br設置corner出現的具體位置?？磮D：

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

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

于是，就只有底部產生notch角了。

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

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

驚奇的圖像如下：

神奇吧，呵呵，還有呢。

四、混搭就剛才這個例子，把上邊兩個角變為圓角，而下方仍然不變。看代碼：

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

沒錯，就是用兩句corner。當然你可以完全使用四個corner把各個角都自定義。

五、邊框裝飾這是亮點，感謝一個名叫Kevin Scholl的家伙提出的這個建議，不過這的確是一個非常棒的提議。看代碼吧：

<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>

就會這樣：