Question

是否可以将图像用作jQuery selectmenu小部件的按钮？

我试过了：

<div data-role="collapsible">
<h3><img src="images/newiconoptions.png" style="float:right;"/></h3>
<p>I'm the collapsible content</p>
</div>

但是我得到一个带有图像的按钮，我只想将图像用作按钮。

感谢。

Answer 1

是的，你可以做到。以下应该是这样做的方法： -

（1）。正如jQuery图像选择器参考中提到的那样。

http://api.jquery.com/image-selector/

OR

（2）。

<input type="image" src="your image source" alt="{alternate text}" />

OR

（3）。这使图像可以点击：

 <div data-role="collapsible">
<h3><img src="images/newiconoptions.png" id="image"style="float:right;"/>   </h3>
<p>I'm the collapsible content</p>
</div>

jQuery的：

$('#image').click(function(){
      // this makes image clickable

 });

OR

（4）。您也可以将正确的CSS应用于图像：

#image{
border: none;
cursor: pointer;
background: transparent;
}

Answer 2

对于您的进一步问题，您可以按照我在单击图像时为选择菜单创建的小提琴：

[http://jsfiddle.net/jvaibhav/WYm4H/13/]

此功能可以在图像点击时调用选择菜单：

$('.image').click(function() {
$('.select').toggle();
});

Answer 3

要在jquery中使用图像作为选择菜单按钮，需要覆盖jquery在创建选择菜单时添加的jquery类。

无需更改jquery .css文件，只需使用标记的样式属性覆盖它们（properties / attribite）。

使用以下代码执行此操作对我有用 - ＆gt;

<div class="ui-select">
    <div data-icon="none" data-theme="a" class="ui-btn" style="margin: 0px; text-align: inherit;">
            <img class="img-responsive" alt="" src="../../images/image.png" style="">           
        <select id="selectMenuCls" data-native-menu="true" size="0" data-role="none">         
            <option value="" class="first">c</option>       
            <option value="" class="">c++</option>       
            <option value="" class="">java</option> 
        </select>
    </div>
</div>

请注意，在select tag data-role =＆＃34; none＆＃34;属性是必不可少的，以便jquery不会应用它的自定义类来选择菜单

图像作为Selectmenu jquery mobile的按钮

3 个答案: