Jquery закругленные углы
Возможно, это звучит очень глупо, но я не знаю, как реализовать закругленные углы jquery (http://www.methvin.com/jquery/jq-corner-demo.html). Мой javascript-fu полностью не работает, и я не могу заставить его работать на моей странице. Может ли кто-нибудь показать мне простой пример HTML и JavaScript, который вы бы использовали для их демонстрации? Извиняюсь за мой идиотизм.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
1) Убедитесь, что jquery загружен 2) Убедитесь, что библиотека углов загружена. 3) В готовом обратном вызове используйте селектор, чтобы захватить div, который вы хотите применить, и вызовите метод углов.
$(document).ready(function() {
$("#idofdiv").corners();
});
Эта вещь не работает в Safari и Google Chrome.
Вам необходимо включить jquery.js на свою страницу. Не забудьте иметь отдельный закрывающий тег.
<script type = "text/javascript" src = "jquery.js"></script>Вам также необходимо включить на свою страницу файл JavaScript подключаемого модуля jQuery Corner (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>Готово! Если нет, дайте мне знать.
Re # 5: функция выполняется только тогда, когда DOM готов, поэтому настройка этой функции для запуска может происходить до div, а не до включения файла jQuery. (Мне нравится держать мой рядом с остальной частью javascript в заголовке или во внешнем файле - он упускается из виду в нижней части страницы)
Я следую рекомендациям YSlow и помещаю весь свой JS внизу страницы, непосредственно перед </body>. К тому времени DOM будет готов, и я бы заключил вызов в функцию $ (document) .ready ().
OMFG - TYVM! Я слишком долго боролся с этой дурацкой штукой. Вы сэр, сделали мой день :)
Углы jquery от Methvin 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 - верхний левый, верхний правый углы и т. д.
далее ваша область ТЕЛА:
and ?вот и все :)
ссылка на изображение о:
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 интернет. Используйте это с умом: D