1

我有一个 html 表单：选择

<select id = 'myselect'>
<option value = '1'>1</option>
<option value = '2'>2</option>
...
<option value = 'N'>N</option>
</select>

我使用 jquery-ui 绘制漂亮的图画

$('#myselect').selectmenu();

我需要盒子1有自己的风格

怎么做？设置id，类不起作用:(

我认为我应该做以下事情：

1）创建“经典”选择表单的html代码

2) 将创建的“经典”选择表单加入到 jquery-ui

3）在 jquery-ui 选择菜单中查找元素（如何？）

4) 设置为找到的元素新的类名

5) 使用 css 作为类名

4

2 回答 2

1

曲折，非常感谢想法的方向

决定：

$.widget( "ui.selectmenu", $.ui.selectmenu, {
    _my_render: function( item ) {          
        return $("<div" + ((item.element[0].attributes.my_level == undefined) ? ("") : (" class = '_my_class'")) + ">" + item.label + "</div>");
    },

    _renderItem: function( ul, item ) {

        return $( "<li>" )
            .append(this._my_render(item))
            .appendTo(ul);
    },
});
于 2017-01-11T11:39:54.827 回答
0

这在 API 中进行了讨论：http: //api.jqueryui.com/selectmenu/在 Theming 下。

selectmenu 小部件使用 jQuery UI CSS 框架来设置其外观样式。如果需要特定于 selectmenu 的样式，可以使用以下 CSS 类名来覆盖或用作 classes 选项的键：

  • ui-selectmenu-button: 类似按钮的元素替换页面上的原生选择菜单。ui-selectmenu-button-closed关门时有课，开课时有ui-selectmenu-button-open课。

    • ui-selectmenu-text：表示按钮元素的文本部分的跨度。
    • ui-selectmenu-icon：选择菜单按钮内的图标。
  • ui-selectmenu-menu：菜单周围的包装元素，用于向用户显示选项（而不是菜单本身）。打开菜单时，将ui-selectmenu-open添加类。
    • ui-selectmenu-optgroup<optgroup>：从本机选择中复制元素的元素之一。

此示例显示了其中的一些内容：https ://jqueryui.com/selectmenu/#custom_render

使用更基本的示例，我们可以通过 CSS 选择和设置独特项目的样式。原始select元素被隐藏。创建一个无组织列表<ul>以供使用。我们可以使用适当的 jQuery 或 CSS 选择器选择第一个列表项：#ui-id-1或.ui-menu-item:first-child div.

您没有提供您已尝试或尝试完成的示例。这是一个非常基本的示例：https ://jsfiddle.net/Twisty/vgm3txh6/

HTML

<label for="number">Select a number</label>
<select name="number" id="number">
  <option>1</option>
  <option selected="selected">2</option>
  <option>3</option>
  ...
  <option>19</option>
</select>

CSS

.ui-menu-item:first-child {
  font-weight: bold;
}

JavaScript

$(function() {
  $("#number")
    .selectmenu()
    .selectmenu("menuWidget")
    .addClass("overflow");
});

如果您编辑帖子并添加更多详细信息，我可以提供更多信息。我希望这可以帮助您找到解决方案。

于 2017-01-10T18:02:51.663 回答