OM-UI是一个基于jQuery的前端组件库。它提供了丰富的组件。
我是用myeclipse学的,相关demo和文档的 下载地址
下载完之后进行解压缩(我直接解压缩到工作空间):
创建web项目
导入所需文件
-
在WebRoot下新建两个文件夹,分别取名为“js”,“css”
-
把解压包operamasks-ui-1.1/js 下边的jquery.min.js 和 operamasks-ui.min.js 这两个文件复制到 WebRoot/js 下边
-
把operamasks-ui-1.1/css 下边的所有文件复制到 WebRoot/css下边
-
把operamasks-ui-1.1/development-bundle/ui下边的整个lang文件夹复制到 WebRoot/js下边
-
要用editor才需要此步骤。把development-bundle/ui/editor 整个文件夹复制到WebRoot/js下边
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>一个简单的panel</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../css/default/om-default.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/operamasks-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//创建一个omPanel组建
var $panel = $("#myPanel").omPanel({
width:400,
height:200,
title:"panel示例",
collapsed:true, //面板为收起状态
collapsible:true, //显示面板可收缩按钮
closable:true, //渲染关闭按钮
//onBeforeOpen:function(event){if(window.count!=0){return false;}},
onOpen:function(event){alert("panel被打开了");}
});
$("#open").click(function(){
$panel.omPanel("open");
});
$("#setWidth").click(function(){
$panel.omPanel({width:600});
});
$("#showTitle").click(function(){
alert("标题"+$panel.omPanel("options").title);
});
$("#updateTitle").click(function(){
//$panel.omPanel({title:"新标题"});
$panel.omPanel("setTitle","新标题");
});
});
</script>
</head>
<body>
<div id="myPanel">
这是一个简单的Panel示例
</div>
<input id="open" type="button" value="打开panel"/>
<input id="setWidth" type="button" value="宽度设为600px"/>
<input id="showTitle" type="button" value="获取title"/>
<input id="updateTitle" type="button" value="更新标题"/>
</body>
</html>
效果图