[英]Image as button for Selectmenu jquery mobile
是否可以将图像用作jQuery selectmenu小部件的按钮?
我尝试了这个:
<div data-role="collapsible">
<h3><img src="images/newiconoptions.png" style="float:right;"/></h3>
<p>I'm the collapsible content</p>
</div>
但是然后我得到一个带有图像的按钮,我只想将图像用作按钮。
谢谢。
是的,你可以做到。 应当采用以下方法:
(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;
}
对于您的其他问题,您可以按照我在单击图像时为选择菜单创建的小提琴进行操作:
[http://jsfiddle.net/jvaibhav/WYm4H/13/]
您可以编写此函数来调用图像单击上的选择菜单:
$('.image').click(function() {
$('.select').toggle();
});
要将图像用作jquery中的选择菜单按钮,需要重写在创建选择菜单时jquery添加的jquery类。
无需更改jquery .css文件,只需使用标签的style属性覆盖它们(属性/属性)即可。
使用以下代码对我有用->
<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不会将其自定义类应用于选择菜单
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.