All geek questions in one place

JQuery round corners

This probably sounds very stupid, but I have no idea how to implement the rounded corners of jquery ( http://www.methvin.com/jquery/jq-corner-demo.html ). My javascript-fu is complete and I cannot get it to work on my page. Can someone show me a simple example of HTML and JavaScript that you would use to show them? Apologies for my idiocy.

+3
source share
3 answers
  • This feature does not work in Safari and Google Chrome.

  • You need to include jquery.js in your page. Remember to have a separate closing tag.

    <script type="text/javascript" src="jquery.js"></script>

  • JavaScript jQuery Corner Plugin (jquery.corner.js).

    <script type="text/javascript" src="jquery.corner.js"></script>

  • - <div>, :

    <div id="divToHaveCorners" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>

  • - , div, JavaScript. , .

    <script type="text/javascript">$(function() { $('#divToHaveCorners').corner(); } );</script>

  • ! , .

+10

jquery Methvin http://www.methvin.com/jquery/jq-corner-demo.html , ... :

http://blue-anvil.com/jquerycurvycorners/test.html

, .

:  - 18 2008 . - IE6,7, . ​​ .

, jQuery Curvy Corners 2.0.2 Beta 3 :

http://code.google.com/p/jquerycurvycorners/downloads/list

jquery core lib, HEAD :

<head>
<script src="http://path.to.your.downloaded.jquery.library/jquery-1.2.6.min.js" type="text/javascript"></script> 
<script src="http://path.to.your.downloaded.jquery.library/jquery.curvycorners.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){

$('.myClassName').corner({
     tl: { radius: 6 },
     tr: { radius: 6 },
     bl: { radius: 6 },
     br: { radius: 6 }
});

}
</script>
</head>

: tl, tr, bl, br - , ..

, BODY:

?

:)

:

http://img44.imageshack.us/img44/3638/corners.jpg

... :

<html>
    <head>
    <script src="http://blue-anvil.com/jquerycurvycorners/jquery-1.2.6.min.js" type="text/javascript"></script> 
    <script src="http://blue-anvil.com/jquerycurvycorners/jquery.curvycorners.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){

    $('.myClassName').corner({
         tl: { radius: 12 },
         tr: { radius: 12 },
         bl: { radius: 12 },
         br: { radius: 12 }
    });

    });
    </script>
 <style>
 .myClassName
 {
 width:320px;
 height:64px;
 background-color:red;
 text-align:center;
 margin:auto;
 margin-top:30px;
 }
 </style>
</head>

<body>

<div class="myClassName">content</div>

</body>

</html>

, , :)

+1

1) Make sure jquery is loaded 2) Ensure lib angles are loaded 3) In the finished callback, use the selector to grab the div you want to activate and call the angles method

$(document).ready(function() {
 $("#idofdiv").corners();
});
0
source

Source: https://habr.com/ru/post/1699242/

More articles:


All Articles