以上把自己写的代码写完了,下面把用到的js与css粘贴出来,对了还有图片 ,哦
1。jquery.js就不用写了吧
************************************************
2。pony.js 以下是代码,请粘贴出来,命名为“pony.js”即可
Pn = {
version : '1.0'
};
/**
* Pn.ns('Company', 'Company.da
*/
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];
ev
+ 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, da
$.ajax( {
url : url,
da
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 (on
* 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-plus-nl.gif ----------->
s.gif ------------> (空图片,透明,没内容)
***********************************************************************
6。来张最终效果图: