自定义导轨确认框（使用$ .rails.confirm覆盖） [英] Custom rails confirm box (with $.rails.confirm override)
问题描述
我一直在修补这个很长一段时间。
I've been tinkering with this for a long long time.
我想用自己推出的东西劫持默认的JS确认对话框。我想使用一个完全自定义的布局（bootstrap（来自twitter）对话框）。
I would like to hijack the default JS confirm dialog with something I rolled myself. I'd like to use a completely custom layout (the bootstrap(from twitter) dialog panel).
我所做的不起作用。它显示得很好，我可以点击按钮，它会消失。文档说明，如果是Ok，你应该返回true，如果是Cancel，你应该返回false。这很可爱，但它不起作用。看起来我需要一个回调或对最初调用该函数的对象的引用。即使后者也是不可能的，因为$ .rails.confirm只传递消息。
What I have doesn't work. It show up nicely and I can click the buttons and it'll dissapear. The documentation says that you should return true in case of Ok and false in case of a Cancel. This is very cute and all but it doesn't work. It looks like I need a callback or a reference to the object that originally called the function. Even the latter isn't possible since $.rails.confirm only passes in the message.
（来自这个问题非常有趣。我需要一种方法来使它模态化它等待返回自定义对话框。）
(The first answer from this question is pretty interesting. I need a way to make it modal so it waits for the return of the custom dialog.)
那么请有人指出我正确的方向吗？我觉得我要打一些东西。硬！！ jQuery UI只是一个选项，我可以使我的对话框看起来与我现在的对话框完全一样。
So could somebody please point me in the right direction? I feel like I'm going to slap something. Hard!! jQuery UI is only an option of I can make my dialog look exactly like the one I currently have.
这是我的内容：
这是放在我的application.erb
This is placed in my 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：
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 GMT
@ 23:46 GMT
好的，我想出了办法...而且它并不漂亮。我基本上以实际元素传递给$ .rails.confirm方法的方式扩展了jquery-rjs。这样我至少知道如果在模态中按下确定按钮会发生什么。所以这是新的时髦代码。
Ok, I figured out a way ... and it isn't pretty. I basically extended jquery-rjs in a way that the actual element is passed along to the $.rails.confirm method. That way I at least know what should happen if the OK button is pressed in the modal. So here is the new snazzy code.
我的新application.js。奇迹般有效。但我对我必须覆盖多少事情感到有些不安。我可能破坏了一些东西，我甚至都不知道它（rails.formSubmitSelector和/或rails.formInputClickSelector）。所以，如果你有更好的解决方案... 给：D thx！
My new application.js. Works like a charm. But I'm a little disturbed at how many things I had to override. I probably broke something and I don't even know about it (rails.formSubmitSelector and/or rails.formInputClickSelector). So if you have a better solution ... give :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中确认框的工作演示： http://rors.org/demos/custom-confirm-in-rails
Here's a working demo for changing confirmation box in Rails: http://rors.org/demos/custom-confirm-in-rails
提供了Boostrap，jQueryUI和Noty的示例。
Examples for Boostrap, jQueryUI and Noty are provided.
这篇关于自定义导轨确认框（使用$ .rails.confirm覆盖）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
