Is there a straight-forward w开发者_开发问答ay to make an element delete-able with a ui button. something along the lines of mouse over 'x' button shows, then close...?
It's very straight-forward with jQuery sure. I'll leave the CSS to you, here's a basic mark-up:
<div>
<a href="#" class="close">Close X</a>
<!-- Other code -->
</div>
And the jQuery bit:
$('.close').click(function(){
$(this).parent().remove();
// Although I recommend just hiding it
// like this
// $(this).parent().hide();
// or fade it out
// $(this).parent().fadeOut();
return false;
});
Add a class to the elements that you want to close, such as "closeable". Then write some jQuery to show a close button on hover:
<script type="text/javascript">
$(document).ready(function ()
{
$('.closeable').hover(function ()
{
$(this).append('<div class="closebutton" style="display: inline-block; vertical-align: top; font-size: .8em;">x</div>');
$(this).children('.closebutton').click(function ()
{
$(this).parent().remove();
});
}, function ()
{
$(this).children('.closebutton').remove();
});
});
</script>
<div class='closeable' style="display: inline-block; border: 1px solid red; padding: .25em;">Content!</div>
This script will hide the close button when hovering out. Clicking the button removes the element with the .closeable class.
精彩评论