浏览 3058 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2011-04-13
最后修改:2011-04-14
说明 : 正在开发中 <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>
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2011-04-13
目前只是定义好数据的基本结构以及界面的渲染,功能逐步完善 !
|
|
返回顶楼 | |
发表时间:2011-04-17
代码更新 :
<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) ; } } ; function _press(dom,m){ dom.click( function(){ _execute(m,dom) ; } ) ; } ; function _execute(obj,dom){ var id = obj.id ; if("grid" == id){ _box(obj.apps,dom) ; } else if("database" == id){ _box(obj.apps,dom) ; } else if("log" == id){ } else if("database_add" == id){ var title = dom.text() ; var dataBaseAdd = $("<div></div>") .addClass("database-add") .appendTo("body") ; var _top = parseInt(document.documentElement.clientHeight / 2 - dataBaseAdd.height() / 2) ; var _left = parseInt(document.documentElement.clientWidth / 2 - dataBaseAdd.width() / 2) ; var _css = { position : "absolute" , top : _top , left : _left , display : "none" } ; dataBaseAdd.css(_css) ; var _title = $("<div></div>") .addClass("title") .html(title) .appendTo(dataBaseAdd) ; var _div = $("<div></div>") .html("数据库名称 : ") .appendTo(dataBaseAdd) ; var _input = $("<input type='text' />").appendTo(_div) ; var _a = $("<a href='#'></a>") .html("确 定") .click(function(){ var dbName = $(".database-add input").val() ; if(dbName){ var tmp = $(".database-add") ; if(tmp){ // 清除数据库输入窗口 tmp.remove() ; } _add(id,dbName) ; } else{ alert("数据库名称不能为空!") ; } }) .appendTo(dataBaseAdd) ; dataBaseAdd.show("fast") ; } } function _box(apps,target){ var tmp = $(".box") ; if(tmp){ tmp.remove() ; } 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") ; }) .click(function(){ var tmp = $(".box") ; if(tmp){ $(".box").hide() ; } }) .appendTo(_box_) .css("backgroundImage","url(" + icon + ")") .css("backgroundRepeat","no-repeat") .css("backgroundPosition","0px 8px") ; _press(_li,app) ; } } ; function _add(id,dbName,headers){ if("database_add" == id){ var database = {} ; database.id = _getAssId() ; database.name = dbName ; database.tables = [] ; datas[datas.length] = database ; } } ; function _getAssId(){ var myString = [ "0","1","2","3","4","5","6","7","8","9","a","b", "c","d","e","f","g","h","i","j","k","l","m","n", "o","p","q","r","s","t","u","v","w","x","y","z","_" ] ; var assId = "" ; for(var i=0;i<8;i++){ var assIndex = parseInt(Math.random() * myString.length) ; assId += myString[assIndex] ; } return assId ; } function _debug(){ for(var i=0;i<datas.length;i++){ var data = datas[i] ; for(var prop in data){ alert(data[prop]) ; } } } function load(config){ var ver = config.version ; var modules = config.modules ; _render(modules) ; } ; return { load : load } ; }() ; </script> |
|
返回顶楼 | |
发表时间:2011-04-20
弱弱的问下这个会在什么情况下被应用到,它的意义在哪?
|
|
返回顶楼 | |
发表时间:2011-04-20
shulin6688 写道 弱弱的问下这个会在什么情况下被应用到,它的意义在哪? 意义真不大,还得自己写界面。还得配合写后台。还不如用phpMyadmin产品了。 |
|
返回顶楼 | |
发表时间:2011-04-20
最后修改:2011-04-20
shulin6688 写道 弱弱的问下这个会在什么情况下被应用到,它的意义在哪?
我的理解是,桌面应用,数据量比较大,需要与数据库同步,减少请求数,类似缓存吧。 欢迎拍砖在下拙作:http://www.iteye.com/topic/783537 |
|
返回顶楼 | |