浏览 3060 次
|
精华帖 (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 |
| 返回顶楼 | |
