带有 jQ​​uery UI 图标按钮的 jQuery 手风琴标题(隐藏/显示 + 悬停/单击)

2024-03-08

我需要什么:一个 jQuery UI 框架按钮,如可以在此处找到的按钮:http://jqueryui.com/themeroller/ http://jqueryui.com/themeroller/(查看框架图标)在 jQuery 手风琴标头中。

现场样品:http://www.nikollr3. Three.axc.nl/ http://www.nikollr3.three.axc.nl/

(据我了解;按钮也可以通过具有正确 jQuery UI 类的 Anchor 标签来模仿。)

要求: 当当前未选择标题时,我不希望显示按钮/图标。另一方面,如果选择了标题,因此也显示了它的 DIV,我希望显示图标/按钮。看左边的第一张图片,在这种状态下我不希望显示“+”按钮。在所有其他图像(聚焦/选择的图像)中,我确实希望显示它。目前尚未实施;这个怎么做?

-> 如果单击按钮,我希望显示 statProp,我有一个函数 showStatProp() 用于此目的。

我目前遇到的问题:将鼠标悬停在“按钮”上没有执行任何操作,因为当前选择标题时,相同的 css 以某种方式应用于按钮,就像标题一样(查看按钮的交叉颜色:深灰色到黑色)(没有单独的悬停)。

如何达到这个目的?我目前陷入困境,因为在互联网上找到的关于我正在尝试的具体事情的文档/信息有限。

function showStatProp()
            {
                if(document.getElementById("statProp").style.display == "none")
                {
                    document.getElementById("statProp").style.display = 'block';
                }
                else
                {
                    document.getElementById("statProp").style.display = 'none';
                }
            }

HTML:

<body onkeydown="controlCheck(event)" onkeyup="clearPress()" >
        <div id="application" style="position:absolute">
            <div id="accordion">
                 <h3 id="clickStat">Stations
                 <span style="float:right;" class="ui-state-default ui-corner-all">
                <a class="ui-icon ui-icon-plusthick btpad" href="/getPunten.php">Edit</a>
                </span></h3>
                 <div id="stations">
                    <input type="text" id="stations_ac" onclick="this.value='';" />
                     <div id="selectedStationDiv">
                     </div>
                    <hr>
                        <div id="statProp" style="display:none;">
                    <p>Name: <input type="text" style="float:right; clear:right" size="19" id="statNam" onclick="this.value='';" /></p>
                    <p style="margin-top:15px">
                    Type:
                    <select id ="statTyp" style ="float:right" onchange="">
                    <option></option>
                    <option title="Test">T</option>
                    </select>
                    </p>    
                    <p style="margin-top:15px">
                    Admtyp:
                    <select id ="admtyp" style ="float:right" onchange="FilterByToestanden()">
                    <option></option>
                    <option title="Alarm">A</option>
                    <option title="Alarm">D</option>
                    <option title="Urgent alarm">U</option>
                    </select>
                    </p>
                    <p>Image: <input type="text" id="statBildnam" size="12" style ="float:right;text-transform: uppercase"></p>

                    <p id="devText">Text:
                    <input type="text" style="float:right; clear:right" id="texts_ac" onclick="this.value='';" /></p>
                    <p>
                    <p id ="respLine">Responsible: <select id="statResp" style="margin-bottom:10px;margin-top:6px;"><option>WERKHUIS-EMG-WEVELGEM</option></select></p>
                    <button id="btnCrtStat" onClick="createStation()" type="button" style="margin-left:26px;margin-top:-3px">Create</button>
                        </div>

                </div>                                          

                <h3 id="clickImages" onclick="listImages()">Images</h3>
                <div id="imagesList" style="overflow:auto">

                    <ul id='imagesUL'></ul>
                <button onClick="addImage()" type="button" style="margin-left:26px;margin-top:-3px">Add image</button>
                </div>

我猜你想要这样的东西:

http://jsfiddle.net/mali303/gxemn34h/ http://jsfiddle.net/mali303/gxemn34h/

我已向按钮添加了 CSS 类“action-button”。要隐藏处于折叠状态的按钮,请使用以下 CSS:

#accordion .action-button {
    float: right;
    display: none;
}
#accordion .ui-state-active .action-button {
    display: inline;
}

添加悬停效果:

$('#accordion .action-button').hover(
    function() {
        $(this).addClass('ui-state-hover');
    },
    function() {
        $(this).removeClass('ui-state-hover');
    }
);

要使按钮可点击,请使用如下内容:

$('#accordion .action-button a').click(function () {
    self.location.href = $(this).attr("href");
});

Edit:

要修复按钮的默认状态和悬停状态,请使用以下 CSS:http://jsfiddle.net/mali303/vf4q0eox/1/ http://jsfiddle.net/mali303/vf4q0eox/1/

#accordion .action-button .ui-icon {
    background-image: url(http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_888888_256x240.png);
}
#accordion .action-button.ui-state-hover .ui-icon {
    background-image: url(http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_454545_256x240.png);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

带有 jQ​​uery UI 图标按钮的 jQuery 手风琴标题(隐藏/显示 + 悬停/单击) 的相关文章

随机推荐