加载对话框时更改我的jquery对话框按钮文本

时间:2012-03-07 20:02:35

标签: jquery jquery-ui

我有一个像这样的普通jquery对话框:

<div id="dialog-confirm" title="Empty the recycle bin?">
   <p>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<script>
    $(function(){
        $('#dialog-confirm').dialog({
            resizable: false,
            height: 140,
            modal: true,
            buttons:
                {
                    "Delete all items": function() { $(this).dialog('close'); },
                    "Cancel": function() { $(this).dialog('close'); }
                }
        });
    })
</script>

有时我需要更改文本按钮(例如,如果用户语言是法语)。在这种情况下,当加载jquery对话框时,我想调整按钮。有可能吗?

由于

3 个答案:

答案 0 :(得分:3)

以这种方式动态翻译按钮文本: -

dynamicBtnHandler("Supprimer tous les éléments", "Cancel");

function dynamicBtnHandler(btn1, btn2)
{
    var btnNames = {};
    btnNames[btn1] = function(){ $(this).dialog('close'); };
    btnNames[btn2] = function(){ $(this).dialog('close'); };
    $(function(){

        $('#dialog-confirm').dialog({
            resizable: false,
            height: 140,
            modal: true,
            buttons: btnNames
        });
    })
}

参考我的 LIVE DEMO

答案 1 :(得分:1)

嗯,我认为有两种解决方案。

1.如果您在html文件中包含此代码并且正在通过php或rails或asp进行解析,并且服务器恰好知道页面的语言,您可以将一个或多个哈希项放入只替换dialog()

中的代码 php中的

就像是

[...]$(this).dialog('<?= $close_in_user_language ?>')[...]

但如果您不知道服务器端的用户语言或者您不使用该段代码解析文件,我建议创建一个全局javascript变量(或更好的哈希表),当页面填满时使用用户语言加载任何您想要的内容。像这样的东西

   

这些项目将被永久删除,无法恢复。你确定吗?

<script>
  /* This code would have to be at the begining of your page with something
     that sets the variables correctly acording to the user language. 
     In this case I'm using spanish for demonstration porpuses*/

  var close_in_user_language="cerrar"
  var translation_table={"close":"cerrar"};

 /* With this implementation you can also change the language on the fly */

  $(function(){
    $('#dialog-confirm').dialog({
        resizable: false,
        height: 140,
        modal: true,
        buttons:
            {
                "Delete all items": function() { $(this).dialog( close_in_user_language ); },
                "Cancel": function() { $(this).dialog(translation_table["close"]); }
            }
    });
})
</script>

就我个人而言,我建议您将翻译文件放在用json编写的服务器上,然后将其分配给哈希表

答案 2 :(得分:0)

这是一个简单的例子。基本上你可以使用对话框对象的选项方法在任意点改变按钮。

<强> jsFiddle example

的jQuery

$(".selector").dialog({
    autoOpen: true,
    buttons: [
        {
        text: "Ok",
        click: function() {
            $(this).dialog("close");
        }}
    ]
});
$('button').click(function() {
    $('.selector').dialog("option", "buttons", [
        {
        text: "Changed!",
        click: function() {
            $(this).dialog("close");
        }}
    ]);
});​

HTML

<div class="selector">Hello world</div>
<button>Change text</button>​