`
starbhhc
  • 浏览: 633959 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

EXT做一个锁屏的特效

EXTCSS浏览器框架HTML 
阅读更多
,这次要带大家用EXT做一个锁屏的特效，也就是当点击某个按钮的时候,浏览器的屏幕会被一层半透明的色块锁住。当然，这个效果用普通JS也能做。这里仅仅是让大家了解EXT框架的使用方法：

本例中仅使用到了ext-all.js文件。


1. 在此文件夹中建立一个demo文件夹，在demo文件夹中分别建立三个文件：demo.js , demo.html , demo.css


2. demo.html的代码如下，html页面的代码相对简单，容易理解：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>demo</title>

<link rel="stylesheet" type="text/css" href="demo.css">

<script type="text/javascript" src="../ext-all.js"></script>

<script type="text/javascript" src="demo.js"></script>

</head>

<body>

//按钮，给它取一个ID

<input type="button" id="myButton" value="My Button" />

//用于锁屏的层，具体的样式定义在demo.css中

//在没有点击按钮时，设置它的display属性为none,即不显示该层

<div id="screen" class="screen" style="display:none;"></div>

</body>

</html>



3. demo.css

.screen{

top:0;

left:0;

position:absolute;

background-color: #5e4c0f;

FILTER:alpha(opacity=60); /*CSS滤境，让背景色产生半透明的效果*/

}




4. demo.js代码，内含详细的解释,每个方法的具体说明请查看帮助文档


//直接使用Ext类，注意不是Ext包，具体结构请查看文档

//使用Ext类的onReady()方法，此方法用于初始化，为其它JS代码作准备

Ext.onReady(function() {



//调用Ext的get方法用于得到页面中的一个element，将会返回Element类型的对象

//与document.getElementById("")的功能相同

var myButton = Ext.get("myButton");

var screens = Ext.get("screen");



//调用Element对象(此处是myButton)的on方法，用处是单击按钮后显示锁屏层

//关于Element对象的其它更多方法见Ext包中的Element类

myButton.on("click",function(){

// Ext.getBody()得到当前浏览器对象

//getHeight(),getWidth()方法得到宽和高

var screen_height = Ext.getBody().getHeight();

var screen_width = Ext.getBody().getWidth();

//给screens设置样式属性，并让它显示出来

screens.setStyle("height",screen_height);

screens.setStyle("width",screen_width);

screens.setStyle("display","block");

});


//初始化关闭按钮，

screens.insertHtml("beforeEnd",

"<input type='button' style='height:30px;width:80px;font-size:18px;' id='closeScreenButton' value='关 闭'>",false);


//单击关闭按钮,关闭锁屏

var closeScreenButton = Ext.get("closeScreenButton");

closeScreenButton.on("click",function(){

var screens = Ext.get("screen");

screens.setStyle("display","none");

});

});



OK,锁屏和解屏的都有了，原理很简单，这只是Ext的一点点小功能，还有更强的功能，大家有兴趣可以慢慢研究，小弟在此抛砖引玉，希望大家有更好的文章分享。
分享到：
| extjs的grid 默认选中一行
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics