Atlas中有趣且无用的功能:Sys.UI.Window类

简介:
Atlas的客户端代码中有着一个有趣的类,就是Sys.UI.Window。这个类的功能非常简单,只是对于Javascript功能的封装,用于提供各种提示框。

  众所周知,在Javascript中我们使用window.alert来显示提示框,window.confirm来显示确认框,window.prompt来显示输入框。但是就这一点点功能,Atlas也为我们作了封装。自然功能不是很大。

  看看简单的使用方式,自然会使用HTML来调用:
< atlas:ScriptManager  ID ="ScriptManager1"  runat ="server"   />
        
< input  type ="button"  value ="Show Input Box"  onclick ="showInputBox()"   />
< br  />< br  />
        
< input  type ="button"  
    value
="Show Message Box (OK Only)"  
    onclick
="showMessageBox(Sys.UI.MessageBoxStyle.OK)"   />
< br  />< br  />
        
< input  type ="button"  
    value
="Show Message Box (OK Cancel)"  
    onclick
="showMessageBox(Sys.UI.MessageBoxStyle.OKCancel)"   />
< br  />< br  />
        
< div  id ="display" ></ div >

  在Atlas中,window.alert函数被封装成了Sys.UI.Window.inputBox方法,传入提示文字和默认文字作为参数。如下:
function  showInputBox()
{
    
var  promptText  =   " 请输入文字: " ;
    
var  defaultValue  =   " 默认文字 " ;
        
    
var  input  =  Sys.UI.Window.inputBox(promptText, defaultValue);
    
if  (input  ==   null )
    {
        $(
" display " ).innerText  =   " 您没有输入内容 " ;
    }
    
else
    {
        $(
" display " ).innerText  =   " 您输入了: "   +  input;
    }    
}

  可以看到,这个方法基本上和window.prompt的使用方法如出一辙。

  与此相比,Sys.UI.Window.messageBox就把window.alert和window.confirm函数封装在了一起:
function  showMessageBox(style)
{
    
var  text  =   " 请点击按钮 " ;
    
var  result  =  Sys.UI.Window.messageBox(text, style);
    
    
if  (result  ==  Sys.UI.DialogResult.OK)
    {
        $(
" display " ).innerText  =   " 您点击了“确定” " ;
    }
    
else
    {
        $(
" display " ).innerText  =   " 您点击了“取消” ";
    }
}

  Sys.UI.Window.messageBox第一个参数为提示信息,第二个参数是Sys.UI.MessageBoxStyle枚举类型的值:OK或OKCancel。根据style的不同,Sys.UI.Window选择应该调用window.alert还是 window.confirm函数。Sys.UI.Window.messageBox函数的返回值Sys.UI.DialogResult枚举的值: OK或Cancel。

  似乎Atlas的封装,唯一的作用就是我们的代码看上更像比如C#等语言的的使用方式了。

  不过为什么要这么做?



本文转自 jeffz 51CTO博客,原文链接:http://blog.51cto.com/jeffz/60787,如需转载请自行联系原作者

相关文章
|
9月前
|
Web App开发 前端开发 JavaScript
SAP UI5 应用开发教程之八十五 - 如何用 OPA5 编写测试用例来测试用户输入文本的功能试读版
SAP UI5 应用开发教程之八十五 - 如何用 OPA5 编写测试用例来测试用户输入文本的功能试读版
38 0
|
1月前
|
前端开发
使用element-ui中的table时,当有多选又有翻页功能时,点击翻页后之前选中的数据丢失
使用element-ui中的table时,当有多选又有翻页功能时,点击翻页后之前选中的数据丢失
|
8月前
|
JavaScript
vue + element-ui + vue-clipboard2 实现文字复制粘贴功能与提示
1、在所在项目下安装插件 ```js npm install vue-clipboard2 --save ``` 2、在所在项目的index.js注入vue-clipboard2 ```js import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) ``` 3、使用 ```html <div> <el-button size="mini" type="primary" icon="el-icon-copy-document" round class="copy-btn" v-clipboard:copy="要
93 2
|
1月前
|
前端开发
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现
20 0
|
1月前
|
JSON 数据格式
element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现
element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现
26 0
|
1月前
element-ui实现表格单选的功能
element-ui实现表格单选的功能
18 0
|
1月前
|
JavaScript 数据库
vue使用element ui实现下拉列表分页的功能!!!
vue使用element ui实现下拉列表分页的功能!!!
69 0
|
8月前
|
API
SAP UI5 里一个功能的 compatibility version 是什么含义?
SAP UI5 里一个功能的 compatibility version 是什么含义?
54 0
|
6月前
|
JavaScript
Vue + Element UI 实现复制当前行数据功能(复制到新增页面组件值不能更新等问题解决)
# 1、需求 使用Vue + Element UI 实现在列表的操作栏新增一个复制按钮,复制当前行的数据可以打开新增弹窗后亦可以跳转到新增页面,本文实现为跳转到新增页面。 # 2、实现 ## 1)列表页 index.vue ```html <el-table> <!-- 其他列 --> <el-table-column label="操作" width="150"> <template slot-scope="scope"> <el-button icon="el-icon-copy-document" title="复制" @click="toCopyNew(scope
77 0
|
7月前
Element UI 重置表单功能
Element UI 重置表单功能