1

I am using http://jqueryui.com/demos/dialog/

$('#add_remarks').click(function(){
    $( "#remark-form" ).dialog( "open" );
});
$( "#remark-form" ).dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        'Add Remarks': function() {
                alert('ok')
                },
                error: function(){
                    //alert('error');
                    //location.reload();
                }
            });
        },
        Cancel: function() {
            $(this).dialog( "close" );
        }
    },
    close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
    }
});

I would like to specify an external css class so I can define the width and the height of the remark-form from an external css file.

Do you know how to do that?

4

4 回答 4

1

您可以使用addClassto..well，向您调用 .dialog 的 div 添加一个类。然后你可以随心所欲地设计。所以你的代码会变成

$( "#remark-form" ).addClass('your_class').dialog({
autoOpen: false,
modal: true,
buttons: {
    'Add Remarks': function() {
            alert('ok')
            },
            error: function(){
                //alert('error');
                //location.reload();
            }
        });
    },
    Cancel: function() {
        $(this).dialog( "close" );
    }
},
close: function() {
    allFields.val( "" ).removeClass( "ui-state-error" );
}});
于 2012-04-10T20:21:35.583 回答
1

你可以使用对话框类： 

 $( "#selector" ).dialog({ dialogClass: 'myClass' });
于 2012-04-10T20:31:10.837 回答
0

从您在主题选项卡中提供的链接中，呈现的 html 代码将如下所示：

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
      <p>Dialog content goes here.</p>
   </div>
</div>

因此，当您拥有#remark-form项目的选择器时，您所需要的一切：

#remark-form .ui-dialog { height: 100px !impportant; width 100px !important}

然后您可以将此样式代码添加到您的 html 文档或外部 css 的 head 部分，然后您将其指向

于 2012-04-10T20:26:47.703 回答
0

如果您想在页面加载后添加 CSS（例如，如果您有动态 CSS 文件），您可以使用

function includeCSSFile( file_url ) {
    var cssFile = document.createElement('link');
    cssFile.setAttribute('type', "text/css" );
    cssFile.setAttribute('rel', "stylesheet" );
    cssFile.setAttribute('href', file_url );
    document.getElementsByTagName("head").item(0).appendChild(cssFile);
}

在你的主 javascript 文件上，所以在任何你想加载另一个 css 的地方你都必须调用这个函数

includeCssFile ( 'http://fonts.googleapis.com/css?family=Bad+Script' )

之后，您可以在代码上使用 $(selector).addClass(...) 。

我在一个网站上使用它并且它工作正常，其中 link_url 由 PHP 脚本给出，有时它是动态编写的......

于 2012-04-10T20:30:26.983 回答