jqueryカスタムアイコンを適用する

Question

私のアプリケーションは古いもので、jQueryをうまく使いませんでした。しかし、私は自分のページの1つにjQuery Accordionを使用しました。

"jquery-ui-1.8.13.custom.css"で書いたスタイルをすべて含めることはできません。だから私はアコーディオンの外観を設定するのに必要なスタイルだけを含むようにカスタマイズする必要があります。どのような内容の行を削除すべきですか？

のjQueryコード：私のCSSファイル

.ui-accordion { width: 100%; } 
/*border-color:#adb0b3; */ 
.ui-accordion .ui-accordion-header {border-color:#adb0b3; border-width:1px; border-style:solid; margin-left:20px; margin-right:20px; cursor: pointer; position: relative; margin-top: 1px; zoom: 1; background-color: #535353; color:White;} 
.ui-accordion .ui-accordion-li-fix { display: inline; } 
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; } 
.ui-accordion .ui-accordion-header a { text-decoration:none; font-family:Verdana,Tahoma,Arial; font-style:inherit; display: block; font-size: 1em; padding: .5em .5em .5em .7em; color:White;} 
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; } 
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } 
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; } 
.ui-accordion .ui-accordion-content-active { display: block; } 

/* states and images */ 
.ui-icon { width: 16px; height: 16px; background-image: url(Icons/jquery/ui-icons_222222_256x240.png); } 
.ui-widget-content .ui-icon {background-image: url(Icons/jquery/ui-icons_222222_256x240.png); } 
.ui-widget-header .ui-icon {background-image: url(Icons/jquery/ui-icons_ffffff_256x240.png); } 
.ui-state-default .ui-icon { background-image: url(Icons/jquery/ui-icons_ef8c08_256x240.png); } 
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(Icons/jquery/ui-icons_ef8c08_256x240.png); } 
.ui-state-active .ui-icon {background-image: url(Icons/jquery/ui-icons_ef8c08_256x240.png); } 
.ui-state-highlight .ui-icon {background-image: url(Icons/jquery/ui-icons_228ef1_256x240.png); } 
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(Icons/jquery/ui-icons_ffd27a_256x240.png); } 

/*set icons for Accordion*/ 
.ui-icon-circle-arrow-e { background-position: -112px -192px; } 
.ui-icon-circle-arrow-s { background-position: -128px -192px; } 
.ui-icon-circle-arrow-w { background-position: -144px -192px; } 
.ui-icon-circle-arrow-n { background-position: -160px -192px; } 

上

var icons = { 
      header: "ui-icon ui-icon-circle-arrow-e", 
      headerSelected: "ui-icon ui-icon-circle-arrow-s" 
     }; 

     // Accordion for Router Configuration and UNC Image Reopsitory 
     $("#dvAccordion").accordion(
     { autoHeight: false, 
      collapsible: true, 
      icons: icons 
     } 
    ); 

目次とはアイコン/ jqueryの/にjQueryの画像を配置しました。 それは完璧なアコーデオンを形成しますが、私はアイコンを設定できませんでした。どうして ？あなたの答えをありがとう -

Answer 1

あなたは

/* Layout helpers 
----------------------------------*/ 
.ui-helper-hidden 
{ 
    display: none; 
} 
.ui-helper-hidden-accessible 
{ 
    position: absolute !important; 
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px,1px,1px,1px); 
} 
.ui-helper-reset 
{ 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    line-height: 1.3; 
    text-decoration: none; 
    font-size: 100%; 
    list-style: none; 
} 
.ui-helper-clearfix:after 
{ 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
.ui-helper-clearfix 
{ 
    display: inline-block; 
} 
/* required comment for clearfix to work in Opera \*/ 
* html .ui-helper-clearfix 
{ 
    height: 1%; 
} 
.ui-helper-clearfix 
{ 
    display: block; 
} 
/* end clearfix */ 
.ui-helper-zfix 
{ 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    position: absolute; 
    opacity: 0; 
    filter: Alpha(Opacity=0); 
} 


/* Interaction Cues 
----------------------------------*/ 
.ui-state-disabled 
{ 
    cursor: default !important; 
} 


/* Icons 
----------------------------------*/ 

/* states and images */ 
.ui-icon 
{ 
    display: block; 
    text-indent: -99999px; 
    overflow: hidden; 
    background-repeat: no-repeat; 
} 


/* Misc visuals 
----------------------------------*/ 

/* Overlays */ 
.ui-widget-overlay 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 


/* Component containers 
----------------------------------*/ 
.ui-widget 
{ 
    font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; 
    font-size: 1.1em; 
} 
.ui-widget .ui-widget 
{ 
    font-size: 1em; 
} 
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button 
{ 
    font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; 
    font-size: 1em; 
} 
.ui-widget-content 
{ 
    border: 1px solid #dddddd; 
    background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; 
    color: #333333; 
} 
.ui-widget-content a 
{ 
    color: #333333; 
} 
.ui-widget-header 
{ 
    border: 1px solid #e78f08; 
    background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; 
    color: #ffffff; 
    font-weight: bold; 
} 
.ui-widget-header a 
{ 
    color: #ffffff; 
} 

/* Interaction states 
----------------------------------*/ 
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default 
{ 
    border: 1px solid #cccccc; 
    background: #f6f6f6 url(images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x; 
    font-weight: bold; 
    color: #1c94c4; 
} 
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited 
{ 
    color: #1c94c4; 
    text-decoration: none; 
} 
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus 
{ 
    border: 1px solid #fbcb09; 
    background: #fdf5ce url(images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x; 
    font-weight: bold; 
    color: #c77405; 
} 
.ui-state-hover a, .ui-state-hover a:hover 
{ 
    color: #c77405; 
    text-decoration: none; 
} 
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active 
{ 
    border: 1px solid #fbd850; 
    background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; 
    font-weight: bold; 
    color: #eb8f00; 
} 
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited 
{ 
    color: #eb8f00; 
    text-decoration: none; 
} 
.ui-widget :active 
{ 
    outline: none; 
} 

/* Interaction Cues 
----------------------------------*/ 
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight 
{ 
    border: 1px solid #fed22f; 
    background: #ffe45c url(images/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x; 
    color: #363636; 
} 
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a 
{ 
    color: #363636; 
} 
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error 
{ 
    border: 1px solid #cd0a0a; 
    background: #b81900 url(images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat; 
    color: #ffffff; 
} 
.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a 
{ 
    color: #ffffff; 
} 
.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text 
{ 
    color: #ffffff; 
} 
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary 
{ 
    font-weight: bold; 
} 
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary 
{ 
    opacity: .7; 
    filter: Alpha(Opacity=70); 
    font-weight: normal; 
} 
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled 
{ 
    opacity: .35; 
    filter: Alpha(Opacity=35); 
    background-image: none; 
} 

/* Icons 
----------------------------------*/ 

/* states and images */ 
.ui-icon 
{ 
    width: 16px; 
    height: 16px; 
    background-image: url(images/ui-icons_222222_256x240.png); 
} 
.ui-widget-content .ui-icon 
{ 
    background-image: url(images/ui-icons_222222_256x240.png); 
} 
.ui-widget-header .ui-icon 
{ 
    background-image: url(images/ui-icons_ffffff_256x240.png); 
} 
. 
.ui-icon 
{ 
    background-image: url(images/ui-icons_ef8c08_256x240.png); 
} 
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon 
{ 
    background-image: url(images/ui-icons_ef8c08_256x240.png); 
} 
.ui-state-active .ui-icon 
{ 
    background-image: url(images/ui-icons_ef8c08_256x240.png); 
} 
.ui-state-highlight .ui-icon 
{ 
    background-image: url(images/ui-icons_228ef1_256x240.png); 
} 
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon 
{ 
    background-image: url(images/ui-icons_ffd27a_256x240.png); 
} 

/* positioning */ 
.ui-icon-circle-arrow-e { background-position: -112px -192px; } 
.ui-icon-circle-arrow-s { background-position: -128px -192px; } 
.ui-icon-circle-arrow-w { background-position: -144px -192px; } 
.ui-icon-circle-arrow-n { background-position: -160px -192px; } 

/* Misc visuals 
----------------------------------*/ 

/* Corner radius */ 
.ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; } 
.ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; } 
.ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } 
.ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } 
.ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; } 
.ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } 
.ui-corner-right { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } 
.ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } 
.ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } 

/* Overlays */ 
.ui-widget-overlay { background: #666666 url(images/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat; opacity: .50;filter:Alpha(Opacity=50); } 
.ui-widget-shadow { margin: -5px 0 0 -5px; padding: 5px; background: #000000 url(images/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x; opacity: .20;filter:Alpha(Opacity=20); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }/* 


/* IE/Win - Fix animation bug - #4615 */ 
.ui-accordion 
{ 
    width: 100%; 
} 
.ui-accordion .ui-accordion-header 
{ 
    cursor: pointer; 
    position: relative; 
    margin-top: 1px; 
    zoom: 1; 
} 
.ui-accordion .ui-accordion-li-fix 
{ 
    display: inline; 
} 
.ui-accordion .ui-accordion-header-active 
{ 
    border-bottom: 0 !important; 
} 
.ui-accordion .ui-accordion-header a 
{ 
    display: block; 
    font-size: 1em; 
    padding: .5em .5em .5em .7em; 
} 
.ui-accordion-icons .ui-accordion-header a 
{ 
    padding-left: 2.2em; 
} 
.ui-accordion .ui-accordion-header .ui-icon 
{ 
    position: absolute; 
    left: .5em; 
    top: 50%; 
    margin-top: -8px; 
} 
.ui-accordion .ui-accordion-content 
{ 
    padding: 1em 2.2em; 
    border-top: 0; 
    margin-top: -2px; 
    position: relative; 
    top: 1px; 
    margin-bottom: 2px; 
    overflow: auto; 
    display: none; 
    zoom: 1; 
} 
.ui-accordion .ui-accordion-content-active 
{ 
    display: block; 
}