[英]How to put the icons in accordion in jquery ui
I want to do is show the default icon in accordion just like in the example in jQuery-ui site. 我想做的是在手风琴中显示默认图标,就像jQuery-ui站点中的示例一样。
Example: http://jqueryui.com/accordion/#custom-icons 示例: http : //jqueryui.com/accordion/#custom-icons
My problem is it won't show only the text I see... I tried my code in jsfiddle I see it but its in the same position as text. 我的问题是它不会仅显示我看到的文本...我在jsfiddle中尝试了代码,但看到的却与文本相同。
Current output: http://jsfiddle.net/MfegM/1663/ 当前输出: http : //jsfiddle.net/MfegM/1663/
Script: 脚本:
$(function() {
$( "#accordion" ).accordion({
active:false,
collapsible:true,
});
});
$(function() {
$("#accordion").accordion( );
$("#accordion").accordion("option", "icons",
{'header': 'ui-icon-circle-arrow-e', 'headerSelected': 'ui-icon-circle-arrow-s' });
});
My links: 我的链接:
<!--CSS Links-->
<link rel="shortcut icon" href="elogFiles/images/icon.ico" type="image/x-icon" />
<link rel="stylesheet" href="elogFiles/css/jquery-ui-1.9.2.css" />
<link rel="stylesheet" href="elogFiles/css/animate.css" />
<link rel="stylesheet" href="elogFiles/css/bootstrap.css" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="elogFiles/css/style.css" type="text/css" />
<!--Script Links-->
<script src="elogFiles/js/jquery-1.11.0.min.js"></script>
<script src="elogFiles/js/jquery-ui-1.9.2.min.js"></script>
<script src="elogFiles/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
<script src="elogFiles/js/myScript.js"></script>
Try using a newer version of jquery and jquery ui. 尝试使用更新版本的jquery和jquery ui。 It works straight up on 1.8.3 and ui 1.9.2 with your code exaclty
可以在代码正确的情况下直接在1.8.3和ui 1.9.2上运行
// code is yours - I included it so I could post the fiddle below.
$("#accordion").accordion("option", "icons",
{
'header': 'ui-icon-circle-arrow-e',
'headerSelected': 'ui-icon-circle-arrow-s'
});
EXAMPLE: http://jsfiddle.net/MfegM/1664/ 示例: http : //jsfiddle.net/MfegM/1664/
Your code is absolutely right , all you have to do is add this small CSS to your CSS file 您的代码绝对正确,您所要做的就是将这个小的CSS添加到CSS文件中
.ui-accordion .ui-accordion-header{
padding-left: 30px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.