无需申请自动送彩金68_白菜送彩金网站大全[无需申请秒送彩金]
做最好的网站
来自 无需申请自动 2019-08-15 07:44 的文章
当前位置: 无需申请自动送彩金68 > 无需申请自动 > 正文

AJAX应用之草稿自动保存,删除多选框

相信用过Gmail的人都知道Gmail有一个草稿自动保存的功能,每过一段时间,Gmail都会自动保存邮件草稿,这样在一些突发情况下就能快速地恢复工作,免得写了半天的邮件眨眼之间就没有了。在学了AJAX之后,我也给自己的blog加上了这个功能。当然,这个应用并不只限于blog上,应该说还是比较通用的。

Bootstrap看厌了?试试Metro UI CSS吧,bootstrapmetro

(此文章同时发表在本人微信公众号“dotNET每日精华文章”,欢迎右边二维码来关注。)

题记:Bootstrap作为一款超级流行的前端框架,已经成为很多人的首选,不过有时未免有点审美疲劳。那么可以试试Metro UI CSS,一个Windows 8风格的前端框架,和Bootstrap类似,功能也更多。

Bootstrap虽然很流行,扩展也很多,但是如果你希望实现Windows 8的Metro风格的话,除了去寻找一个Bootstrap的主题外,还可以直接使用Metro UI CSS这套前端框架。

它具备通用的风格、网格布局系统、印刷排版、超过20个组件(相对于Bootstrap的同样组件功能更强大),超过300个内置图标。也有一些比较有特色的功能,比如内置Tile和Notify。还兼容AngularJS。

当然,虽说和Bootstrap类似,但还是有不兼容的地方,比如网格系统的class名称就有些不一致,使用“grid”而非“container”来作为容器,使用“cell”而非“col-*-*”来作为栅格。

它用LESS编写,同样是开源的,使用MIT许可协议,GitHub上的Fork数和Star数都不错(当然和Bootstrap是没法比,但是也不算少),更新频率还保持的很好。

安装也非常方便,可直接下载、可通过bower安装(VS 2015推荐这种方式)、可Nuget安装(VS 2013推荐这种方式)。

“阅读原文”可访问GitHub项目地址,其中可以找到演示和文档页面的地址。

原文地址:

UI CSS吧,bootstrapmetro (此文章同时发表在本人微信公众号“dotNET每日精华文章”,欢迎右边二维码来关注。) 题记...

本例是采用JSP Ajax 文本来演示多选、全选,添加、删除、更新checkbox多选框的效果

PS.为了开发的方便,我用了一个自己写的AJAX类,具体内容和下载在这里。

本例充分展现了利用JavaScript控制HTML DOM以及利用XML http 传递数据,利用JSP操作文本的效果

演示地址,我的blog

1,JavaScript 用来控制页面内容的现实与增删效果;
2,JSP作为后台,对文本进行读取、写入、更新等操作;
3,文本格式是用来存储数据的,数据编码UTF-8;4, 本例子在win32,Red hat Linux 9下 jdk1.5,Tomcat 5.0,Apache 2.5下调试通过,同时兼容Firefox 1.0,Opera 8.0,IE6。

仍旧以代码加注释来方式来说明怎么编写。

本例子的优点:

首先是表单填写页面,用一个ID为AutoSaveMsg的DIV来显示返回信息,并且用一个ID为Draft_AutoSave的CheckBox来确定是否进行自动保存,然后将Textarea的ID命名为message。同时为了应对多用户同时使用的需要,加上用户名,每个用户的草稿分开保存。为了说明方便,我把一些修饰性的东西去掉,这样看起来比较明了:

1,实时创建html对象,所见即所得的页面增删操作。显示速度加快,增加用户体验。
2,XML http传递数据是只是一个id或一个表单值,节省带宽。
3,本例子适合采用XML http方式,所以这个效果实用性强,可是JS/JSP代码都很简单。
4,有很多东西可以在其他项目中共用,并且解决了操作文本关于中文字符编码的问题。 (本例子在中文操作系统运行,所以选择了GBK编码,如果OS是英文的则需要另外处理,比如改编码为UTF-8,或者根据需要另外转换编码。)
5,有拖拽以及展开关闭的效果,用cookie记录了位置以及打开关闭状态,可以在某个项目里用。
6,有丰富的注释,适合初学者一起探讨。

复制代码 代码如下:

缺点

AJAX应用之草稿自动保存<br />
<!-- 用户名默认为NONAME -->
用户名:<input type="text" name="memName" id="memName" size="20" value="NONAME" />    
<!-- 在自动保存选项的onclick事件中调用自动保存状态设置函数 -->
<input onclick="SetAutoSave();" type="checkbox" id="Draft_AutoSave" value="1" checked="true"  />自动保存?<br />
内容:
<textarea id="message"></textarea><br />
<!-- AutoSaveMsg显示返回信息 -->
<div id="AutoSaveMsg"></div>
<input type="submit" value="提交内容" />  
<!-- 调用函数恢复最后保存的草稿 -->
<input type="button" onclick="AutoSaveRestore();" value="恢复最后保存的草稿" />
</div>
</div>
<!-- 将JS代码放在所有对象之后,以免在页面未加载完成时出现对象不存在的错误 -->
<!-- AJAX类 -->
<script type="text/javascript" src="ajaxrequest.js"></script>
<!-- 自动保存代码 -->
<script type="text/javascript" src="autosave.js"></script>

1,维护调试麻烦,为了这个效果是否值得这样做?如果采用普通的方式,嵌入一个iframe进来,会不会也可以。
2,代码没有更多地优化、简写,有些地方冗余。
3,交互设计方面没有好好地做,这里主要表示的是技术实现和交流。

本文由无需申请自动送彩金68发布于无需申请自动,转载请注明出处:AJAX应用之草稿自动保存,删除多选框

关键词: 2018送体验金