一、x-editable组件介绍
x-editable组件是一个用于创建可编辑弹出框的插件，它支持三种风格的样式：bootstrap、Jquery UI、Jquery。大致效果如下图：
根据博主一贯的风格，这里肯定是选用第一种喽。首先还是给出开源地址吧。
x-editable开源地址：https://github.com/vitalets/x-editable
x-editable文档地址：http://vitalets.github.io/x-editable/docs.html
x-editable在线Demo：http://vitalets.github.io/x-editable/demo-bs3.html
1、x-editable初体验
首先下载基于bootstrap的源码到本地。引用相关文件。
<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script>
页面元素
复制代码代码如下:
<a href="#" id="username" data-type="text" data-title="用户名">用户名</a>
js初始化
$(function () {
$('#username').editable()
})
数据类型判断可以通过一元操作符typeof，此操作符可以判断大部分JS数据类型。也可以通过instanceof来判断。如：
var a = []
alert(typeof a)// object
alert(a instanceof Array)//return true
var a = {}；
把a定义为对象。
可以通过
a[key] = value；
进行赋值。
判断a对象的长度，可以通过：
var length=0
for(var jsObj in a){
length++
}
js对象没有length属性，不能直接获取对象个数。
取值：a[...key....]
删除数据： delete a[...key....]
以上类似于json格式的js对象。
对于此js对象不保证存放的顺序，存进去与取出来的顺序可能不一致。
要解决此问题，可以使用Array对象来处理。
使对象具有JAVA中Map的功能。
function Map() {
this.elements = new Array()
crud方法在此省略。。。。
}
this.elements.length //获取Array中的元素个数
其它方法可以参考Array对象的特性。
JS代码易于出错，调试JS代码常用firefox浏览器插件Firebug，Aptana等
