0

アコーディオンに矢印アイコンを含めようとしています...この結合された画像のcssの書き方がわかりませんここに私の画像リンクがありますhttp://code.jquery.com/ui/1.9.1/themes/base/ images/ui-icons_454545_256x240.png

ここに私のjsコードがあります

http://jsfiddle.net/Uf7Nj/3/

/*!
 * Vallenato 1.0
 * A Simple JQuery Accordion
 *
 * Designed by Switchroyale
 * 
 * Use Vallenato for whatever you want, enjoy!
 */

$(document).ready(function()
{
    //Add Inactive Class To All Accordion Headers
    $('.accordion-header').toggleClass('inactive-header');

    //Set The Accordion Content Width
    var contentwidth = $('.accordion-header').width();
    $('.accordion-content').css({'width' : contentwidth });



    // The Accordion Effect
    $('.accordion-header').click(function () {
        if($(this).is('.inactive-header')) {
            $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
        }

        else {
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
        }
    });

    return false;
});

</p>

4

1 に答える 1

0

jquery-ui cssから必要なアイコンの位置を抽出するだけです:

CSS:

.ui-icon { 
    width: 16px; 
    height: 16px; 
    background-image: url("http://code.jquery.com/ui/1.9.1/themes/base/images/ui-icons_454545_256x240.png");
}
      

        
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }

サンプル

アイコンの名前を取得するには、テーマのローリング ページに移動し 、必要なアイコンにカーソルを合わせ、css ファイルを開き、そこでアイコンの名前を見つけて、新しい CSS にコードをコピーします。

于 2012-11-21T03:58:15.637 に答える