2

私の剣道モバイルアプリには、複数のアクションを必要とするリストビューがいくつかあります。Link Items＆Detail Buttonsデモに表示されているようなものが必要ですが、より柔軟です。私の場合、次のシナリオをカバーする必要があります（すべてのセクションをクリック可能）。

[icon][text of the item]

[text of the item][icon]

[icon][text of the item][icon]

...[icon]フォントアイコンはどこにありますか。

私は解決策を始めましたが、先に進む前に、より良いアプローチや剣道にすでに組み込まれている何かを見落とさないようにするためのフィードバックが必要です。

の各「部分」は、<LI>クリックされたときに個別のアクションを実行する必要があります。これを処理するために、にクリックバインディングがあります<UL>。また、ユーザーが何をタップ/クリックしたかがわかるようdata-command-nameに、テンプレートの各要素に属性があります。<LI>

私はフィドルをまとめましたが、jsFiddleはロード時にHTML部分を再フォーマットしています（テンプレートスクリプトタグのためだと思います）。フィドルを読み込んだら、HTMLを次のように置き換えて機能させてください。

HTML

<div id="itemsView" data-role="view" data-model="vm">
  The red, silver and blue sections along with the X & Y are not part of the design, they are there just to make my intent more obvious.
  <ul data-role="listview" data-bind="source: items, click: clickHandler"
  data-template="itemsTemplate"></ul>

  <script id="itemsTemplate" type="text/x-kendo-template">

    <div class = "left-column" data-command-name="left (red)" > X </div>
    <div class="right-column" data-command-name="right (blue)">Y</div > 
    <div class = "content-column" data-command-name="content (silver)"> #=Name# </div>

  </script>
</div>

CSS

div.left-column {
  float: left;
  width: 25px;
  margin-top: -5px;
  padding-top: 5px;
  margin-left: -5px;
  padding-left: 5px;
  cursor: default;
  background-color: red;
}
.content-column {
  margin-top: -5px;
  margin-left: 25px;
  margin-bottom: 0;
  margin-right: 25px;
  padding-top: 5px;
  cursor: default;
  background-color: silver;
}
.right-column {
  float: right;
  width: 25px;
  margin-top: -5px;
  padding-top: 5px;
  cursor: default;
  background-color: blue;
}

JavaScript

var vm = kendo.observable({
  items: [{
    Selected: false,
    Name: "Item1"
  }, {
    Selected: false,
    Name: "Item2"
  }, {
    Selected: false,
    Name: "Item2"
  }],

  clickHandler: function (e) {
    var cmd = e.target.context.attributes["data-command-name"]
    if (cmd) {
      alert(cmd.value);
    }
  },
});

kendoApp = new kendo.mobile.Application(document.body, {
  transition: "slide",
  platform: 'android'
});

これがフィドルです：http：//jsfiddle.net/8Kydw/

だから私の質問を要約すると：

1）これを行うためのより良い/組み込みの方法はありますか？

2）そうでない場合、CSSに関するヒントはありますか？たとえば、Androidでリストアイテムの高さがカスタマイズ前よりも小さいのはなぜですか？

4

1 に答える 1