2

jQuery Mobile で折りたたみ可能なリストの折りたたみ/展開ハンドラーを動的に設定して設定しようとしています。展開ハンドラーは期待どおりに動作していますが、要素が展開されると、リストの項目ごとに折りたたみハンドラーが 1 回トリガーされます。

<head>
    <link rel="stylesheet" href="jquery.mobile-1.2.0-alpha.1.css?gfd" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://jquerymobile.com/demos/1.2.0-alpha.1/js/jquery.mobile-1.2.0-alpha.1.js"></script>
</head>
<script>
    $(document).ready(function () {

        for (var i = 0; i < 4; i++) {

            var element = $("#listElementTemplate").clone();

            element.find('h3').append("list Element: " + i);
            $("#list").append(element);

            element.on('expand', function () {
                alert("expand: "+i);
            });

            element.collapsible();

            element.on('collapse', function () {
                alert("collapse: "+i);
            });
        }
    });
</script>

<body>
    <div id='listElementTemplate' data-role="collapsible" data-collapsed='true'>
            <h3 class='chart-elem-data'>
    </h3>

        <p id=''>Content</p>
    </div>
    <div data-role="page" class="type-interior">
        <div data-content-theme="c" id="list" data-role="collapsible-set"></div>
    </div>
</body>

4

2 に答える 2

1

私はこのソリューションに夢中ではありませんが、リスト要素ごとに一意の名前属性を作成し、展開イベントで、展開された要素の一意の名前属性に等しい変数を設定しました。次に、折りたたみハンドラーで条件ロジックを使用して、折りたたみ要素の名前が以前に展開された要素の名前と等しい場合にのみコードが起動するようにします。

きれいではありませんが、うまくいくようです。

 $(document).ready(function () {
   //Create element name variable
   var elementName;
    for (var i = 0; i < 4; i++) {
        (function (i) {
            var element = $("#listElementTemplate").clone();
            //Use index to create unique name attribute
            element.attr("name",count);
            element.find('h3').append("list Element: " + i);
            $("#list").append(element);

            element.on('expand', function () {
                //On expand set element name to name of expanded element
                elementName = $(this).attr("name");
            });

            element.collapsible();

            element.on('collapse', function(){
                      //Use conditional logic only trigger code on the previously expanded element
              if (elementName == $(this).attr("name")){
                      //code to execute
              }else{
                          //Leave empty
                           }
    });
    }
});
于 2013-05-17T23:46:19.243 に答える
0

この動作はエラーではありません。

4 つの折りたたみ式の折りたたみ式セットがあると考えてください。同時に拡張できるのは 1 つだけです。したがって、一方が展開されると、他方が折りたたみイベントをトリガーします。繰り返しますが、これはセットなので、セットとして機能します。

それらをそのように動作させたくない場合は、折りたたみ可能な要素ごとに折りたたみ可能なセットを用意する必要があります。ただし、この場合、別の折りたたみ可能なものを使用しても、最初のものは折りたたまれたままになります。

作業例: http://jsfiddle.net/Gajotres/AXhkF/

HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>    
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>      
    </head>
    <body>  
        <div data-content-theme="c" id="list" data-role="collapsible-set">
            <div id='listElementTemplate' data-role="collapsible" data-collapsed='true'>
                <h3 class='chart-elem-data'></h3>
                <p id=''>Content</p>
            </div>
        </div>        
        <div data-role="page" id="type-interior">

        </div>      
    </body>
</html>

JS: 

$(document).on('pagebeforeshow', '#type-interior', function(){       
    for (var i = 0; i < 4; i++) {
        var element = $("#list").clone().attr('id','list'+i);
        element.find('[data-role="collapsible"]').attr('id','element'+i);
        element.find('h3').append("list Element: " + i);
        element.appendTo('[data-role="page"]');

        $(document).on('expand', '#element'+i ,function (e) {
            if(e.handled !== true) // This will prevent event triggering more then once
            {
                console.log('expand = '+  $(this).attr('id'));
                e.handled = true;
            }
        });

        $(document).on('collapse', '#element'+i,function (e) {
            if(e.handled !== true) // This will prevent event triggering more then once
            {            
                console.log('collapse = ' + $(this).attr('id'));
                e.handled = true;
            }
        });

        $('#element'+i).collapsible();        
    }        
});

繰り返しますが、Expend イベント中に他のすべての折りたたみ可能なものを手動で折りたたむことができますが、その後、例と同じ状況に直面します。

ここでできることは基本的にありません。

于 2013-05-11T12:34:58.240 に答える