如何將圖像添加到JQuery中的ui-dialog-titlebar？

6

當然是。在尺寸和對齊方面讓它看起來很漂亮將是棘手的部分。但在標題欄中放置的形象應該是簡單：

$(".ui-dialog-titlebar").append("<img src='felix.gif' id='myNewImage' />");

編輯：
建立在什麼尼克說以下（歡呼），如果你想成爲真的性交，你就放對話框的open事件中的代碼，即：

$(".putSelectorHere").dialog({ 
    open: function(event, ui) { 
    $(".ui-dialog-titlebar").append("<img src='felix.gif' id='myNewImage' />"); 
    } 
});

Click的相關文檔。

來源

2010-05-10 06:56:15 GlenCrawford

+0

謝謝，但它不工作。 – Felix 2010-05-10 07:35:27

+0

@Felix Guerrero：看着Firebug，你能看到標題欄內的元素嗎？ – GlenCrawford 2010-05-10 07:38:42

+0

Card Info

這就是我用Firebug獲得的。 – Felix 2010-05-10 07:49:25

0

我使用的CSS樣式是這樣的：

.ui-dialog .ui-dialog-titlebar { background: transparent url(/path/to/images.gif) no-repeat top left; }

這是在樣式表我的jQuery的ui.css

來源

2010-05-10 12:25:45 Jason

1

這些之後添加都是真的很好的答案。我覺得我錯過了一個小而重要的功能，所以我在我的解決方案中折騰着。

您可以將代碼綁定到事件。我很懶，所以我使用.live（）方便的綁定。這讓我可以在任何地方拋棄所有的專業代碼。

嘗試使用此

<script type="text/javascript"> 
    function initPopups() 
    { 
     <!-- this is a 'close' handler for all of my modal popups--> 
     $('.ui-widget-overlay').live('click',function(){$('.YOURCLASS').dialog('destroy');}); 

     <!-- this puts the lil logo in all of the popup dialog titlebars --> 
     $('.YOURCLASS').live('dialogcreate',function(){$('.ui-dialog-titlebar').append("<img id='my-img' src='THEIMG.png'/>");}); 
    } 

    <!-- run the scripts once the doc is done loading --> 
    $(document).ready(initPopups()); 
</script>

然後用IMG ID操控所有相關的CSS，使它看起來不錯

，如果你把兩個「createdialog」，這可清理「點擊」將事件合併爲一個調用.live（）。看看這裏的API： JQuery .live()

很可能你會想對你的標題欄做一些更有趣的事情（我就是這樣結束的）。我建議使用jQuery的.load('FANCY-TITLEBAR.xml');與.append（），而不是隻.append('GIANT-BLOCK-OF-MARKUP);

來源

2011-03-10 20:15:05 dolbysurnd

1

這可以使用一個解決方案，通過CSS添加圖像。以下是我自己使用的代碼示例。

var $help = $('#dialog_help') 
.dialog({ 
    title: 'Help', 
    autoOpen: false, 
    draggable: false, 
    width: 200, 
    position: [100,100], 
    closeText: 'Close', 
    dialogClass: 'dialoghelp' 
}); 

$('.openhelp').click(function() { 
    $help.dialog('open'); 

    return false; 
});

添加-dialogClass：'dialoghelp'使我能夠按照以下方式在css中自定義對話框窗口。

你可以這樣做，是取代最初出現的主要.ui-對話框，用自定義類替換它。

.ui-dialog .ui-dialog-titlebar { padding: 3px; position: relative; background: red;} 
//original 

.dialoghelp .ui-dialog-titlebar { padding: 3px; position: relative; background: red;} 
//adjusted

所以我想象一下，通過這種方式可以添加圖像。

來源

2011-10-11 10:29:30 ThuRatter

2

，如果你開放活動使用

$(".ui-dialog-titlebar").append("<img src='felix.gif' id='myNewImage' />");

然後先刪除菲利克斯。GIF

$(".ui-dialog-titlebar").remove("#myNewImage");

，因爲如果你打開對話框不止一次它將增加相同的圖像不止一次或銷燬對話框

來源

2012-07-09 06:28:52

如何將圖像添加到JQuery中的ui-dialog-titlebar？

回答

相關問題