2

在我的剑道移动应用程序中，我有一些需要多个操作的列表视图。我需要类似于Link Items & Detail Buttons 演示中显示的内容，但更灵活。就我而言，我需要涵盖以下场景（所有部分均可点击）：

[icon][text of the item]

[text of the item][icon]

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

...[icon]一些字体图标在哪里。

我已经开始着手解决方案，但在进一步讨论之前，我需要一些反馈，以确保我不会忽视更好的方法或 Kendo 中已经内置的东西。

单击时，每个“部分”都<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

0

1）我认为您使用的策略对于 Kendo UI Mobile 来说是完全可以接受的。

2) 如果您使用自己的 CSS 自定义边距或内边距，Kendo UI Mobile 应用了一些非常具体的样式line-height以及一些其他将影响列表项显示方式的项目。不过我不会太担心。

于 2014-09-05T14:39:37.307 回答