说明 : 正在开发中
截图 :
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
var config = {
version : "1.0" ,
modules : [
{
name : "数据表" ,
id : "grid" ,
apps : [
{
id : "grid_add" ,
name : "创建数据表" ,
icon : "grid-new.png" ,
} ,
{
id : "grid_edit" ,
name : "修改数据表" ,
icon : "grid-edit.png" ,
} ,
{
id : "grid_del" ,
name : "删除数据表" ,
icon : "grid-del.png" ,
} ,
{
id : "grid_find" ,
name : "检索数据表" ,
icon : "grid-find.png" ,
}
]
} ,
{
name : "数据库" ,
id : "database" ,
apps : [
{
id : "database_add" ,
name : "创建数据库" ,
icon : "database-new.png" ,
} ,
{
id : "database_edit" ,
name : "修改数据库" ,
icon : "database-edit.png" ,
} ,
{
id : "database_del" ,
name : "删除数据库" ,
icon : "database-del.png" ,
} ,
{
id : "database_find" ,
name : "检索数据库" ,
icon : "database-find.png" ,
}
]
} ,
{
name : "操作日志" ,
id : "log" ,
apps : [
]
}
]
} ;
DMS.load(config) ;
}) ;
var DMS = function(){
var datas = [] ; // 全局数据存储器
function _render(modules){
var dmsMenu = $("<div></div>")
.addClass("dms-menu")
.appendTo("body") ;
var _ul = $("<ul></ul>").appendTo(dmsMenu) ;
for(var i=0;i<modules.length;i++){
var m = modules[i] ;
var name = m.name ;
var id = m.id ;
var apps = m.apps ;
var _li = $("<li></li>").appendTo(_ul) ;
var _a = $("<a href='#'></a>")
.html(name)
.appendTo(_li) ;
_press(_a,m,_li) ;
}
} ;
function _press(dom,m,target){
dom.click(
function(){
_execute(m,target) ;
}
) ;
} ;
function _execute(obj,target){
var _box_ = $(".box") ;
if(_box_){
_box_.remove() ;
}
var id = obj.id ;
if("grid" == id){
var apps = obj.apps ;
_box(apps,target) ;
}
else if("database" == id){
var apps = obj.apps ;
_box(apps,target) ;
}
else if("log" == id){
}
}
function _box(apps,target){
var _box_ = $("<ul></ul>")
.addClass("box")
.appendTo("body") ;
var _css = {
position : "absolute" ,
top : target.offset().top + target.height() + 10 + "px" ,
left : target.offset().left + "px" ,
display : "none"
} ;
_box_
.css(_css)
.fadeIn() ;
for(var j=0;j<apps.length;j++){
var app = apps[j] ;
var id = app.id ;
var name = app.name ;
var icon = "img/" + app.icon ;
var _li = $("<li></li>")
.html(name)
.hover(function(){
$(this).addClass("active") ;
}
,function(){
$(this).removeClass("active") ;
})
.appendTo(_box_)
.css("backgroundImage","url(" + icon + ")")
.css("backgroundRepeat","no-repeat")
.css("backgroundPosition","0px 8px") ;
}
} ;
function _bindEvent(){
$(document).click(function(e){
}) ;
} ;
function load(config){
var ver = config.version ;
var modules = config.modules ;
_render(modules) ;
_bindEvent() ;
} ;
return {
load : load
} ;
}() ;
</script>