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.
我需要的是:一个jQuery UI框架按钮,可以在这里找到:http://jqueryui.com/themeroller/(查看框架图标)在jQuery手风琴标题中。
Live Sample: http://www.nikollr3.three.axc.nl/
现场样本: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.)
(根据我的理解;一个按钮也可以通过带有正确的jQuery UI类的Achor标签来模仿。)
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?
要求:我不希望在当前未选择标题时显示按钮/图标。另一方面,如果选择了标题,因此也显示了DIV,我想要显示图标/按钮。从左边看第一张图片,在那种状态下我不想显示“+”按钮。在所有其他图像(它被聚焦/选择的地方)我确实希望它被显示。这个目前没有实现;这个怎么做?
-> If the button is clicked, i want statProp to be displayed, i have a function showStatProp() for this.
- >如果单击该按钮,我想显示statProp,我有一个函数showStatProp()。
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).
我目前遇到的问题:将鼠标悬停在“按钮”上没有做任何事情,因为当前选择标题时,同样的css以某种方式应用于按钮,与标题一样(查看按钮的交叉颜色:深灰色黑色)(没有单独的悬停)。
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>
3 个解决方案
#1
8
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:
我在按钮上添加了一个CSS类“动作按钮”。要隐藏处于折叠状态的按钮,请使用此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/
要修复按钮的默认和悬停状态,请使用此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);
}
#2
2
It is important when something javascript related is not working to inspect the console for errors first.
当javascript相关的东西不能首先检查控制台是否有错误时,这很重要。
When inspecting the console on your linked demo, I observed an error:
在链接的演示中检查控制台时,我发现了一个错误:
Uncaught SyntaxError: Unexpected token ILLEGAL
未捕获的SyntaxError:意外的标记ILLEGAL
It pointed to this line of code (line 1000 by inspection)
它指向这行代码(通过检查行1000)
var jDescriptions= ["<br />
<b>Warning</b>: implode() [<a href='function.implode'>function.implode</a>]: Invalid arguments passed in <b>/home/nikollr3/domains/nikollr3.three.axc.nl/public_html/index.php</b> on line <b>1007</b><br />
"];
The implication is that you have some sort of unicode character there which is causing the issue. Perhaps it is causing a line break. Either way, the result is an open ended string and an error which nullifies the code being examined after this line. The following code which does not execute is a majority of the scripting for the page.
这意味着你有某种unicode字符导致问题。也许它会导致换行。无论哪种方式,结果都是一个开放式字符串和一个错误,它会使此行之后正在检查的代码无效。以下不执行的代码是页面脚本的大部分。
I would suggest that you either manually type out this line in order to ensure the unicode is gone, or you can always try to run it through jsbeautifier.org/. Keep in mind, console errors are always a good place to start.
我建议你手动输入这一行以确保unicode消失,或者你总是可以尝试通过jsbeautifier.org/运行它。请记住,控制台错误始终是一个好的开始。
#3
2
You can do a CSS only based solution.
您可以执行基于CSS的解决方案。
If you inspect the HTML that gets generated from the library you are using, you will notice that when a button is:
如果您检查从您正在使用的库生成的HTML,您会注意到当按钮是:
- Hovered, the class
ui-state-hoveris used - Selected, the class
ui-state-activeis used - Not Selected, none of the above two classes are used
徘徊,使用类ui-state-hover
选中,使用类ui-state-active
未选中,不使用上述两个类
Using the above understanding, you can hide the Edit station button (plus icon) by default, and only make it visible on hover or when selected:
使用上述理解,您可以默认隐藏“编辑电台”按钮(加号图标),并仅在悬停时或选中时显示:
#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;
}
#1
8
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:
我在按钮上添加了一个CSS类“动作按钮”。要隐藏处于折叠状态的按钮,请使用此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/
要修复按钮的默认和悬停状态,请使用此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);
}
#2
2
It is important when something javascript related is not working to inspect the console for errors first.
当javascript相关的东西不能首先检查控制台是否有错误时,这很重要。
When inspecting the console on your linked demo, I observed an error:
在链接的演示中检查控制台时,我发现了一个错误:
Uncaught SyntaxError: Unexpected token ILLEGAL
未捕获的SyntaxError:意外的标记ILLEGAL
It pointed to this line of code (line 1000 by inspection)
它指向这行代码(通过检查行1000)
var jDescriptions= ["<br />
<b>Warning</b>: implode() [<a href='function.implode'>function.implode</a>]: Invalid arguments passed in <b>/home/nikollr3/domains/nikollr3.three.axc.nl/public_html/index.php</b> on line <b>1007</b><br />
"];
The implication is that you have some sort of unicode character there which is causing the issue. Perhaps it is causing a line break. Either way, the result is an open ended string and an error which nullifies the code being examined after this line. The following code which does not execute is a majority of the scripting for the page.
这意味着你有某种unicode字符导致问题。也许它会导致换行。无论哪种方式,结果都是一个开放式字符串和一个错误,它会使此行之后正在检查的代码无效。以下不执行的代码是页面脚本的大部分。
I would suggest that you either manually type out this line in order to ensure the unicode is gone, or you can always try to run it through jsbeautifier.org/. Keep in mind, console errors are always a good place to start.
我建议你手动输入这一行以确保unicode消失,或者你总是可以尝试通过jsbeautifier.org/运行它。请记住,控制台错误始终是一个好的开始。
#3
2
You can do a CSS only based solution.
您可以执行基于CSS的解决方案。
If you inspect the HTML that gets generated from the library you are using, you will notice that when a button is:
如果您检查从您正在使用的库生成的HTML,您会注意到当按钮是:
- Hovered, the class
ui-state-hoveris used - Selected, the class
ui-state-activeis used - Not Selected, none of the above two classes are used
徘徊,使用类ui-state-hover
选中,使用类ui-state-active
未选中,不使用上述两个类
Using the above understanding, you can hide the Edit station button (plus icon) by default, and only make it visible on hover or when selected:
使用上述理解,您可以默认隐藏“编辑电台”按钮(加号图标),并仅在悬停时或选中时显示:
#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;
}