0

Jquery Mobileの折りたたみ可能なセットがあります。これには、任意の数の「引き出し」を含めることができます。JQMは次のようにコーナーを割り当てます。

  collapsibleHeading.find("a").first()
      ...
      .add( ".ui-btn-inner", $el )
         .addClass( "ui-corner-top ui-corner-bottom" )

折りたたみ可能なものに水平オプションを追加したいので、タブボックスのようにも機能します。私はCSSの準備ができていますが、1つのステートメントのコーナーは難しいです...

私は方向をチェックする必要があります、それは私がこのようにやっています：

 (o.directon) == true/false

これは私が持っているものです：

// predefine classes for HORIZONTAL(first,last,rest) and VERTICAL
baseCorners = o.direction == "horizontal" ? [ "ui-corner-tl", "ui-corner-tr", "" ] : ["ui-corner-top", "ui-corner-top", "ui-corner-top"],
toggleCorners = o.direction == "horizontal" ? [ "ui-corner-bl", "ui-corner-br", "" ] : ["ui-corner-bottom","ui-corner-bottom","ui-corner-bottom" ],

これで、方向を気にせずにbaseCornersとtoggleCornersを割り当てることができます。

私の問題：最初/最後/残りの折りたたみ可能なもののチェック/フィルターを追加して、次のように1つのステートメントでこれを実行できるようにするにはどうすればよいですか？

  collapsibleHeading.find("a").first()
      ...
      .add( ".ui-btn-inner", $el )
         .addClass( "if-first" ? baseCorners[0] : "elseif-last" ? baseCorners[1] "else" baseCorners[2] + "same for toggleCorners" )

質問：
私は迷子になっています...これが可能かどうかはわかりませんか？手伝ってくれてありがとう。

編集：
これは私が今持っているものです：

.filter(":first")
    .add( ".ui-btn-inner", $el )
        .addClass( baseCorners[0] + toggleCorners[0] ).end()
.filter(":last")
    .add( ".ui-btn-inner", $el )
        .addClass( baseCorners[1] + toggleCorners[1] ).end()
.not(':first').not(':last')
        .add( ".ui-btn-inner", $el )
            .addClass( baseCorners[2] + toggleCorners[2] );

これが最も実行可能な解決策かどうかはわかりませんが

解決策：
皆さんを助けてくれてありがとう。これが私が最後にやった方法です。提案されたソリューションを設定すると、JQMがすべての要素に対してスクリプトを実行するため、ループを使用できませんでした。実行するたびに、ループする要素が1つしかないためです。

このように機能します：

 // if not horizontal, I always assign the same class
 baseCorners = o.direction == "horizontal" ? [ "A", "B", "C" ] : ["D", "D", "D"],
 toggleCorners = o.direction == "horizontal" ? [ "E", "F", "G" ] : ["H","H","H" ],
 // get position of current element and calculate trigger
 collIndex = $('div:jqmData(role="collapsible-set") div:jqmData(role="collapsible") h3').index(collapsibleHeading),
 collTrigg = collIndex == 0 ? 0 : collIndex == $('div:jqmData(role="collapsible-set") div:jqmData(role="collapsible")').length-1 ? 1 : 2;

この設定では、最初の要素は常にインデックス0を取得し、最後の要素は常にインデックス1を取得し、インデックス2の間にあるすべてのものを取得するため、その間の要素の数に関して柔軟に対応できます。

次に、それはただです：

 $el.add( ".ui-btn-inner", $el )
      .addClass( baseCorners[collTrigg] + toggleCorners[collTrigg] );

良い！

4

2 に答える 2

1

これは同じである必要があります。コードが大幅に少ないわけではありませんが、繰り返しを回避できるため、保守が容易になります。

selection.each(function(i,e) {

    var el = $(e),
        index = i===0 ? 0 :
            i===selection.length-1 ? 1 : 
            2;

    el.add( ".ui-btn-inner", $el )
        .addClass( baseCorners[index] + toggleCorners[index] );

});
于 2012-06-28T18:46:17.663 に答える
1

「i」変数を使用して、頻繁な回答に変更を投稿しようとしていましたが、回答を更新してそれを行いました。だから私は、頻繁な元の答えに基づいて答えを投稿するだけだと思った:

http://jsfiddle.net/8gYcL/1/

「i」変数をチェックするほど効率的ではないことは間違いありませんが、どのように使用できるかをお見せしたかったのです:)

于 2012-06-28T19:18:53.000 に答える