2015-11-05 96 views
0

我在對話框中添加了兩個自定義按鈕,但它們當前僅位於中間。我怎樣才能在標題欄上的關閉按鈕旁邊移動這些按鈕,而不用覆蓋或觸摸關閉按鈕,也不需要使用任何CSS在對話框標題欄中的關閉按鈕旁邊添加按鈕

我的小提琴:http://jsfiddle.net/ZSk6L/928/

+0

你將開放設置使用jQuery的CSS?像'$(「button」).css(「float」,「right」);'和一個小的邊距? – cfly24

+0

會覆蓋關閉按鈕嗎?如果不是的話,會好的 – PhoonOne

+0

如何設計一些東西而不使用設計代碼? – guradio

回答

1

如果你是好的使用jQuery的CSS內,那麼你可以添加一個類減號按鈕:

$('<button class="minusButton">-</button>').appendTo(titlebar).click(function() { 
    $('#resultId').parents('.ui-dialog').animate({ 
     height: '40px', 
     top: $(window).height() - 90 
    }, 50); 
}); 

,然後設置保證金

$(".minusButton").css("margin-left", "105px"); 
+0

是否也可以使按鈕的大小相同,現在+ +有點大,我試圖$(「。minusButton」)。css(「margin-left」,「105px」,「width」,「 20em「);但沒有運氣 – PhoonOne

+0

是的,只要做'$(「button」).css(「width」,「30px」);' – cfly24

1

如果你很高興在jQuery的使用內嵌樣式,這得到你想要的(不含浮動或覆蓋的關閉按鈕的 - 只需設置左邊距到第一個自定義按鈕:

$('<button>-</button>').appendTo(titlebar).css('margin-left', '35%').click(function() {

Fiddle

0

是絕對沒有辦法做到這一點沒有至少使用內聯CSS,jQuery的經過寫成,

您最好的選擇是在+按鈕上使用浮動和固定的小邊距,使其與關閉按鈕不重疊。請注意,當用戶調整對話框窗口的大小時,這裏編寫的任何答案都可能會有問題,唯一防止出現的方法是給整個對話窗口一個min-width屬性。

這裏是你應該做的:

$('<button>+</button>').appendTo(titlebar).css({'display':'inline-block', 'float':'right', 'margin-right': '10px'}).click...

而對於其他按鈕:

$('<button>-</button>').appendTo(titlebar).css({'display':'inline-block', 'float':'right'}).click...

你可以看到工作Fiddle Here