Question

正如您所看到左侧框中的按钮占据整个div，我希望该按钮位于框右上角的一个小按钮上。使用单击alert("clicked")的onclick处理程序。我是否必须创建新的div？

按钮代码：

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

现在，如果我将鼠标放在左侧框中，它会以一种奇怪的方式显示豆子的状况。为什么它不像正确的盒子那样显示？

Answer 1

SEE THIS WORKING FIDDLE

基本上，您将按钮应用于包装元素，这会强制它成为容器的大小。在我的小提琴中，我在＃1容器中添加了一个新的div，名为.button_wrap，然后将按钮应用到它。最后，我在新的.button_wrap类中为警报添加了一个click事件。

作为旁注，我知道它只是一个小提琴，但我会在生产环境中避免所有这些内联样式。

FIDDLE底部的新JS：

$(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>

更改jQuery按钮的大小和位置

1 个答案: