jquery ligerui 是基于jquery的一系列ui控件组合,简单而又强大,致力于快速打造web前端界面解决方案。 因为是前端控件,跟服务器无关,可以适合.net,,php等等web服务器环境。目前全部插件的打包压缩js只有100k左右,很轻巧。使用插件式的开发模式,以“简单”为原则的设计,每个插件尽量独立,并可依赖拓展。
ligerui是什么
jquery ligerui控件丰富,包括基础、导航、布局、表单、表格、树形、窗口等
基础:resizable、drag、tip
导航:menu、menubar、toolbar
布局:layout、tab
表单:form、textbox、button、checkbox、combobox、dateeditor、radio、spinner
表格:grid
树形:tree
窗口:dialog、messagebox、window
回到顶部
如何使用
jquery ligerui是基于jquery而设计的一系列插件集合。基本上每个插件都是相对独立的。但是彼此之间又紧密地关联着,合理地对插件进行组装,实现出现各种复杂的功能。 使用ui可以帮助你快速地创建友好的用户界面。
第一个例子
。 代码如下:
<head>
<title></title>
<link href="https://www.cnblogs.com/lib/ligerui/skins/aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<script src="https://www.cnblogs.com/lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="https://www.cnblogs.com/lib/ligerui/js/core/base.js" type="text/javascript"></script>
<script src="https://www.cnblogs.com/lib/ligerui/js/plugins/ligertextbox.js" type="text/javascript"></script>
<script type="text/javascript">
$(function ()
{
//我们将一个html文本框对象转换成ligerui文本框对象,并返回ligerui对象
var g = $("#txt1").ligertextbox(
{
//如果没有输入时,会提示不能为空
nulltext: '不能为空'
});
/*
如何获取属性
*/
//方式一
alert('方式一:' + g.get('disabled'));
//方式二
alert('方式二:' + $("#txt1").ligertextbox('option', 'disabled'));
/*
如何设置属性
*/
//方式一
g.set('disabled', true);
//方式二
$("#txt1").ligertextbox('option', 'disabled', false);
/*
如何调用方法
*/
//方式一
g.setdisabled();
//方式二
$("#txt1").ligertextbox('setenabled');
/*
如何设置事件
*/
//这里给文本框绑定一个改变值的事件
//也可以设置onchangevalue参数
g.bind('changevalue', function (value)
{
alert(value);
});
});
</script>
</head>
<body style="padding:10px">
<input type="text" id="txt1" value="" style="width:200px"/>
</body>
。 代码如下:
var g;
$(function ()
{
g = $("#txt1").ligertextbox();
);
。 代码如下:
var g = $("#txt1").ligergettextboxmanager ();
。 代码如下:
var g = $.ligerui.get('txt1');
。 代码如下:
//方式一
var g = $("#txt1").ligertextbox(
{
onchangevalue : function(value){alert(value);}
});
//方式二
g.bind('changevalue', function (value)
{
alert(value);
});
。 代码如下:
//这里设置文本框不能编辑
g.setdisabled();
//这里设置文本框可以编辑
g.setenabled();
。 代码如下:
$(“#grid”).ligergrid(‘setenabled');
。 代码如下:
var url = g.get(‘url');
。 代码如下:
var url = $(“#grid”).ligergrid(‘option','url');
。 代码如下:
g.set(‘url',url);
。 代码如下:
g.set({url:url});
。 代码如下:
$(“#grid”).ligergrid(‘option','url',url);
。 代码如下:
if($.ligerdefaults.grid)
{
$.ligerdefaults.grid.title = "我的表格";
}
。 代码如下:
if($.ligerdefaults.gridstring)
{
$.ligerdefaults.gridstring.loadingmessage = "loading...";
}
。 代码如下:
$.extend($.ligermethods.grid,
{
alert : function ()
{
//要注意到一点,这里的this就是ligerui对象
var rowdata = this.getselectedrow();
if (!rowdata)
alert('空');
else
alert(rowdata.customerid);
}
}
);
function show()
{
//后面就可以这样使用
var g = $(“#maingrid”).ligergrid();
g.alert();
}
如对本文有疑问, 点击进行留言回复!!
使用纯前端JavaScript实现Excel导入导出方法过程详解
微信小程序完美解决scroll-view高度自适应问题的方法
bootstrap-closable-tab可实现关闭的tab标签页插件
网友评论