Реализация закругленных углов JQuery - PullRequest
Новая
       0

Реализация закругленных углов JQuery

1 голос
/ 28 февраля 2011

У меня довольно грубая реализация углов для (main_bg.gif) внутри оберточного глобально-внутреннего div. Хотя теперь он работает с внутренними элементами div для представления каждого угла, мне сказали, что это не лучшая реализация, поэтому, если у кого-то есть более чистое решение, это было бы здорово!

В нижнем углу изображения используются: margin-top: -8px;

Вы можете увидеть это внутреннее изображение (очень светлое синее) с его углами: http://www.davincispainting.com

К сожалению, я не могу использовать CSS3.

Вот HTML: 

<body>
<div id="global-wrap>  
    <div id="global-inner">
        <div class="topleft">
        </div>
        <div class="topright">
        </div>
        <asp:ContentPlaceHolder ID="MainContent" runat="server">
        </asp:ContentPlaceHolder>
        <br style="clear: both" />
        <div id="bottom-wrap"></div>
        <div class="bottomleft">
        </div>
        <div class="bottomright">
        </div>
    </div>
</div>
</body>

Вот соответствующий CSS: 

body
{
background-color: #9EB0C8;
font-family: Arial,Helvetica,sans-serif;
font-size: 62.5%;
}
#global-wrap 
{
margin: 0 auto;
text-align: left;
width: 880px;
overflow: hidden;
}
#global-inner 
{
background: url("/images/main_bg.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 55px 0;
overflow: hidden;
text-align: left;
width: 880px;
}
#global-inner .topleft 
{
background: url("/images/main_left_top_corner2.jpg") no-repeat scroll left top transparent;
float: left;
height: 9px;
width: 9px;
}
#global-inner .topright 
{
background: url("/images/main_right_top_corner2.jpg") no-repeat scroll right top transparent;
float: right;
height: 9px;
width: 9px;
}
#global-inner .bottomleft 
{
background: url("/images/main_left_bottom_corner.jpg") no-repeat scroll left bottom transparent;
float: left;
height: 9px;
margin-top: -8px;
width: 9px;
}
#global-inner .bottomright 
{
background: url("/images/main_right_bottom_corner.jpg") no-repeat scroll right bottom transparent;
float: right;
height: 9px;
margin-top: -8px;
width: 9px;
}

Как бы я реализовал этот Уголок для 2-х элементов CSS? 

<script type="text/javascript">
$('#global-inner').corner('15px');
</script>

#global-inner 
{
background: url("/images/main_bg2.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 55px 0;
overflow: hidden;
text-align: left;
width: 882px;
}
#mid-featureleft-faq .contentbox
{
/*height:260px;*/ 
width:536px; 
padding:3px 7px 0 7px;
margin:0 0 0 0;
position:relative;   
}

Ответы [ 3 ]

3 голосов
/ 28 февраля 2011

Используйте плагин jQuery за круглым углом.

http://jquery.malsup.com/corner/

Поддерживается во всех браузерах, включая IE. Он рисует углы в IE, используя вложенные элементы div (без изображений). Он также имеет встроенное округление радиуса границы в браузерах, которые его поддерживают (Opera 10.5+, Firefox, Safari и Chrome). Поэтому в этих браузерах плагин просто устанавливает вместо этого свойство css.

Вот как это сделать

Вам необходимо включить jQuery и js-скрипт Corner до </body>. Затем напишите свой jQuery как $ ('div, p'). Corner ('10px'); и поставить перед ''. Таким образом, ваш HTML будет выглядеть как приведенный ниже код. Здесь я делаю круглые углы для всех тегов div и p. Если вы хотите сделать это для определенного идентификатора или класса, то вы можете сделать что-то вроде $('#myid').corner();

<body>
    <div class="x"></div>
    <p class="y"></p>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
    <script>$('div, p').corner();</script>
</body>

Проверьте рабочий пример на http://jsfiddle.net/VLPpk/1

1 голос
/ 28 февраля 2011 
.rounded {
    -moz-border-radius: 10px; /* Firefox */
    -webkit-border-radius: 10px; /* Safari, Chrome */
     border-radius: 10px; /* CSS3 */
}

Надеюсь, это поможет:)

0 голосов
/ 28 февраля 2011

Вы можете использовать плагин jQuery Curvy Corners .В современных браузерах будет использоваться версия CSS3, но в браузерах без css3 border-radius (IE aso) плагин создает радиус границы с помощью javascript.

...