JQuery круглые углы - PullRequest
Новая
       18

JQuery круглые углы

3 голосов
/ 07 ноября 2008

Возможно, это звучит очень глупо, но я не представляю, как реализовать закругленные углы jquery (http://www.methvin.com/jquery/jq-corner-demo.html). Мой javascript-fu не работает, и я не могу заставить его работать на своей странице. покажи мне простой пример HTML и JavaScript, который ты использовал бы для их показа? Извинения за мой идиотизм.

Ответы [ 3 ]

10 голосов
/ 07 ноября 2008
  1. Эта вещь не работает в Safari и Google Chrome.

  2. Вам необходимо включить jquery.js на своей странице. Не забудьте иметь отдельный закрывающий тег.

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

  3. Вам также необходимо включить JavaScript-файл jQuery Corner Plugin ( jquery.corner.js ) на свою страницу.

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

  4. Где-то на вашей странице вы должны иметь <div>, который вы хотите иметь углы:

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

  5. Где-то еще на вашей странице, желательно не перед самим div, введите следующую команду JavaScript. Это выполнит внутреннюю функцию, когда страница загружена и готова к манипулированию.

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

  6. Готово! Если нет, дайте мне знать.

1 голос
/ 06 ноября 2009

jquery уголков Метвин http://www.methvin.com/jquery/jq-corner-demo.html в порядке и работают нормально, но ... есть более красивая альтернатива: 

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

вы можете использовать эту библиотеку, чтобы делать округленные изображения даже.

И что очень важно: - 18 июля 2008 г. - Теперь работает в IE6,7, Safari и во всех других современных браузерах. Исправлена ​​ошибка центрирования.

Итак, пожалуйста, скачайте 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 - верхний левый, верхний правый углы и т. д. *

далее, ваша область тела:

а также ?

и все тут :) 1023 *

ссылка на изображение о: 

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>

просто скопируйте, вставьте, наслаждайтесь:)

0 голосов
/ 07 ноября 2008

1) Убедитесь, что jquery загружен 2) Убедитесь, что библиотека углов загружена 3) В обратном вызове ready, используйте селектор, чтобы взять div, который вы хотите создать, и вызовите метод corners 

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