0

是否可以将图像用作 jQuery 选择菜单小部件的按钮?

我试过这个:

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

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

谢谢。

4

3 回答 3

2

是的,你可以做到。以下应该是做到这一点的方法: -

(1)。如 jQuery 图像选择器参考中所述。

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

或者

(2)。

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

或者

(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

 });

或者

(4)。您还可以将正确的 css 应用于图像:

#image{
border: none;
cursor: pointer;
background: transparent;
}
于 2013-05-06T11:58:16.223 回答
1

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

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

您可以编写此函数以在图像单击时调用选择菜单:

$('.image').click(function() {
$('.select').toggle();
});
于 2013-05-07T04:52:36.870 回答
0

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

无需更改 jquery .css 文件,只需使用标签的样式属性覆盖它们(属性/属性)。

使用下面的代码来做这对我有用->

<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>

请注意,在选择标签中 data-role="none" 属性是必不可少的,因此 jquery 不会将其自定义类应用于选择菜单

于 2013-12-04T09:36:55.257 回答