ExtJs仿锁屏功能

最新推荐文章于 2024-08-31 09:20:35 发布

zhangwenbo

最新推荐文章于 2024-08-31 09:20:35 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Freamwork-ExtJs 文章标签： extjs stylesheet function button ext ria

本文链接：https://blog.youkuaiyun.com/zhangwenbo/article/details/2873675

这篇博客分享了如何利用ExtJS库开发一个仿锁屏功能，详细介绍了结合样式表文件LockScreen.css来实现屏幕锁定后的视觉效果，提供了一种在富互联网应用(RIA)中增强用户体验的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用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>屏

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhangwenbo

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

如何玩转CSS链接（link）知识点？

孙叫兽的博客

07-20

1356

CSS 链接不同的链接可以有不同的样式。链接样式链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态。这四个链接状态是： a:link - 正常，未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻 a:link {color:#000000;} /* 未访问链接*/ a:visited {col

EXTJS的遮罩效果

逸雨涵梦的专栏

12-13

6999

Ext.LoadMask用于在加载数据时为元素做出类似于遮罩的效果。可以直接应用在元素上，如： var loadMarsk = new Ext.LoadMask(document.body//元素、DOM节点或id, { msg : '正在删除数据，请稍候。。。。。。', removeMask : true// 完成后移除 }); loadMarsk .show(); //显

参与评论您还未登录，请先登录后发表或查看评论

screen-lock.js:屏幕锁定功能的简单实现，但相当安全

04-07

screen-lock.js 屏幕锁定功能的简单实现，但是非常安全，因为所有DOM节点都已通过$.fn.detach提取到内存中，这意味着除非访问内存，否则无法轻松还原它。它很容易导入使用： const lock = require ( 'screen-lock' ) ; const unlock = lock ( ) ; // append a locking mask in the body // ... // hide mask and unlock after prompt unlock ( ) ; 在这里您还可以查看。 :fuel_pump: 如何贡献有一个主意吗？发现了错误？看看。 :scroll: 执照 :copyright:aleen42

ext使用入门实例

04-16

113

本文使用的是ext-2.0-beta1 版，大家可以到http://www.extjs.com自行下载，不要告诉我你找不到下载链接,呵呵. 不过本文并没有涉及到与服务器的异步交互,交互的方式小弟也还在学习中,请大家见谅。我下载的是完整的ZIP包,里面包括了帮助文档和一些例子，关于帮助文档的查看,必须使用虚拟目录的形式来查看,下面仅对tomcat服务器举例说明(也可以IIS下建立虚拟目录)： ...

Extjs 细节锁定浏览器，只能操作当前窗口

fanfan911212的专栏

07-27

414

modal : true, var updateWindow = new Ext.Window({ title : '修改人手井信息', // 窗口标题 layout : 'fit', // 设置窗口布局模式 width : 600, // 窗口宽度 height : 265, // 窗口高度 modal : true, closable : false, /

js锁屏效果

12-19

js锁屏效果，点击连接后，会弹出一框，其它地方变暗处于锁定状态。

Android框架浅析之锁屏(Keyguard)机制原理

mumushou

07-25

3979

最近终于成功的摆脱了FM收音机，迈向了新的模块：锁屏、状态栏、Launcher---姑且称之为“IDLE”小组，或许叫手机美容小组，要是能施展下周星星同学的还我漂漂拳，岂不快哉。 OK，闲话打住，咱开始正文。本文主要内容： 1、分析锁屏界面的组成； 2、基于源代码分析锁屏相关类；

extjs仿桌面系统

01-20

在"EXTJS仿桌面系统"这个项目中，我们将探讨EXTJS如何实现类似桌面系统的功能和界面效果。首先，EXTJS的组件库包含了各种各样的UI元素，如窗口（Window）、面板（Panel）、菜单（Menu）、按钮（Button）等，这些都...

java extjs 仿163邮箱源码

01-15

这个"java extjs 仿163邮箱源码"项目显然旨在模仿163邮箱的前端功能，利用这两种技术来实现一个类似的功能丰富的邮件系统。下面我们将深入探讨这两个技术以及如何在实际应用中结合它们。 **Java** Java是一种面向...

extJs仿windows桌面

06-14

extJs仿windows桌面桌面应用 Extjs桌面应用Demo

ExtJs 带清空功能的日期组件

06-01

然而，标准的ExtJs DateField并未内置清空日期的功能，这可能会在某些应用场景中造成不便。为了解决这个问题，我们需要自定义一个扩展，为日期组件添加清空日期的能力。首先，我们来了解一下ExtJs的DateField基本...

开源项目：amirarcane/lock-screen 使用指南

最新发布

gitblog_00506的博客

08-31

873

开源项目：amirarcane/lock-screen 使用指南本指南旨在帮助您理解和使用来自GitHub的amirarcane/lock-screen开源项目。请注意，实际项目细节可能有所变化，以下内容基于一般开源项目结构和常规实践进行假设，因为我无法直接访问特定的仓库详细信息。如果您正在查找具体的项目指导，请确保检查仓库的README文件或官方文档。 1. 项目目录结构及介绍由于没有直接访...

css屏幕遮罩（锁屏）

magic_xiang的博客

03-14

1815

<div class="screenLock"></div> .screenLock{ position: fixed; top: 0px; left: 0px; background: #000; width: 100%; height: 100%; z-index: 9991; opacity: 0....

Extjs常用控件的属性配置

ヾ凉秋的博客

04-28

1156

Ext.form.TimeField: 配置项： maxValue：列表中允许的最大时间 maxText：当时间大于最大值时的错误提示信息 minValue：列表中允许的最小时间 minText：当时间小于最小值时的错误提示信息 increment：两个相邻选项间的时间间隔，默认为15分钟 format：显示格式，默认为“g:i A”。一般使用“H:i:s” H：带前缀0的24小时 i：带前缀0的分钟 s：带前缀0的秒 invalidText：当时间值非法时显示的提示信息 altFormats：多个时间输入

Extjs ajax中遮罩效果

xing8831925的专栏

01-15

2440

一、使用 Ext.LoadMask(); 代码如下 var loadMarsk = new Ext.LoadMask(document.body,{ msg : '正在进行锁屏，请稍候。。。。。。', removeMask :true// 完成后移除 }); //显示遮罩 loadMarsk .show(); /

js实现一个简单的锁屏功能

09-22

9302

//********* 锁屏DIV *************************** function LockScreen(tag,title,width,height,url) { if (tag) //锁屏 { var lo