Question

在我的kendo移动应用程序中，我有一些需要多个动作的列表视图。我需要像Link Items & Detail Buttons demo中显示的内容，但更灵活。在我的情况下，我需要涵盖以下场景（所有部分都可点击）：

[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中为什么列表项的高度比我的自定义之前小？

Answer 1

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

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

Kendo UI Mobile - 如何在列表视图中执行固定流体固定的可点击项目？

1 个答案: