demo-jquery-easyui-ribbon
Version:
232 lines • 8.96 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="../jquery-easyui/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui/icon.css">
<link rel="stylesheet" type="text/css" href="../ribbon.css">
<link rel="stylesheet" type="text/css" href="../ribbon-icon.css">
<link rel="stylesheet" type="text/css" href="mapgis-ribbon-icon.css">
<script type="text/javascript" src="../jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="../jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery.ribbon.js"></script>
</head>
<body>
<div id="mapgis-ribbon"></div>
<script>
window.onload = function(){
var om_ribbon_data = {
selected:0, //默认第几个是选择的
tabs:[{
title:'开始',
groups:[{
title:'地图操作',
tools:[{
name:'om_base.zoom_in()',
text:'放大',
iconCls:'icon-zoom-in icon-large',
iconAlign:'top',
size:'large'
},{
name:'om_base.zoom_out()',
text:'缩小',
iconCls:'icon-zoom-out icon-large',
iconAlign:'top',
size:'large'
},{
name:'om_base.move()',
text:'移动',
iconCls:'icon-move icon-large',
iconAlign:'top',
size:'large'
},{
name:'om_base.update()',
text:'更新',
iconCls:'icon-update icon-large',
iconAlign:'top',
size:'large'
},{
name:'om_base.reset()',
text:'复位',
iconCls:'icon-reset icon-large',
iconAlign:'top',
size:'large'
},{
name:'om_base.zoom_extends()',
text:'全图显示',
iconCls:'icon-zoom-extends icon-large',
iconAlign:'top',
size:'large'
}]
}]
},{
title:'查询',
groups:[{
title:'基本查询',
dir:'v',
tools:[{
name:'om_query.element_query()',
text:'要素查询',
iconCls:'icon-element-query icon-small'
},{
name:'om_query.name_query()',
text:'名称查询',
iconCls:'icon-name-query icon-small'
},{
type:'menubutton',
text:'简单查询',
iconCls:'icon-select icon-small',
menuItems:[{
name:"om_query.simple_query_point()",
text:'画点查询',
iconCls:'icon-ponit-query icon-small'
},{
name:"om_query.simple_query_line()",
text:'画线查询',
iconCls:'icon-line-query icon-small'
},{
name:"om_query.simple_query_circle()",
text:'画圆查询',
iconCls:'icon-circle-query icon-small'
},{
name:"om_query.simple_query_rectangle()",
text:'拉框查询',
iconCls:'icon-rectangle-query icon-small'
},{
name:"om_query.simple_query_polygon()",
text:'多边形查询',
iconCls:'icon-polygon-query icon-small'
}]
}]
},{
title:'高级查询',
tools:[{
name:"om_func.condition_query()",
text:'条件查询',
iconCls:'icon-condition-query icon-large',
iconAlign:'top',
size:'large'
},{
text:'按行政区查询',
iconCls:'icon-district-query icon-large',
iconAlign:'top',
size:'large'
}]
}]
},{
title:'分析&量算',
groups:[{
title:'分析',
tools:[{
name:"om_analysis.profile_analysis()",
text:'剖面分析',
iconCls:'icon-profile-analysis icon-large',
iconAlign:'top',
size:'large'
},{
name:"om_analysis.path_analysis()",
text:'路径分析',
iconCls:'icon-path-analysis icon-large',
iconAlign:'top',
size:'large'
},{
name:"om_analysis.topology_analysis()",
text:'拓扑分析',
iconCls:'icon-topology-analysis icon-large',
iconAlign:'top',
size:'large'
},{
name:"om_analysis.buffer_analysis()",
text:'缓冲区分析',
iconCls:'icon-buffer-analysis icon-large',
iconAlign:'top',
size:'large'
},{
name:"om_analysis.overlay_analysis()",
text:'叠加分析',
iconCls:'icon-overlay-analysis icon-large',
iconAlign:'top',
size:'large'
},{
name:"om_analysis.clip_analysis()",
text:'裁剪分析',
iconCls:'icon-clip-analysis icon-large',
iconAlign:'top',
size:'large'
}]
},{
title:'量算',
tools:[{
name:"om_analysis.measure_length()",
text:'距离量算',
iconCls:'icon-measure-length icon-large',
iconAlign:'top',
size:'large'
},{
name:"om_analysis.measure_area()",
text:'面积量算',
iconCls:'icon-measure-area icon-large',
iconAlign:'top',
size:'large'
}]
}]
},{
title:'编辑',
groups:[{
title:'编辑',
tools:[{
name:"om_edit.add_point()",
text:'添加点要素',
iconCls:'icon-add-point icon-large',
iconAlign:'top',
size:'large'
},{
name:"om_edit.add_line()",
text:'添加线要素',
iconCls:'icon-add-line icon-large',
iconAlign:'top',
size:'large'
},{
name:"om_edit.add_polygon()",
text:'添加面要素',
iconCls:'icon-add-polygon icon-large',
iconAlign:'top',
size:'large'
}]
}]
}]
}
$('#mapgis-ribbon').ribbon({
data:om_ribbon_data,
onClick: function(name, target){
// 点击了工具
alert(name);
// eval(name);
}
}).tabs({
onSelect: function(title, index){
// 选择了tab（从0开始）
switch(index){
case 0:
om.load('om_base.js');
break;
case 1:
om.load('om_query.js');
break;
case 2:
om.load('om_analysis.js');
break;
case 3:
om.load('om_edit.js');
break;
default:
alert('未定义的tab');
break;
}
}
});
}
</script>
</body>
</html>