如何将手风琴中的图标放在jquery ui中(How to put the icons in accordion in jquery ui)
我想做的是显示手风琴中的默认图标,就像在jQuery-ui网站中的示例一样。
示例: http : //jqueryui.com/accordion/#custom-icons
我的问题是它不会只显示我看到的文本...我在jsfiddle中尝试了我的代码我看到它但它与文本处于相同的位置。
当前输出: http : //jsfiddle.net/MfegM/1663/
脚本:
$(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' }); });我的链接:
<!--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>I want to do is show the default icon in accordion just like in the example in jQuery-ui site.
Example: 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.
Current output: 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>最满意答案
你的代码是绝对正确的,你所要做的就是将这个小CSS添加到你的CSS文件中
.ui-accordion .ui-accordion-header{ padding-left: 30px; }Your code is absolutely right , all you have to do is add this small CSS to your CSS file
.ui-accordion .ui-accordion-header{ padding-left: 30px; }更多推荐
发布评论