1

这可能是一个有趣的问题。我打算先做一个看起来像普通 html 的选择框，但是当你打开它时，会有两件令人兴奋的事情：

  1. 该框将包含 2 个不同的文本对齐方式，形成两个整齐的行。（见图）
  2. 在框中包含的列表项的每一行末尾，都会有一个喜欢/不喜欢的按钮系统。（见图）

*图片*

你们中的一些人已经知道这是怎么回事，我需要像在 GUI 编程中制作任何这样的菜单一样制作东西。我假设一些面向对象的 Javascript 编程？

（我正在寻找技术细节，因为我是 Javascript 和 jQuery 的新手（但不是编程），我基本上对有关将这种伪代码构造转换为 Javascript/jQuery 或其他更有用的框架的信息感兴趣，如果真的需要的话. 我也很清楚我通常不会在这个 GUI 中使用任何实际的 html。）

所以我的问题是，我应该如何着手按照你的方式来做这件事？

4

2 回答 2

1

您将无法修改普通select元素来实现此目的，您必须

  • 创建一个proxy-pro-select-element 并隐藏原始元素。
  • 复制选项元素并在您的代理中创建等效元素
  • 您还必须使两个选择保持同步。

一旦你有了它，你就可以在你的代理专业选择元素中做任何事情，最简单的方法是点击显示一个带有可选行的表格，使用表格很容易对齐所有列。

技术细节：

  • 阅读如何实现一个jQuery 插件
  • 在您的插件init循环通过目标中的选项select并在 div 中创建相应的行说dropdown，隐藏原始选择并将其替换为您的控件，这将是select-div
  • onclick on select-div，正确重新定位后显示下拉div

看到这样的代码并修改

于 2012-04-26T20:09:47.913 回答
0

您应该能够使用 jQuery 和 jQuery UI 组合框来完成类似的操作，http://jqueryui.com/demos/autocomplete/#combobox

然后修改 _renderItem 以更改下拉列表中结果的布局。您可以在查看源代码中搜索以下内容：

input.data( "autocomplete" )._renderItem

但是，我会尽量避免在组合框中使用喜欢/不喜欢按钮，因为它违反了正常的 Web 约定。

于 2012-04-26T20:09:41.373 回答