开发者

jquery apply custom icons

开发者 https://www.devze.com 2023-03-13 22:19 出处：网络
My application is an old one and did not use the jQuery well. But I used jQuery Accordion in one of my pages.
相关专题：accordioniconsjqueryjquery-ui

My application is an old one and did not use the jQuery well. But I used jQuery Accordion in one of my pages.

I can not include all the style which has written in "jquery-ui-1.8.13.custom.css". So I have to customize it, so that it only contain the style needed to set the appearance of Accordion. What line of contents should not I remove ?

jQuery code:

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
        }
    );

Contents on my css file

    .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;开发者_StackOverflow 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; }

And placed jQuery images on Icons/jquery/. It forms a perfect Accodion, but I could not set the icons. Why ?

You have to put this MINIMUM CSS for your accordion & icons to work

/* 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;
}
0

上一篇:

:下一篇

更多 问答 相关资讯：

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

    关注公众号

    热门标签

    图文推荐

    Delphi - Custom drawing a message list

    Delphi - Custom drawing a message list
    C++ header-only include pattern

    C++ header-only include pattern
    IE7 Margin Collapses Into Padding

    IE7 Margin Collapses Into Padding
    in CoffeeScript, how can I use a variable as a key in a hash?

    in CoffeeScript, how can I use a variable as a key in a hash?
    Interactive visualization of a graph in python [closed]

    Interactive visualization of a graph in python [closed]
    How to customise PHP MYSQL tables?

    How to customise PHP MYSQL tables?
    High quality, simple random password generator

    High quality, simple random password generator
    Image Recognition ApI in android

    Image Recognition ApI in android

    开发者开发者网给大家分享系统运维,大数据运维,云计算,编程开发技巧,路由交换,运维和开发相关的资讯及技术文章，同时StackOverflow中文社区，知识经验交流分享。

    法律声明：本站内容均为网友上传，网站举办方负责审核和监督，如存在版权或非法内容，欢迎举报，我们将尽快予以删除。邮箱：devze@qq.com

    Copyright © 2018-2020 开发者. All rights reserved. Powered by 开发者ICP备案号: 京ICP备10032868号-9