OM-UI-----omPanel-优快云博客

本文链接：https://blog.youkuaiyun.com/boloyz/article/details/8284853

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>

效果图