JQuery用戶界面對話框外部CSS

我使用http://jqueryui.com/demos/dialog/JQuery用戶界面對話框外部CSS

$('#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"); 
    } 
});

我想指定外部CSS類，所以我可以定義的寬度和備註形式從外部CSS文件的高度。

你知道該怎麼做嗎？

來源

2012-04-10 gosom

如果將外部CSS文件加載到站點中，您仍然可以像通常那樣引用該文件中包含的選擇器... – 2012-04-10 20:21:09

我不確定我是否理解這裏的問題/問題。 – j08691 2012-04-10 20:22:14

我回答了你的問題，然後意識到真的沒有必要這樣做......所以我真的不明白你的問題。哈哈！ – wzub 2012-04-10 20:25:39

您可以使用addClass ......以及在您要調用.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-10 20:21:35 wzub

另外你需要將'width：'auto'，height：'auto''傳遞給對話框構造函數。 – 2012-04-10 21:15:14

從link您在主題化選項卡提供，呈現的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然後你指出它

來源

2012-04-10 20:26:47

，如果你想在頁面加載後添加一個CSS（如果你有一個動態的CSS文件，例如），你可以在你的主Javascript文件，

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); 
}

，所以任何你想去的加載你要調用的函數一樣

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

另一個CSS和之後，你可以在你的代碼中使用的$（選擇）.addClass（...）。

我使用它的網站上，並且其做工精細，其中LINK_URL由PHP腳本給定的，有時它是動態的書面...

來源

2012-04-10 20:30:26

您可以使用dialogClass：

$("#selector").dialog({ dialogClass: 'myClass' });

來源

2012-04-10 20:31:10 undefined

JQuery用戶界面對話框外部CSS

回答

相關問題