gpt4 book ai didi

javascript - 自定义 rails 确认框(使用 $.rails.confirm 覆盖)

转载 作者:可可西里 更新时间:2023-11-01 02:24:39 25 4
gpt4 key购买 nike

我已经研究了很长时间了。

我想用我自己滚动的东西劫持默认的 JS 确认对话框。我想使用完全自定义的布局( Bootstrap (来自 Twitter)对话框面板)。

我有的不起作用。它显示得很好,我可以单击按钮,它就会消失。文档说在 Ok 的情况下你应该返回 true,在 Cancel 的情况下你应该返回 false。这非常可爱,但它不起作用。看起来我需要一个回调或对最初调用该函数的对象的引用。即使是后者也是不可能的,因为 $.rails.confirm 只传递消息。

(来自 this 问题的第一个答案非常有趣。我需要一种方法使其成为模态,以便它等待自定义对话框的返回。)

那么有人可以指出我正确的方向吗?我感觉我要拍打什么东西了。难的!! jQuery UI 只是一个选项,我可以使我的对话框看起来与我当前拥有的对话框完全一样。

这是我的:

这个放在我的application.erb中

<div id="modal-confirm" class="modal">
<div class="modal-header">
<h3>Are you sure?</h3>
<a href="#" class="close">×</a>
</div>
<div class="modal-body">
<p>{{VALUE}}</p>
</div>
<div class="modal-footer">
<a id="modal-accept" href="#" class="btn primary">OK</a>
<a id="modal-cancel" href="#" class="btn secondary">Cancel</a>
</div>
</div>

javascript.js:

function bootStrapConfirmDialog(message) {
// get a handle on the modal div (that's already present in the layout).
d = $("#modal-confirm");
// replace the message in the dialog with the current message variable.
$("#modal-confirm div.modal-body p").html(message);
// offset the dialog so it's nice and centered. we like that ;)
// d.offset({ top: 400, left: (document.width - d.width) / 2 });
d.center();

// show the dialog.
d.toggle(true);
console.log("popped open");
}

$(document).ready(function(){
// jquery support
$.fn.extend({
center: function () {
return this.each(function() {
var top = ($(window).height() - $(this).outerHeight()) / 2;
var left = ($(window).width() - $(this).outerWidth()) / 2;
$(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
});
}
});

// modal stuff
$("#modal-confirm").toggle(false);

// wire up cancel and x button.
$("#modal-confirm #modal-cancel, #modal-confirm a.close").click(function (e) {
d.toggle(false);
console.log("clicked cancel");
return false;
});

// wire up OK button.
$("#modal-confirm #modal-accept").click(function (e) {
d.toggle(false);
console.log("clicked accept");
return true;
});

// wire up our own custom confirm dialog.
$.rails.confirm = function(message) { console.log("start intercept"); return bootStrapConfirmDialog(message); };
});

最后在我看来:

<%= link_to 'delete customer', customer_path(@customer), :class => 'btn danger', :method => :delete, :confirm => "Are you sure you would like to delete '#{@customer.name}'?" %>

@格林威治标准时间 23:46

好吧,我找到了一个方法......但它并不漂亮。我基本上以将实际元素传递给 $.rails.confirm 方法的方式扩展了 jquery-rjs。这样我至少知道如果在模态中按下 OK 按钮会发生什么。所以这是新的时髦代码。

我的新 application.js。奇迹般有效。但是我对我不得不忽略的事情多少感到有点不安。我可能弄坏了一些东西而且我什至不知道它(rails.formSubmitSelector 和/或 rails.formInputClickSelector)。所以如果你有更好的解决方案...... :D thx!

function bootStrapConfirmModal(message, element) {
// get a handle on the modal div (that's already present in the layout).
d = $("#modal-confirm");
// replace the message in the dialog with the current message variable.
$("#modal-confirm div.modal-body p").html(message);
// offset the dialog so it's nice and centered. we like that ;)
d.center();

// wire up cancel and x button.
$("#modal-confirm #modal-cancel, #modal-confirm a.close").click(function (e) {
d.toggle(false);
return false;
});

// wire up OK button.
$("#modal-confirm #modal-accept").click(function (e) {
d.toggle(false);

// actually handle the element. This has to happen here since it isn't an *actual* modal dialog.
// It uses the element to continue proper execution.
$.rails.handleLink(element);

return false;
});

// show the dialog.
d.toggle(true);
};

$(document).ready(function(){
// jquery support
$.fn.extend({
center: function () {
return this.each(function() {
var top = ($(window).height() - $(this).outerHeight()) / 2;
var left = ($(window).width() - $(this).outerWidth()) / 2;
$(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
});
}
});

// modal stuff
$("#modal-confirm").toggle(false);



// $.rails overrides.

// wire up our own custom confirm dialog. Also extend the function to take an element.
$.rails.confirm = function(message, element) { return bootStrapConfirmModal(message, element); };

$.rails.allowAction = function(element) {
var message = element.data('confirm'),
answer = false, callback;
if (!message) { return true; }

if ($.rails.fire(element, 'confirm')) {
// le extension.
answer = $.rails.confirm(message, element);
callback = $.rails.fire(element, 'confirm:complete', [answer]);
}
return answer && callback;
};

$.rails.handleLink = function(link) {
if (link.data('remote') !== undefined) {
$.rails.handleRemote(link);
} else if (link.data('method')) {
$.rails.handleMethod(link);
}
return false;
};

});

最佳答案

这是一个在 Rails 中更改确认框的工作演示:https://web.archive.org/web/20121230034912/http://rors.org/demos/custom-confirm-in-rails

提供了 Boostrap、jQueryUI 和 Noty 的示例。

关于javascript - 自定义 rails 确认框(使用 $.rails.confirm 覆盖),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7435859/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com