博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用ASP.NET Atlas开发In Place Editing输入控件
阅读量:4583 次
发布时间:2019-06-09

本文共 999 字,大约阅读时间需要 3 分钟。

作者: Dflying Chen ( )

可能有些朋友还不了解什么是In Place Editing(不知道怎么翻译),请先看一下下面的DEMO(首页过滤掉了Flash,请进入帖子观看,下面是一张截图):

inplaceediting1.JPG

上面三个输入在平时就是普通的Label,鼠标悬停在上面时会有边框出现。当用户点击这个Label时,切换到Input状态。用户输入完毕鼠标移开,又会切换回Label状态,提供了丰富的用户视觉体验,同时也节约了页面空间。该控件是我匆促之间(一个小时)完成,好多代码组织混乱,可能也会有不少Bug,仅供各位参考并请不吝指正。

InPlaceEditingInput控件有如下五个属性,当然,您可以很容易的扩充:

  1. toolTipText:该输入控件的初始文字提示。上面DEMO中的“Enter Your Name”就是制定的这个属性。
  2. toolTipTextColor:该输入控件的初始文字的颜色,默认值为#aaa。您可以看到上面DEMO中的“Enter Your Name”的颜色与用户实际输入的文字颜色不一样,稍微浅了一点。
  3. labelColor:该控件作为Label显示时的颜色,默认值为white
  4. inputBorderColor:该控件作为Input显示时的边框颜色,默认值为black
  5. inputBgColor:该控件作为Input显示时的背景颜色,默认值为#f2f2f9(淡蓝色)。

使用InPlaceEditingInput控件要注意以下几点:

  1. ScriptManager中要添加InPlaceEditingInput.js文件的引用。
  2. 作为InPlaceEditingInput控件的源DOM元素必须为input或者textarea
  3. 您应该为每个InPlaceEditingInput控件指定toolTipText属性,以带来好的用户体验。

该控件的主要开发思路为:

  1. 充分利用Atlas提供的强大的JavaScript面向对象功能,继承于Sys.UI.TextBox类。
  2. 捕获HTML的onmouseover,onmouseout,onfocus以及onblur事件,并应用相应的CSS样式。

该控件的源代码以及开头部分示例程序可以在此下载:

转载于:https://www.cnblogs.com/dflying/archive/2006/04/22/382150.html

你可能感兴趣的文章
mysql 数据库【目录】
查看>>
开发工具IDEA环境安装配置
查看>>
python3正则表达式详细用法示例
查看>>
算法笔记_086:蓝桥杯练习 9-2 文本加密(Java)
查看>>
Win8下使用Ctrl加空格来切换输入法
查看>>
ajax分页
查看>>
Java 常量池理解与总结(转摘)
查看>>
多线程编程学习笔记——线程池(三)
查看>>
从开始学编程过了半年了……
查看>>
【05月22日】预分红股息率最高排名
查看>>
Android学习总结(二)——Service基本概念和生命周期
查看>>
chr()//ord() //进制转换函数//eval()//文件函数//split()
查看>>
第一章 Java程序设计概述
查看>>
定时调动 (项目保留备份代码码)
查看>>
Leetcode-Divide Two Integers
查看>>
HTML 首页倒三角形导航块
查看>>
每天一道Java题[9]
查看>>
结对编程2——单元测试
查看>>
python 函数/列表的应用
查看>>
C#与MES
查看>>