[英]Change state of the button when pressed/released
I am developing a mobile website. 我正在开发一个移动网站。 I have created dynamic buttons in java-script.
我已经在Java脚本中创建了动态按钮。 Now I want to bind two events with each button.
现在,我想为每个按钮绑定两个事件。
1) when pressed, change background image of the button to img-pressed.jpg. 1)按下时,将按钮的背景图像更改为img-pressed.jpg。 Note: Every button has its own normal and pressed image source.
注意:每个按钮都有其自己的常规图像源和按下图像源。
2) when clicked, do something. 2)单击时,执行某些操作。
I am very much confused to work with these two events together. 我很困惑要一起处理这两个事件。
ItemsToAdd += '" id="'+ appVal.id +'">\
<a id="' + appVal.id + '" data-role="button" style="background-image:url('+ img_path + appVal.big_icon_normal_path +')" class="custom-button" href="#"></a>\
<p><br><b>' + appVal.name + ' </b><br> ' + appVal.apptypename + '<br><i>' + appVal.price + '</i></p> </div>';
$("#appGrid" + catVal.id).append($(ItemsToAdd));
$("#appGrid" + catVal.id).trigger("create");
$("#appGrid" + catVal.id + " > #" + appVal.id + " > #" + appVal.id ).bind('click', function ()
{
updateAppInfo(appVal.id);
});
The code is working fine on the click event. 该代码在click事件上运行良好。 Actually i am changing some content on the button click.
实际上,我正在更改按钮单击上的某些内容。 Now i want to change the source of the image when pressed and change to source to normal when press is released.
现在,我想在按下时更改图像的来源,并在释放按下时更改为正常的来源。 Content change should also work with it.
内容更改也应该起作用。
I will appreciate you help. 多谢您的协助。 Thanks in advance.
提前致谢。
Try adding this: 尝试添加以下内容:
// preload the image
var preloader = new Image();
preloader.src = img_path + appVal.big_icon_mousedown_path;
// bind the events
$('.custom-button').bind({
'mousedown' : function() {
// you'll need to set appVal.big_icon_mousedown_path or similar
$(this).css('background-image', 'url('+ img_path + appVal.big_icon_mousedown_path +')');
},
'mouseup mouseleave' : function() {
$(this).css('background-image', 'url('+ img_path + appVal.big_icon_normal_path +')');
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.