3

私は初めてjQueryMobileを使用していますが、折りたたみ可能なセット（アコーディオン）のアイコンを単純に変更したように見えるのに問題があります。

折りたたみ可能なセットの各見出しのアイコンを、展開状態の場合は上矢印に、折りたたみ状態の場合は下矢印に変更したいと思います。

jQueryモバイルサイトから直接コピーして少し変更したコードと同じ問題があるように見えるフィドルを作成しました。

これに関するヘルプやポインタをいただければ幸いです。ありがとう！

4

4 に答える 4

6

参照したドキュメントページでは、実際にはjquerymobileの最新のWorkin Progressバージョンが使用されています。これは、JQMの将来のバージョンで期待できる機能です。現在の安定バージョンでは、指定してアイコンを変更することはできません。データ属性。

これは例です：jqmの進行中のバージョンを使用します-http ://jsfiddle.net/AAYjF/

ただし、安定したバージョンを使用することをお勧めします。そのため、次のコードを使用してこれを実現できます。

<!DOCTYPE html>
<html>
    <head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <style>
        .ui-collapsible .ui-icon{
            background-position: -180px 50%;/*Position of up icon in icon sprite*/
        }

        .ui-collapsible-collapsed .ui-icon{
            background-position: -216px 50%;/*Position of down icon in icon sprite*/
        }

    </style>
</head>
<body>

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <div data-role="collapsible-set">

    <div data-role="collapsible">
    <h3>Section 1</h3>
    <p>I'm the collapsible set content for section B.</p>
    </div>

    <div data-role="collapsible" >
    <h3>Section 2</h3>
    <p>I'm the collapsible set content for section B.</p>
    </div>

</div>
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

ロジックは、折りたたまれたアイコンと展開されたアイコンのアイコンスプライトの上下のアイコンの背景位置を使用することです。

デモ： http： //jsfiddle.net/6x8ew/

于 2012-05-18T07:33:53.143 に答える
5

このソリューションを改善できると確信していますが、JQMソースをハッキングせずにこれを実現する1つの方法の基本的な考え方を次に示します。

$(document).on('pageinit',function(){

    $('.ui-collapsible .ui-icon').removeClass('ui-icon-plus').addClass('ui-icon-arrow-u');

    $('[data-role=collapsible]')
        .on('expand',function(){ 
            $(this).find('.ui-icon').removeClass('ui-icon-arrow-u').addClass('ui-icon-arrow-d');               
        })
        .on('collapse',function(){
            $(this).find('.ui-icon').removeClass('ui-icon-arrow-d').addClass('ui-icon-arrow-u');
        });        
});​

jqmの折りたたみ可能なイベントを使用して、適切なアイコンに切り替えています。

私の作業例を参照してください。

于 2012-05-17T23:41:23.470 に答える
0

私はまだjQueryMobileをあまり使っていないので、その価値があると考えてください。

<div data-role="collapsible-set">それぞれではなく、に属性を配置する必要があると思いますdata-role="collapsible"。明らかに、これはすべての子供にのみ機能し、個々の子供をターゲットにすることはできません。

于 2012-05-17T17:21:07.510 に答える
0

jquery mobileバージョン1.4.0では、CSSファイルに次のコードを含めることでこれを実現できます

カスタム右矢印の場合

.ui-icon-arrow-r:after {
  background: url("Path to your image file") no-repeat scroll 0px 0px transparent;

}

カスタム下矢印の場合

.ui-icon-arrow-d:after {
  background: url("Path to your image file") no-repeat scroll 0px 0px transparent;

}

于 2014-02-03T08:49:55.860 に答える