jquery 树型(Tree)目录(三)

时间:2021-10-02 13:37:45

jquery 树型(Tree)目录(三)以上把自己写的代码写完了,下面把用到的js与css粘贴出来,对了还有图片 ,哦

1。jquery.js就不用写了吧

************************************************

2。pony.js  以下是代码,请粘贴出来,命名为“pony.js”即可

Pn = {
 version : '1.0'
};
/**
 * Pn.ns('Company', 'Company.data');
 */
Pn.ns = function() {
 var a = arguments, o = null, i, j, d, rt;
 for (i = 0;i < a.length; ++i) {
  d = a[i].split(".");
  rt = d[0];
  eval('if (typeof ' + rt + ' == "undefined"){' + rt + ' = {};} o = '
    + rt + ';');
  for (j = 1;j < d.length; ++j) {
   o[d[j]] = o[d[j]] || {};
   o = o[d[j]];
  }
 }
};
/**
 * 创建html对象
 */
Pn.create = function(a) {
 return document.createElement(a);
};
/**
 * html模板
 * 使用#()作为占位符
 */
Pn.Template = function(s) {
 this.tpl = s;
}
Pn.Template.prototype.create = function(params) {
 var s = this.tpl;
 for(var p in params) {
  s = s.replace(new RegExp("#\\("+p+"\\)", "g") ,params[p]);
 }
 return s;
}
/**
 * 获得本页面上唯一的ID
 */
Pn.UID = 0;
Pn.getUID = function() {
 Pn.UID++;
 return Pn.UID;
}
// 设置全局 AJAX 默认选项。
$.ajaxSetup( {
 dataType : "json",
 type : "POST",
 beforeSend : function(xhr) {
  xhr.setRequestHeader('isAjax', 'true');
 }
});
jQuery.extend( {
 postJson : function(url, data, success, error) {
  $.ajax( {
   url : url,
   data : data,
   success : success,
   error : error
  });
 }
});
/**
 * 获得url参数。doc:文本对象document;key:参数。返回:value。
 */
Pn.getParam = function(key) {
 var aParams = location.search.substr(1).split('&');
 var aKv;
 for (var i = 0;i < aParams.length; i++) {
  aKv = aParams[i].split('=');
  if (aKv[0] == key) {
   return aKv[1];
  }
 }
};
/**
 * 复选框全选或取消
 * 
 * @param name
 *            复选框名称
 * @param checked
 *            of boolean 全选或取消
 */
Pn.checkBox = function(name, checked) {
 $("input[name='" + name + "']").attr("checked", checked);
}
//@ TODO 是否需要
Pn.checkLen = function(o, len) {
 len = len || 1;
 if (o.val() == undefined || $.trim(o.val()) == ''
   || $.trim(o.val()).length < len) {
  return false;
 } else {
  return true;
 }
}
Pn.Cookie = function Cookie() {
 this.cookies = [];
 /**
  * @param name
  */
 this.get = function(name) {
  this._reset();
  return this.cookies[name];
 }

 /**
  * name & value must be Required
  * 
  * @param {string}
  *            name (Required)
  * @param {string}
  *            value (Required)
  * @param {integer}
  *            expires (optional, [Units:seconde] , exp (one day):
  *            1*24*60*60)
  * @param {string}
  *            path (optional, exp: '/')
  * @param {string}
  *            domain (optional, exp: '.a.com')
  * @param {boolean}
  *            secure (optional, exp: false)
  */
 this.set = function() {
  var args = this.set.arguments;
  var _num = args.length;
  if (_num < 2) {
   return;
  }
  var _cookie = args[0] + '=' + this._encode(args[1]);
  if (_num >= 3) {
   var now = new Date();
   var _expires = new Date(now.getTime() + args[2]);
   _cookie += ';expires=' + _expires.toUTCString();
  }
  if (_num >= 4) {
   _cookie += ';path=' + args[3];
  }
  if (_num >= 5) {
   _cookie += ';domain=' + args[4];
  }
  if (_num >= 6) {
   _cookie += ';secure';
  }
  document.cookie = _cookie;
 }

 this.print_r = function() {
  this._reset();
  for (var i in this.cookies) {
   alert(i + ' -> ' + this.cookies[i]);
  }
 }
 this._reset = function() {
  var cookie = document.cookie.split(';');
  var _num = cookie.length;
  for (var i = 0;i < _num; i++) {
   var _arr = cookie[i].split('=');
   var _name = this._trim(_arr[0]);
   var _value = '';
   if (typeof _arr[1] != 'undefined') {
    _value = this._decode(this._trim(_arr[1]));
   }
   this.cookies[_name] = _value;
  }
 }
 this._trim = function(_str) {
  return _str.replace(/(^\s+)|(\s*$)/g, '');
 }
 this._encode = function(_str) {
  return encodeURI(_str);
 }
 this._decode = function(_str) {
  return decodeURI(_str);
 }
}
Pn.Cookie.countPerPage = "_countPerPage";
Pn.ns('Pn.LTable');
Pn.LTable.lineOver=function(o){
 $(o).addClass("pn-lhover");
};
Pn.LTable.lineOut=function(o){
 $(o).removeClass("pn-lhover");
};
Pn.LTable.lineSelect=function(o){
 if(Pn.LTable.lineSelected){
  $(Pn.LTable.lineSelected).removeClass("pn-lselected"); 
 }
 Pn.LTable.lineSelected=o;
 $(o).addClass("pn-lselected");
}
Pn.ns('Pn.Tree');
Pn.Tree.switchDisplay=function(id,open) { 
 var isDisplay = $('#'+id+'-s').attr("isDisplay");
 if(open&&isDisplay=="true") {
  return;
 }
 if(isDisplay=="true") {  
  $('#'+id+'-co').hide();
  $('#'+id+'-fo').hide();
  $('#'+id+'-cc').show();
  $('#'+id+'-fc').show();
  $('#'+id+'-').hide();
  $('#'+id+'-s').attr("isDisplay","false");
 } else {
  $('#'+id+'-cc').hide();
  $('#'+id+'-fc').hide();
  $('#'+id+'-co').show();
  $('#'+id+'-fo').show();
  $('#'+id+'-').show();
  $('#'+id+'-s').attr("isDisplay","true");
 }
}
Pn.Tree.switchSelect=function(element,id,treeId) {
 if(element.checked) {
  $("input:checkbox",$('#'+id)).each(function(){this.checked=true;});
  var head = treeId;
  var tail = "-chk";
  //取去除头,取中间部分:t-0-6-1=-0-6-1
  var middle = id.substring(treeId.length);
  while(true) {
   middle = middle.substring(0,middle.lastIndexOf("-"));
   if(middle.length > 0) {
    $('#'+head+middle+tail).attr("checked",true);
   } else {
    break;
   }
  }
 } else {
  $("input:checkbox",$('#'+id)).each(function(){this.checked=false;});
 }
}
Pn.Tree.lineOver=function(element) {
 $(element).addClass("pn-tree-hover");
}
Pn.Tree.lineOut=function(element) {
 $(element).removeClass("pn-tree-hover");
}
Pn.Tree.lineSelected=function(element,treeId) {
 var selectedId = $('#'+treeId).attr("selectedId");
 if(selectedId){
  $('#'+selectedId).removeClass("pn-tree-selected");
 }
 $('#'+treeId).attr("selectedId",$(element).attr("id"));
 $(element).addClass("pn-tree-selected"); 
}

*****************************************

3。theme.css代码如下,请粘贴出来,命名为“theme.css”即可

/*数据录入和修改样式*/
.pn-ftable{background-color:#B4CFCF;margin-top:5px;}
.pn-flabel{background-color:#F9FBFD;text-align:right;padding-right:3px;}
.pn-flabel-h{height:27px;}
.pn-fcontent{background-color:#FFFFFF;padding-left:5px;}
.pn-fbutton{background-color:#FFFFFF;text-align:center;}
.pn-fhelp{color:#747474;padding:3px 0px;}
.pn-frequired{color:red}
.pn-fruler{background:url(../img/admin/ruler.gif) repeat-x 1px 6px;}
/*数据列表样式*/
.pn-ltable{background-color:#E2EBEF;margin:5px auto 0px auto;}
.pn-lthead{}
.pn-lthead th{height:27px;background-image:url(../img/theme/msg_bg.jpg);}
.pn-ltbody{background-color:#FFFFFF;}
.pn-ltbody tr{height:25px;}
/*数据列表鼠标经过样式*/
.pn-lhover{background-color:#F2F2F2;}
.pn-lselected{background-color:#d9e8fb;}
/*数据列表没有数据样式*/
.pn-lnoresult{padding:10px;border:#b4cfcf 1px solid;text-align:center;color:red;font-weight:bold;}
/*数据列表批量操作样式*/
.pn-lbopt{margin-top:2px;padding:5px;border:#b4cfcf 1px solid;}
/*数据列表操作链接样式*/
.pn-lopt{text-align:center;}
a.pn-loperator{text-decoration:underline;}
a.pn-loperator:link {color: #2366A8;}
a.pn-loperator:visited {color: #2366A8;}
a.pn-loperator:hover{color: #2366A8;}
a.pn-loperator:active {color: #2366A8;}
/*分页样式*/
.pn-sp{margin:3px auto 0px auto;padding:1px 0px;height:28px;background-image:url(../img/theme/pbg.jpg);}
.pn-sp-left{float:left;padding-left:10px;width:24%}
.pn-sp-right{float:left;text-align:center;width:74%}
/*树的样式*/
.pn-tree{font-size:12px;}
.pn-tree *{word-break:keep-all;white-space:nowrap;}
.pn-tree img{vertical-align:middle;}
.pn-tree-hover{background-color:#F5F5F5;}
.pn-tree-selected{background-color:#DDECEF;}
.pn-tree-checkbox{vertical-align:middle;}

***************************************************

4。admin.css  代码如下:请粘贴出来,命名为“admin.css”即可

body{margin:0;padding:0;font-size:12px;color:#364f56;background-color:#FFFFFF;}
img{border:0px;}
form{margin:0; padding:0;}
input[type=text],input[type=password],textarea{border-top:1px solid #404040;border-left:1px solid #404040;border-right:1px solid #D4D0C8;border-bottom:1px solid #D4D0C8;}
input[type=text],input[type=password]{height:17px;}
input[type=text]:focus,input[type=password]:focus,textarea:focus{border:1px solid #000000;}
input[type=button],input[type=submit],input[type=reset]{padding:1px;font-size:12px;border:1px solid;border-color:#ddd #666 #666 #ddd;background:#DDD;color:#000;}
/*链接总的css定义*/
a{text-decoration:none;}
a:link{color:#364f56;}
a:visited{color:#333333;}
a:hover{color: #ae0927;}
a:active {color: #0000ff;}
/*菜单链接*/
a.channel:link {color:#ffffff;}
a.channel:visited {color:#ffffff;}
a.channel:hover{color:#ffff00;}
a.channel:active {color:#ffffff;}
/*菜单链接*/
a.normal{text-decoration:underline;}
.clear{clear:both;}
/*后台管理界面body体*/
.body-box{width:99%;margin:0px auto;margin-right:auto;}
/*后台左页body*/
.lbody{background:url(../img/admin/lbg.jpg) right repeat-y #F4F7FB;color:#666666;margin-right:6px;}
/*后台左页菜单*/
.lmenu{padding:0px;margin:10px 0px 0px 0px;list-style:none;}
.lmenu a{display:block;padding:7px 0px 7px 30px;; background:url(../img/admin/circle.gif) no-repeat 15px -1px;}
.lmenu-focus{background-color:#DDECEF;}
/*后台左页树*/
.lttop{padding:10px 0px 2px 0px;text-align:center;}
/*后台右页头部*/
.rhead{border:#b4cfcf 1px solid;padding:5px 15px;margin-top:5px;}
/*后台右页当前位置*/
.rpos{float:left;padding:3px 0px 3px 20px;background:url(../img/admin/arrow.gif) center left no-repeat;}
/*后台右页操作*/
.ropt{float:right;}
***********************************************************

5。所用到的图片:

elbow.gif            ---------->   jquery 树型(Tree)目录(三)

elbow-end.gif     ---------->   jquery 树型(Tree)目录(三)

elbow-end-minus.gif  ---->   jquery 树型(Tree)目录(三)

elbow-end-minus-nl.gif -->   jquery 树型(Tree)目录(三)

elbow-end-plus.gif ------->    jquery 树型(Tree)目录(三)

elbow-end-plus-nl.gif ---->    jquery 树型(Tree)目录(三)

elbow-line.gif     ----------->   jquery 树型(Tree)目录(三)

elbow-minus.gif  ----------->   jquery 树型(Tree)目录(三)

elbow-minus-nl.gif  -------->   jquery 树型(Tree)目录(三)

elbow-plus.gif    ------------>   jquery 树型(Tree)目录(三)

elbow-plus-nl.gif ----------->   jquery 树型(Tree)目录(三)

folder.gif            ------------>   jquery 树型(Tree)目录(三)

folder-open.gif   ------------>   jquery 树型(Tree)目录(三)

leaf.gif               ------------>   jquery 树型(Tree)目录(三)

loading.gif         ------------>   jquery 树型(Tree)目录(三)

s.gif                   ------------>   jquery 树型(Tree)目录(三)         (空图片,透明,没内容)

***********************************************************************

6。来张最终效果图:

jquery 树型(Tree)目录(三)