<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!-- JQUERY 主要JS库-->
<script type="text/javascript" src="../../js/lib/jquery.js"></script>
<!-- JSTREE 主要JS库-->
<script type="text/javascript" src="../../js/lib/jquery.cookie.js"></script>
<script type="text/javascript" src="../../js/lib/jquery.hotkeys.js"></script>
<script type="text/javascript" src="../../js/jquery.jstree.js"></script>
<script type="text/javascript" src="../../js/util.js"></script>
<link href="../../css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
html,body {
margin: 0;
padding: 0;
}
body,td,th,pre,code,select,option,input,textarea {
font-family: verdana, arial, sans-serif;
font-size: 12px;
}
#tree {
width: 200px;
height: 400px;
overflow: auto;
border: 1px solid gray;
}
#code {
width: 400px;
height: 200px;
overflow: auto;
border: 1px solid gray;
overflow: auto;
margin-top: 10px
}
</style>
</head>
<body onload="init();">
<div id="tree" class="tree"></div>
<script type="text/javascript">
function init(){
$.ajax({
type:"post",
url: getContextPath() + '/material/listMaterialType.do',
dataType :"String",
success:function(json){
var str = json.replace(/\"id"/g, 'attr:{"id"');
var str2 = str.replace(/\,"data"/g, '},data');
var jsondata = eval(str2);
jtree(jsondata);
},
error:function(){
alert("服务器异常,请稍后重试!");
},
async:false
});
}
function jtree(o){
$("#tree").jstree(
//json加载数据节点
{
//json数据区域
"json_data" :{data:o}
,
//要使用到的插件
"plugins" : [ "themes", "json_data", "ui", "crrm", "cookies", "dnd", "search", "types", "hotkeys", "contextmenu" ]
})
//选择事件
.bind("select_node.jstree", function(e, data) {
var id = parseInt(data.rslt.obj.attr("id"));
document.getElementById("code").value =id;
})
}
</script>
<input type="hidden" value="" id="code" />
</body>
</html>
1.jQueryTree树
分享到：
相关推荐
4. **动画效果**：jQuery的`.animate()`方法可以创建平滑的CSS属性变化动画，常用于广告的滑动、淡入淡出、缩放等效果。 5. **AJAX交互**：jQuery的`.ajax()`函数简化了异步数据获取和更新，这在实现动态广告加载或...
4. **树形菜单**: 树形菜单是一种常见的网站导航结构，它使用嵌套的列表来表示层级关系。在JavaScript和jQuery的帮助下，可以通过点击节点来展开或收起子菜单，提高用户体验。CSS可以用来美化菜单的样式，如添加图标...
4. **动画效果（Animations）**：jQuery的动画效果丰富，如`fadeIn()`, `fadeOut()`, `slideToggle()`等，使开发者可以轻松创建平滑的过渡效果。在当当网的页面设计中，这些动画常用于导航栏的展开与收起、广告轮播...
3. **轻量级**：基于 jQuery，EasyUI 的体积相对较小，对页面加载速度影响不大，适合大型项目。 4. **易于使用**：组件通过简单的HTML标记和JavaScript选项进行配置，降低了学习和使用的门槛。 5. **数据绑定**：与...
7. **插件开发**：如果此代码包含了一个jQuery插件，那么它可能是通过扩展jQuery对象的原型链来实现的，这使得其他开发者可以方便地在自己的项目中复用这个功能。 综上所述，"jQuery仿Discuz右下角悬浮层提示"是一...
jQuery 的核心功能包括选择器（用于找到HTML元素）、遍历（遍历DOM树）和操作（添加、删除或修改元素属性）。jQuery 的语法简洁且直观，使得编写 JavaScript 代码变得更加容易。 **Sticky Sidebar原理** Sticky ...
8. **树形结构**：这个标签可能是指数据结构中的树形结构，例如在组织广告链接或分组时，可能会用到类似目录树的结构来表示广告的层次关系。这可以通过JavaScript的数据结构和算法来实现。 9. **响应式设计**：现代...
总结来说，这个“漂亮的基于jQuery实用下拉菜单代码”结合了jQuery的便利性、div+css的灵活性和网页特效的吸引力，为网页设计者提供了一个强大且易于定制的解决方案，适用于各种网页和广告设计项目。通过理解和应用...
本项目“基于jQuery的文字+图片滑动切换展示特效”正是利用jQuery的强大功能来实现一个动态的、吸引用户的网页元素展示效果。 这个特效的核心在于图片和文字的结合滑动，这在网页设计中常用于产品展示、新闻滚动或...
通过研究这个“网站广告JavaScript大全”的源代码，你可以深入了解JavaScript在实际项目中的应用，提升自己的技能，并且能够创造出更具吸引力的网页广告效果。对于初学者，这是一个很好的起点；对于专业开发者，这些...
在实际项目中，这种功能常用于通知、广告展示或用户反馈。 总的来说，这些资源为前端开发者提供了大量的实践示例，无论是学习还是工作中都可以作为参考，有助于提升开发效率和网页质量。理解并掌握这些知识点，对于...
在这个项目中，jQuery被用来处理用户与网页的交互，比如切换tab标签、触发客服对话框的显示和隐藏、以及可能的广告轮播等功能。jQuery的核心特性包括选择器（用于找到DOM元素）、遍历（遍历DOM树）和方法链（多个...
jQuery EasyUI 是一款基于 jQuery 的前端开发框架，它简化了网页界面的构建，提供了丰富的组件和易用的API。在1.5版本中，这个框架继续优化和增强了其功能，为开发者提供了更多便利。本篇将详细介绍jQuery EasyUI ...
【标签】"jQuery"明确了这个项目的核心技术，即jQuery库。jQuery提供了许多实用的功能，如选择器（用于查找HTML元素）、遍历（沿着DOM树移动）、操作（添加、删除或修改元素）和动画（创建平滑过渡效果），使得实现...
【jQuery新闻网站首页宽屏首页广告轮换图】是一种常见的网页设计元素，用于在网站的显著位置展示多张广告或重要信息，以吸引用户的注意力。这种效果通常由JavaScript库jQuery实现，因为jQuery提供了一系列方便的DOM...
4. **Octotree**：为GitHub浏览提供树形视图，便于查看项目结构。 5. **GitLens**：增强GitHub的Git功能，如代码比较、历史查看等。 6. **ColorPicker**：快速选取网页中的颜色，便于设计和调试。 7. **React ...
4. **响应式设计**：使用媒体查询和CSS Flexbox或Grid布局，确保广告能在不同设备和屏幕尺寸上正确显示。 5. **动画效果**：使用JavaScript库（如jQuery或GreenSock）创建吸引人的动画效果，提升用户体验。 6. **...
在这个项目中，jQuery库被用来协助实现轮播图的切换和动画效果。 【pieces.js插件】 pieces.js是一个专门用于创建图片切片效果的JavaScript插件。这个插件将一张完整的图片分割成多个小块，然后通过控制这些小块的...