jQuery手风琴标题与jQuery UI图标按钮（隐藏/显示+悬停/点击） [英] jQuery Accordion header with jQuery UI icon button (hide/show + hover/click)
问题描述
我需要：一个jQuery UI框架按钮，像一个可以在这里找到的按钮：
我添加了一个CSS类'action-button'到按钮。要隐藏处于折叠状态的按钮，请使用此CSS：
#accordion .action-button {
float：right;
display：none;
}
#accordion .ui-state-active .action-button {
display：inline;
}
添加悬停效果：
$ b b
$（'＃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）;
}）;
编辑：
要修复按钮的默认和悬停状态，请使用此CSS：
http： //jsfiddle.net/mali303/vf4q0eox/1/#ac手风琴.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）;
}
What i need: a jQuery UI framework button like the one that can be found here: http://jqueryui.com/themeroller/ (look at Framework Icons) in a jQuery accordion header.
Live Sample: http://www.nikollr3.three.axc.nl/
(From what i understood; a button can also be mimicked by an Achor tag with the right jQuery UI class.)
Requirements: I do not want the button/icon to be shown when the header is NOT currently selected. On the other hand, if the header is selected, and thus also it's DIV is shown, i want the icon/button to be displayed. Look at the first image from the left, in that state i do not want the "+" button to be shown. In all other images (where it is focused/selected) i do want it to be shown.This currently NOT implemented; how to do this?
-> If the button is clicked, i want statProp to be displayed, i have a function showStatProp() for this.
Issues i am having currently: Hover over 'button' is not doing anything, because currently when the header is selected, the same css is somehow applied to the button as is to the header (look at the cross color of the button: dark grey to black) (there is no seperate hover).
How to get to this? i am currently stuck as there is limited documentation/information to be found on the internet about this specific thing i am trying.
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>解决方案I guess you want something like this:
http://jsfiddle.net/mali303/gxemn34h/
I have added a CSS class 'action-button' to the button. To hide button in collapsed state use this CSS:
#accordion .action-button { float: right; display: none; } #accordion .ui-state-active .action-button { display: inline; }To add hover effect:
$('#accordion .action-button').hover( function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); } );To make the button clickable, use something like this:
$('#accordion .action-button a').click(function () { self.location.href = $(this).attr("href"); });Edit:
To fix the default and hover states of the button, use this CSS: 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); }
这篇关于jQuery手风琴标题与jQuery UI图标按钮（隐藏/显示+悬停/点击）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
