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>
精彩评论