基于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: "加载的路径 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="测试" οnclick="javascript:alert($('#txttest').val());" /></div>
最后
上页给出的是几个简单的例子,
详细操作请看示例;
更多的api请看:
|
源码地址: