jQuery file tree menu plugin proTree
proTree is a jQuery file tree menu plug-in that uses arrays to import file tree structure menu style effects.
js code
<script type="text/javascript" src="js/proTree.js" ></script>
<script type="text/javascript">
//后台传入的 标题列表
var arr = [{
id: 1,
name: "一级标题",
pid: 0
}, {
id: 2,
name: "二级标题",
pid: 0
}, {
id: 3,
name: "2.1级标题",
pid: 2
}, {
id: 4,
name: "2.2级标题",
pid: 2
}, {
id: 5,
name: "1.1级标题",
pid: 1
}, {
id: 6,
name: "1.2级标题",
pid: 1
}, {
id: 7,
name: "1.21级标题",
pid: 6
}, {
id: 8,
name: "三级标题",
pid: 0
}, {
id: 9,
name: "1.22级标题",
pid: 6
}, {
id: 10,
name: "1.221级标题",
pid: 9
}, {
id: 11,
name: "1.2211级标题",
pid: 10
}, {
id: 12,
name: "1.2212级标题",
pid: 10
}
];
//标题的图标是集成bootstrap 的图标 更改 请参考bootstrap的字体图标替换自己想要的图标
$(".innerUl").ProTree({
arr: arr,
simIcon: "fa fa-file-o",//单个标题字体图标 不传默认glyphicon-file
mouIconOpen: "fa fa-folder-open-o",//含多个标题的打开字体图标 不传默认glyphicon-folder-open
mouIconClose:"fa fa-folder-o",//含多个标题的关闭的字体图标 不传默认glyphicon-folder-close
callback: function(id,name) {
alert("你选择的id是" + id + "，名字是" + name);
}
})
</script> All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn
Related Article
61 web page special effects, very fashionable and with good visual effects_html/css_WEB-ITnose
24 Jun 2016
61 web page special effects that are very fashionable and have great visual effects
Animated loading effects implemented in pure css3_html/css_WEB-ITnose
24 Jun 2016
Animation loading special effects implemented in pure css3
jquery waterfall flow LightBox picture box special effects
06 Jul 2016
jquery waterfall flow LightBox picture box special effects
A batch of hover effects implemented by CSS3_html/css_WEB-ITnose
24 Jun 2016
A batch of hover special effects implemented by CSS3
Revealing the special effects in Tencent's burberry event page_html/css_WEB-ITnose
24 Jun 2016
Revealing the special effects in Tencent’s Burberry event page
CSS3 mouse slides over animated line border special effects
06 Jul 2016
CSS3 mouse slides over animated line border special effects
CSS3 input box shadow effect and other shadow effects_html/css_WEB-ITnose
24 Jun 2016
CSS3 input box shadow effects and other shadow effects
Hot Tools
jQuery+Html5 realizes beautiful confession animation code
jQuery+Html5 implements beautiful confession animation code, the animation effect is great, a must-have for programmers to confess!
Couple's romantic confession js special effects code
JS special effects code for couples' romantic confession. Such special effects can be used on wedding photography websites or placed on personal websites. It is also a good special effect. PHP Chinese website recommends downloading!
Simple js love confession artifact
Simple native js love confession artifact
Bunker's html5 particle animation expressive effects
Bunker's html5 particle animation expression special effects code, the animated special effects text can be changed in the code, you can make a page where you can customize text input, it should be very popular, this HTML5 special effect is very beautiful.
jQuery responsive background login interface template
jQuery responsive backend login interface template html source code. The login page uses jquery to verify the form and determine whether the username and password meet the requirements. Usually the login page is a page that must be used on corporate websites or mall websites. Responsive backend pages, When the browser zooms in or out, the background will resize the image according to the browser! PHP Chinese website recommends downloading!