更改jQuery的按鈕的大小和位置

這是我的小提琴：http://jsfiddle.net/3HauW/132/更改jQuery的按鈕的大小和位置

正如你可以看到左邊框中的按鈕佔據了整個div，我希望按鈕放在右上角的小按鈕盒子。與單擊處理器alert("clicked")單擊時。我是否必須創建一個新的div？

代碼按鈕：

$(function() { 
    $("#1").button({ 
     icons: {primary: "ui-icon-folder-open"},   
     text: false 
    }); 
});

而現在，如果我將鼠標放在左邊的方框，它顯示了bean的條件以一種不可思議的方式..爲什麼沒有顯示像右邊框呢？

來源

2014-02-11 PhoonOne

SEE THIS WORKING FIDDLE

基本上，你申請按鈕纏繞元件，這迫使它是容器的大小。在我的小提琴中，我在＃1容器中添加了一個新的div，名爲.button_wrap，並將其應用於它。最後，我爲警報的新.button_wrap類添加了一個單擊事件。作爲一個便箋，我知道它只是一個小提琴，但我會避開生產環境中的所有內聯樣式。

新的JS AT BOTTOM小提琴：

$(function() { 
    $("#1 > div.wrap > div.button_wrap").button({ 
     icons: {primary: "ui-icon-folder-open"}, 

     text: false 
}); 
    $('.button_wrap').on('click', function(e){ 
     alert('clicked'); 
    }); 
});

新的CSS：

.button_wrap {width:16px;height:16px;float:right;}

新的HTML結構盒第：

<div class="normal" id="1" 
    style="text-align:left; 
    top: 13em; 
    left: 5em; 
    height: 10em; 
    width: 12em;"> 
    <div class = "wrap"> 
     <div class="button_wrap"></div> 
    <div class = "show"> 
     <strong>Bean 1 
     <p>Status: Normal</p> 
     </strong>   
    </div> 
    <div class = "noshow"> 
     <P>0001: Normal</P> 
     <P>0002: online</P> 
     <P>0003: online</P> 
     <P>0004: online</P>       
    </div> 

    <div class = "here"> 
     <P>0001: online</P> 
     <P>0002: online</P> 
     <P>0003: online</P> 
     <P>0004: online</P>       
    </div> 
</div>

來源

2014-02-11 17:05:28 Rooster

嘿@Rooster，是有可能使其不顯示0001，0002 ... i當我將鼠標放在按鈕上時會出現這種情況現在它顯示了當我將鼠標放在按鈕上並準備點擊按鈕時的所有內容。我希望它只顯示當鼠標移到框上（而不是按鈕）時的所有內容 – PhoonOne

@JennyC是的，你只需要添加另一個wrapper div圍繞.wrap，移動包含div外的div的按鈕，並更改函數初始化按鈕以指向新的css位置。 http://jsfiddle.net/3HauW/137/ – Rooster

更改jQuery的按鈕的大小和位置

回答

相關問題