家猫js类库
基于jquery 的前端类库
只是简单的类库，并不需要学习成本和框架的负累。
用法
可直接引用源码文件，但必须引用：jquery和jm.core.js;
或都直接引用jquery和jm.min.js,就已包含此库的所有功能；
样式文件引用:jm.min.css,或逐个引用源样式文件
基础库
由于此库基于jquery,所以此库都以$jm开头。
jm.core.js为所有的基础，它主要处理缓存浏览器等简单操作。
菜单库
引用的文件：jm.core.js, jm.menu.js, jm.menu.css
调用非常简单：
$(function () {
//绑定菜单
$('#testmenu').menu({
//子菜单
items: [
{
text: 'testa',//子菜单名
click: function () {//点击事件
alert('a');
}
},
{
text: 'testb',
click: function () {
alert('b');
}
}
],
button: 2//0=左健菜单,2=右健菜单,
});
});
相信喜欢jquery的人对这种写法不陌生吧，testmenu为加载菜单的一个div
分页库
引用的文件：jm.core.js,jm.paging.js,jm.paging.css
写法：
$('#paging').paging({
showCount: 6, //当前页附近显示多少页码，比如，4或5表示前后显二个页码，6表示前后显示三个,都会除以2
change: function (p) {//触发分页事件，参数为转到的页码
showPageData(p);
}
});
/**
* 显示当前页数据
**/
function showPageData(index) {
$('#data').html('第' index '页');
//当点击而码后触发的事件，传入点击的是第几页
$('#paging').paging({ index: index, count: 100 });
}
paging为要显示分页页码的地方;
表格
引用的文件：jm.core.js,jm.table.js,jm.table.css
写法：
var tb = new $jm.table({
parent: 'tbcontainer',
id: 'test-jm-table',
className: 'jm-table',
header:["h1","h2","h3"]
});
tb.insertRow(['a', 'b', 'c']);
tb.insertRow(['a', 'e', 'bxcvb']);
tb.insertRow(['afasdf', 'xcbxcvb', 'afasf']);
tb.insertRow(['<a href="#">fasdfasdf</a>', 'b', 'c']);
tb.render();
没什么好说的。其实很简单的操作了，由于是库不需封装得太死，给用户更多的操作空间！
前端js模板
引用:jm.core.js,jm.template.js
此模板为老外所写，我这里只是简单的改改，使其更适合前端写法。
首先定义一个模板：
<script type="text/html" id="user_tmpl">
<# for ( var i = 0; i < users.length; i ) { #>
<li>用户名：<a href="javascript:alert('<#=users[i].id#>');"><#=users[i].name#></a></li>
<# } #>
</script>
这里就是遍历数据，生成li节点。
//构造一段数据
var users = [{ id: 1, name: '家猫1' }, { id: 2, name: '家猫2' }, { id: 3, name: '家猫3'}];
$('#results').template("user_tmpl", users); //模板ID与数据集
调用后会生成html返回到results这个div中，user_temple是模板id
弹窗
引用文件：jm.core.js,jm.win.js,jm.win.css
<script type="text/javascript">
/**
* 弹出模式测试窗口
**/
function popModal() {
var win=new $jm.win({
title: '家猫编程',//标题
//按钮参数，支持自定义className，text,click参数其中className, click参数可选
button: [
{ text: '确定',
className: 'myButton',
click: function ()
{ alert('确定'); }
},
{ text: '关闭', click: function () {
this.close();
}
}],
url: "http://www.jm47.com",//加载的路径
iframe: true,//是否用ifram加载页面
left: 20,//离左边距离
top: 10,//离顶部距离
modal: true, //是否为模式窗口
canMax: true, //是否禁止最大化
width: 600,
height: 400
});
win.show();
}
/**
* 用jquery插件方式弹出div中的信息
**/
function popJqueryWindow() {
$('#testwin').window({
width: 600,
height: 400,
resizeable:false,//固定大小,禁用改变大小后，也不能最大化
canMin:false//不许最小化
}).show();
}
/**
* 在DIV中弹出窗口
**/
function popWindowInDiv(x,y,p,t,bounds) {
var win = new $jm.win({
title: t?t:'家猫编程', //标题
//按钮参数，支持自定义className，text,click参数其中className, click参数可选
button: [
{ text: '关闭', click: function () {
this.close();
}
}],
content:'<span color="red">DIV子窗口</span>',//窗口内容
left: x?x:20, //离左边距离
top: y?y:10, //离顶部距离
canMax: false, //禁止最大化
parent:'wincontainer',//设置窗口的容器，不设定为当前window
width: 200,
height: 100,
position:p?p:'',//位置，center=居中,top=顶部,left=左边
bounds: bounds?bounds:null//边界锁定,//默认全锁定，此参数为一个json对象：如{left:false,top:true,right:true,bottom:false}//表示锁定顶部与右边，左边与底部可越界
});
win.show();
}
$(function () {
popWindowInDiv(80, 90);
popWindowInDiv(260, 180, '', '锁定上左边界', { left: true, top: true, right: false, bottom: false });
popWindowInDiv(1, 2, 'center', '居中窗口');
});
</script>
</head>
<body>
<a href="javascript:popModal();">弹出模式窗口</a>
<a href="javascript:popJqueryWindow();">弹出jquery插件窗口</a>
<br />
<!--测试容器为DIV的多窗口-->
<a href="javascript:popWindowInDiv();">在DIV中弹出窗口</a>
<div id="wincontainer" style="border:1px solid black;width:800px; height:400px; background-color:#000;position:relative;"></div>
<!--内容弹窗-->
<div id="testwin" style="display:none;">
<input type="text" placeholder="test" id="txttest" />
<input type="button" value="测试" onclick="javascript:alert($('#txttest').val());" />
</div>
最后
上页给出的是几个简单的例子,
详细操作请看示例;
更多的api请看：http://www.jm47.com/procts/2011/08/20/3001/doc
