我有一个网站需要能够通过添加和删除来创建收藏夹。我正在使用 jQuery 的 mousedown 和 contextMenu 让我走到这一步；但我无法删除/删除 li。删除li后，我需要更新数据库。生成的 ul/li 如下所示：
<div id="ctl00_updt_pnl">
<ul id="ctl00_ul_0_button">
<li id="ctl00_li_0_button"><a href="#" id="ctl00_a_0">myFavorites<!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lt IE 7]><table border="0" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
<ul id="ctl00_ul_1_button">
<li id="ctl00_li_1_button_1" class="right">
<div id="ctl00_Panel_1" style="width:300px;"><input type="submit" name="ctl00$add_myFavorites" value="Add to myFavorites..." id="ctl00_add_myFavorites" class="right" style="color:Black;font-size:9pt;font-weight:bold;width:130px;float:left;" />    <img title="Click to View How to use" class="right_openmenu" src="Scripts/jQuery_ContextMenu/images/lightning.png" alt="How to use Menu" style="border-width:0px;margin:0 25px 0 0;" />
</div>
</li>
<div>
<li class="right_li" id="li_49"><a class="right_li_href" href=""> test 11-28 #18</a></li>
<li class="right_li" id="li_50"><a class="right_li_href" href=""> test 11-28 #19</a></li>
<li class="right_li" id="li_51"><a class="right_li_href" href=""> test 11-28 #20</a></li>
<li class="right_li" id="li_52"><a class="right_li_href" href=""> test 11-28 #21</a></li>
</div>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<div id="ctl00_Panel_2" class="div_hf_favorite_name_css">
<input type="submit" name="ctl00$ButtonHiddenDeleteFavorite" value="ButtonHiddenDeleteFavorite" id="ctl00_ButtonHiddenDeleteFavorite" class="css_deleteFavorite" style="display:none;" /><input type="hidden" name="ctl00$id_hf_favorite_name" id="ctl00_id_hf_favorite_name" value="0" />
</div>
<div id="ctl00_Panel_3" class="div_hf_li_to_be_deleted_css">
<input type="hidden" name="ctl00$id_hf_li_to_be_deleted" id="ctl00_id_hf_li_to_be_deleted" />
</div>
</div>
我的jQuery代码如下：
$(document).ready(function() {
// Was the right-mousedown clicked?
$(".right_li").mousedown(function(event) {
// if (event.which == 3) {
// $("#spanMouseButton").text('Right Button Clicked');
// }
});
//
$(".right_li").contextMenu({ menu: 'my_favorites_Delete_Menu' }, function(action, el, pos) { contextMenuWork(action, el, pos); });
//
function contextMenuWork(action, el, pos) {
switch (action) {
case "delete":
{
var msg = "Delete your favorite by the name you saved as: " + $(el).find(".right_li_href").text() + "?";
var msg2 = $(el).find(".right_li_href").text();
var li = $(this);
li.remove();
confirm(msg);
// save the href in a hiddenfield for pass back to the codebehind (Ajax)
$('.div_hf_favorite_name_css input[type=hidden]').val(msg2);
break;
}
case "how_to":
{
$("#ShowInstructions").modal({
close: true,
onOpen: modalOpenShowInstructions,
onClose: modalOnClose,
persist: true,
containerCss: ({ width: "600px", height: "100%", marginLeft: "-300px", marginTop: "-100px", overflow: "auto" })
});
break;
}
}
}
//
function contextHowto() {
$("#ShowInstructions").modal({
close: true,
onOpen: modalOpenShowInstructions,
onClose: modalOnClose,
persist: true,
containerCss: ({ width: "600px", height: "100%", marginLeft: "-300px", marginTop: "-100px", overflow: "auto" })
});
}
//
function confirm(message) {
$("#confirm").modal({
close: true,
overlayId: 'confirmModalOverlay',
containerId: 'confirmModalContainer',
onClose: modalOnClose,
onShow: function modalShow(dialog) {
dialog.overlay.fadeIn('slow', function() {
dialog.container.fadeIn('fast', function() {
dialog.data.hide().slideDown('slow');
});
});
dialog.data.find(".confirmmessage").append(message);
// Yes button clicked
dialog.data.find("#ButtonYes").click(function(ev) {
ev.preventDefault();
$.modal.close();
// remove the li on the confirmation of the delete
var li = $(this);
li.remove();
// don't postback for now
false;
// Here's where to go in the code-behind on the postback //$("[id*=ButtonHiddenDeleteFavorite]").click();
//
});
}
});
}
//
function modalOpenAddCustomer(dialog) {
dialog.overlay.fadeIn('fast', function() {
dialog.container.fadeIn('fast', function() {
dialog.data.hide().slideDown('slow');
});
});
dialog.data.find(".modalheader span").html("Add New Customer");
}
//
function modalOpenShowInstructions(dialog) {
dialog.overlay.fadeIn('fast', function() {
dialog.container.fadeIn('fast', function() {
dialog.data.hide().slideDown('slow');
});
});
dialog.data.find(".modalheader span").html("How to use the Favorites");
// if the user clicks "yes"
dialog.data.find("#Show_Instructions").click(function(ev) {
ev.preventDefault();
//Perfom validation
if (Page_ClientValidate("addCustomer")) {
$.modal.close();
$("#ButtonHiddenAddCustomer").click();
};
});
}
//
function modalOnClose(dialog) {
dialog.data.fadeOut('slow', function() {
dialog.container.slideUp('slow', function() {
dialog.overlay.fadeOut('slow', function() {
$.modal.close(); // must call this to have SimpleModal
// re-insert the data correctly and
// clean up the dialog elements
//
});
});
});
};
});
}