开发者

Rounded Corner Implementation for 2 Classes

How would I implement this JQuery Round Corner Plugin for 2 CSS items?

Here is my implentation with 1 CSS Class item "global-inner":

<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-featureright-faq .contentbox
{
width:284px;
/*padding:6px;*/
padding:6px 6px 1px 6px;
margin:0 0 0 0;
position:relative;
background-color:#D5DBE0;
/*background-color:Red;*/
}

I need to add this implentation for this class as well: #mid-featureright-faq .contentbox

Here is a working example on JsFiddle: http://jsfiddle.net/VLPpk/26/

Here is an implentation for just 1 CSS Class: JQuery Rounded Corners Implementation

Im trying to implement of a suggestion from Ken, Im now trying to pass one class to the function, so I've changed some of the CSS Functions that were formerly ID's to Classes:

#global-wrap .rounded 
{
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;
}

<script type="text/javascript">
    $('.rounded').corner('15px');
</script>

However this isnt functioning for another rounded class that I have defined:

#mid-featureright-faq
{
width:296px;
float:left;
position: relative;
/*background-color:#D5DBE0;*/
}
#mid-featureright-faq .contentheader
{
height:53px;
width:296px;
margin:0 0 0 0;
position:relative;
background-color:green;
}    
#mid-featureright-faq .rounded
{
width:284px;
/*padding:6px;*/
padding:6px 6px 1px 6px;
margin:0 0 0 0;
position:relative;
/*background-color:#D5DBE0;*/
background-color:Red;
}

<div id="mid-featureright-faq">
    <div class="contentheader">
    &开发者_如何学Golt;/div>
    <div class="rounded">here
    </div>
</div>


If you want your selector to match multiple items by ID, you can do this:

$('#global-inner, #mid-featureright-faq').corner('15px');

A better approach might be to add a class to each of these elements, and select based on that class:

<div id="global-inner" class="content"> Stuff </div>
<div id="mid-featureright-faq" class="content"> Junk </div>

...then:

$('.content').corner('15px');

For better performance, you might consider reducing the scope of the selector:

$('#some-outer-container').children('.content').corner('15px');


This solution worked for 2 seperate classes:

<script type="text/javascript"> 
    $('.contentboxx, .rounded').corner('15px');
</script>

<div id="global-wrap">
    <div class="rounded">
    </div>
</div>

<div id="mid-featureright-faq">
    <div class="contentheader">
    </div>
    <div class="contentboxx">
    </div>  
</div>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜