ExtJs仿锁屏功能

来源：互联网发布：网络诈骗500 编辑：程序博客网时间：2024/05/17 23:15

利用Ext强大的功能，我们能够开发出非常好的RIA，这次在网络上参考一篇文章，用Ext库实现仿锁屏，将心得贴上……

锁定后屏幕的样式表文件。

LockScreen.css

.lock{
    top:0;
    left:0;
    position:absolute;
    background:#5e4c0f;
    FILTER:alpha(opacity=60);/*css滤镜，让背景色产生半透明效果*/
}

TestLock.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>    
    <title>屏幕锁定</title>
               <……略添加ext文件……>
        <link rel="stylesheet" type="text/css" href="../css/LockScreen.css"/>
        <script type="text/javascript" src="../js/LockScreen.js"></script>
    <script type="text/javascript">
    
    </script>
  </head>
  
  <body>
    <input type="button" id="Lock" value="Lock Screen"/> 
    <div id="screen" class="lock" style="display:none"></div>
  </body>
</html>

LockScreen.js( 具体方法，可以参见extAPI,)

Ext.onReady(function(){
    var mybutton=Ext.get("Lock");
    var screen=Ext.get("screen");
    
    mybutton.on("click",function(){
        //获得浏览器的高度与宽度 
        var screen_height=Ext.getBody().getHeight();
        var screen_width=Ext.getBody().getWidth();
        //修改样式 
        screen.setStyle("height",screen_height);
        screen.setStyle("width",screen_width);
        screen.setStyle("display","block");
        mybutton.setStyle("display","none");
        
    });
    
    //设置div中的HTML代码 
    screen.insertHtml("beforeEnd","<input type='button' style='height:30;width:80;font-size:18' id='close' value='关闭'>",false);
    var close=Ext.get("close");
    
    close.on("click",function(){
        var screen=Ext.get("screen");
        screen.setStyle("display","none");
        mybutton.setStyle("display","block");
    });
});

非常简单的实现。效果还不错。