매우 사용하기 쉬운 jQuery 둥근 모서리 플러그인 Corner Quick

매우 사용하기 쉬운 jQuery 둥근 모서리 플러그인 Corner Quick_jquery

WBOY

풀어 주다： 2016-05-16 16:38:20

원래의

1268명이 탐색했습니다.

jQuery Corner는 원래 Dave Methvin이 개발한 jQuery 플러그인이지만 Malsup 동지의 도움으로 몇 가지 중요한 개선이 이루어졌습니다. 물론, 편의상 이 글에서는 플러그인을 첨부파일로 제공하겠지만, 최신 버전을 받으시려면 해당 프로젝트의 github에 접속하시기 바랍니다.
둥근 모서리와 기타 스타일이 마술처럼 나타나는 이유는 플러그인이 대상 요소에 작은 띠를 추가하기 때문입니다. 이 작은 띠는 배경색이므로 사람의 눈에는 둥근 모서리만 보이지만 실제로는 작습니다. 원래의 직각을 덮습니다.

저는 사실 마술사가 아닌 것 같아요. 시작하자마자 배경을 공개한 것 같아요. 걱정하지 마세요. 이 마법에 대한 몇 가지 요구 사항을 추가하겠습니다.

1. 플러그인은 블록 요소용으로 특별히 작성되었기 때문에 div, p 등이 적용 가능합니다. 물론 인라인 요소를 전혀 사용할 수 없다는 의미는 아닙니다. 스팬에 모서리를 추가하는 것이 더 비쌉니다. 그러나 일반 사람들은 둥근 모서리의 스팬(span)에 대해 논쟁을 벌일 생각이 없으므로 그냥 스팬(span)을 div로 변경하세요.
2. 플러그인에서 새롭게 추가된 border-radius 기능은 IE

자, 기본 사항이 소개되었습니다. 모든 사람에게 사용법을 가르쳐주십시오. 이것이 핵심이지만 매우 간단합니다. 첫 번째 단계는 기본 HTML 웹 페이지, DIV 레이아웃 및 CSS를 구축하는 것입니다.

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

로그인 후 복사

효과는 다음과 같습니다.

두 번째 단계는 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>

로그인 후 복사

이 시점에서도 효과는 지금의 사진과 동일하며 직각도 변경되지 않았습니다.
세 번째 단계는 플러그인이 DIV 블록에서 작동할 수 있도록 js 코드를 작성하는 것입니다.

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

로그인 후 복사

이때 둥근 모서리가 나타납니다.

이 시점에서 작업이 완료되었습니다. 확장하고 상승하기 시작합니다.

************************************확대********** ********************************

1. 다양한 코너가 있습니다

오목한 모양을 좋아한다면 위 사진의 첫 번째 행과 세 번째 열이 좋은 선택입니다. 먼저 홈을 뜻하는 노치(notch)라는 단어에 대해 알아봅시다. 코드 하나를 다음과 같이 변경하세요.

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

});
</script>

로그인 후 복사

다음 효과를 얻을 수 있습니다:

여기에는 명백한 문제가 있습니다. 현재 크롬 아래에는 모서리가 하나만 있습니다. IE에서도 제대로 작동하지 않습니다. 틱톡, 거의 30분이 지났습니다. 마침내 알게 되었습니다:
모서리가 있는 Div에 상위 Div를 추가해야 합니다. 그렇지 않으면 제가 만든 예에서 상위는 본문이고 플러그인 자체가 다른 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>

로그인 후 복사

사진 살펴보기:

하지만 모두가 주의해야 할 문장이 두 개 있습니다(원문):* Internet Explorer에서는 quirksmode로 렌더링된 페이지의 경우 접는 선이 지원되지 않습니다.* 접는 선은 실행하지 않는 한 Internet Explorer의 상단 모서리에서만 지원됩니다. IE8 표준 모드에서는 Corner 스타일을 정직하게 사용해 보세요. 2. 선택할 수 있는 위치는 여러 가지가 있습니다. 위쪽/아래쪽/왼쪽/오른쪽/tl/tr/bl/br을 사용하여 모서리가 나타나는 특정 위치를 설정할 수 있습니다. 사진을 보세요:

예를 들어 노치의 경우 mydiv 하단에 노치 효과를 추가하고 싶다면 다음과 같이 코드를 다시 작성하세요.

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

로그인 후 복사

그래서 하단에는 노치 각도만 생성됩니다.

3. 사용자 정의 가능한 각도 크기 이 기능은 매우 유용합니다. 픽셀 값을 채워 각도를 변경할 수 있습니다. 시도해 보세요:

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

로그인 후 복사

놀라운 이미지는 다음과 같습니다.

정말 놀랍습니다. 하하, 더 있습니다.

4. 믹스 앤 매치 이 예에서는 위쪽 두 모서리를 둥근 모서리로 변경하고 아래쪽 모서리는 변경하지 않습니다. 코드를 보세요:

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

로그인 후 복사

예, 모서리 두 개만 사용하세요. 물론 네 모서리를 완전히 활용하여 각 모서리를 맞춤 설정할 수도 있습니다.

5. 테두리 장식 이것이 하이라이트입니다. 이것을 제안한 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>

로그인 후 복사

이렇게 됩니다: