"hover" effect using single tap on iPad (similar to SO)
If you've ever used StackOverflow on the iPad, you may have noticed that in order to delete a comment, you:
- first tap the comment field
- the field gets highlighted in gray and the delete icon appears in gray
- you can then tap on the icon to delete the comment开发者_StackOverflow社区
On a desktop, this process is more straightforward because the mouse can hover over the comment, hiding and making the icon visible on mouseenter and mouseleave via jQuery .css.
I have already set up a posts and comments system on my blog that has this functionality very similar to SO running on a desktop, but I wonder how to achieve SO's iPad functionality.
Any ideas how SO makes the single tap act as a hover on the comments?
Any time I have coded anything that responds to mouseenter in jQuery or Mootools, the iPad immediately converted this behavior to a single click. This includes links that would normally take you to another page on a single click. Is this not the behavior you are seeing?
using jQuery you could write a click event:
$(".comment").click(function(e){
e.preventDefault();
$(this).toggleClass("clicked");
});
And create some iPad-only CSS like this:
.comment .delete
{
display: none;
}
.comment.clicked .delete
{
display: inline;
}
which would work if your html was something like this:
<div class="comment">... <a class="delete">Delete</a></div>
and wire up these into their own ipad.css and ipad.js files and include them in your <head>
<!--[if iPad]>
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" />
<script type="text/javascript" src="ipad.js"></script>
<![endif]-->
working example: http://jsfiddle.net/hunter/pqLXS/
加载中,请稍侯......
精彩评论