我需要的是:一个jQuery UI框架按钮,可以在这里找到:http://jqueryui.com/themeroller/(查看框架图标)在jQuery手风琴标题中。
实时样本:http://www.nikollr3.three.axc.nl/
(根据我的理解;一个按钮也可以通过带有正确的jQuery UI类的Achor标签来模仿。)
要求: 我不希望在当前未选择标题时显示按钮/图标。另一方面,如果选择了标题,因此也显示了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>
答案 0 :(得分:8)
我猜你想要这样的东西:
http://jsfiddle.net/mali303/gxemn34h/
我在按钮上添加了一个CSS类“动作按钮”。要隐藏处于折叠状态的按钮,请使用此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");
});
修改强>
要修复按钮的默认状态和悬停状态,请使用此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);
}
答案 1 :(得分:2)
您可以执行仅基于CSS的解决方案。
如果您检查从您正在使用的库中生成的HTML,您会注意到当按钮是:
ui-state-hover
ui-state-active
使用上述理解,您可以默认隐藏“编辑电台”按钮(加上图标),并仅在悬停时或选中时显示:
#clickStat span.ui-state-default {
display: none;
}
#clickStat.ui-state-hover span.ui-state-default,
#clickStat.ui-state-active span.ui-state-default {
display: block;
}