月归档：十一月 2009

如题：本来是可以用ajaxtools控件来实现，但是感觉效果不是很好，而且效率太低，所以就写了一个代码如下

js代码：

function showname()//弹出所需模块
{
var show=document.getElementById("shown");
show.style.display="";
document.getElementById("shown").style.top="20px";
document.getElementById("shown").style.left="20px";
suoding();

}
function suoding()//锁定界面

{
var sWidth,sHeight;
sWidth=document.documentElement.clientWidth //当前浏览器内部宽度
sHeight=document.documentElement.clientHeight
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject)//判断ie，如果是7以下版本，采用屏幕的宽度和高度，会导致显示结果有一点滚动条
{
Sys.ie = ua.match(/msie ([\d.]+)/)[1]
if(Sys.ie<7)
{
sWidth=screen.width;//显示器宽度，和上面的宽度有一定的出入
sHeight=screen.height;
}
}
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#cccccc";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,
opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "50";
document.body.appendChild(bgObj);
}
function closename()//关闭
{
document.getElementById("shown").style.display="none";
var bg=document.getElementById("bgDiv");
if (bg!=null) {//排除有些浏览器不能取到动态div的情况
document.body.removeChild(bg);
}

}

html代码：

<div style=”width:1000px;height:300px;background-color:blue”> <input type=”button” value=”点击” onclick=”alert(‘adfadsfd’)”></input></div>
<div style=”position:absolute”>
<a href=”#” onclick=”showname()”  >显示姓名</a>
<div id=”shown” style=”width:300px;height:200px;background-color:gray; z-index:100; position:absolute;display:none;”><a href=”#” onclick=”closename()”  >关闭</a>
</div>
<div style=”background-color:red;width:100px;height:100px;”></div>
</div>

为了让项目给人的感觉稳重，美观，便于统一编程管理，准备采用框架来实现后台管理模块。

一直都没有重视ext，以为有jqurey就可以解决所有的js问题了，也许是可以解决，O(∩_∩)O哈哈~，我技术水平还不到哦，不能完全的灵活的使用jquery。

ext虽然比jQuery大多了，但是同样功能也强大多了，我也只是对着网上的手册，稍微的大概的写了一个框架，能够自适应高度，根据不同的用户权限，从xml中读取数据库，显示不同的树形菜单。

不过说到底就是几个iframe组成的，只是比起传统的iframe生硬的组合，而是动态生成的iframe，好看了点，自由点高了点，还考虑了一 些iframe注入的情况。因为代码太多了，我只是把自己写的比较多的一部分拿去来，和大家分享下

Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
var Tree = Ext.tree;
var tree = new Tree.TreePanel({
el: 'west_content',
useArrows: true,
autoHeight: true,
split: true,
lines: true,
autoScroll: true,
animate: true,
enableDD: true,
border: false,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl: './ext/ext_tree_json.aspx'        })
});

// set the root node
var root = new Tree.AsyncTreeNode({
text: '影像系统管理员',
draggable: false,
id: '0'     });
tree.setRootNode(root);
// render the tree
tree.render();
root.expand();

var viewport = new Ext.Viewport({
layout: 'border',
items: [{
region: 'west',
id: 'west',
//el:'panelWest',
title: '系统菜单导航',
split: true,
width: 200,
minSize: 200,
maxSize: 400,
collapsible: true,
margins: '160 0 2 2',
cmargins: '160 5 2 2',
layout: 'fit',
layoutConfig: { activeontop: true },
defaults: { bodyStyle: 'margin:0;padding:0;' },
//iconCls:'nav',
items:
new Ext.TabPanel({
border: false,
activeTab: 0,
tabPosition: 'bottom',
items: [{
contentEl: 'west_content',
title: '影像系统后台管理',
autoScroll: true,
bodyStyle: 'padding:5px;'

}]
})
}, {
region: 'center',
el: 'center',
deferredRender: false,
margins: '160 0 2 0',
html: '<iframe id="center-iframe" width="100%" height=100%  name="main"  frameborder="0" scrolling="auto" style="border:0px none;  background-color:#ffffff; "   src="admin/articles.aspx"></iframe>',
autoScroll: true
},
{
region: 'south',
margins: '0 0 0 2',
border: false,
html: '<div>版权书写处</div>'
}
]
});

setTimeout(function() {
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({ remove: true });
}, 250)
});

注：整个框架参考了火舞狂歌-后台管理框架，直接在vs中运行，有时候会出现ie无响应的情况，但是测试在iis和火狐中正常