基于html5的APP
Knockout应用开发指南
http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html
Amaze UI
http://amazeui.org/css/utility##
director.js
http://www.cnblogs.com/Showshare/p/director-chinese-tutorial.html
requireJS
------------------------参考或相关资料--------------------------------
bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
http://www.cnblogs.com/jesse2013/p/a-sample-of-single-page-applicaton.html
CSS tricks
（响应式的模块排列）
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
二、零碎代码
Amaze UI ：主要适用于移动端的样式
knockout ：数据绑定
一.jquery：
6. 注意onclick和click的区别
$("").click(function(){})该方法会触发onclick事件，并在onclick事件执行完后执行function内部定义的方法。
二.滑动 效果的实现：
HTML 代码：
}
三.点击添加按钮，以及点击删除和修改按钮
html代码：
<span style="font-size:18px;"><!------------报 名 信 息 的 添 加 ------------------>
<div class="am-modal am-modal-prompt" tabindex="-1" id="addItem">
<div class="am-modal-dialog">
<div class="am-modal-hd">增加报名信息项</div>
<div class="am-modal-bd">
信息名称
<input type="text" id="addItemName" class="am-modal-prompt-input">
</div>
<div class="am-modal-footer">
<span class="am-modal-btn" id="addItemCancel" data-am-modal-cancel >取消</span>
<span class="am-modal-btn" id="addItemConfirm" data-am-modal-confirm >确定</span>
</div>
</div>
</div>
<!--------------- 信息项的修改删除等提示------------------>
<div class="am-modal am-modal-prompt" id="updateItem">
<div class="am-modal-dialog">
<div class="am-modal-hd">报名信息项</div>
<div class="am-modal-bd">
信息名称
<input type="text" id="updateItemName" class="am-modal-prompt-input">
</div>
<div class="am-modal-footer">
<span class="am-modal-btn" id="updateItemDel" data-am-modal-cancel >删除</span>
<span class="am-modal-btn" id="updateItemConfirm" data-am-modal-confirm >更新</span>
</div>
</div>
</div>
</div></span>
jquery代码：
/***************************-1增加信息项-******************************************/
var csu_button2=$("#csu_addbutton");
csu_button2.on("click",appearJob);
function appearJob()
{
$("#addItem").css("display","block");
$("#addItem").attr("class","am-modal am-modal-prompt am-modal-active");
}
var addItemCancel=$("#addItemCancel");
addItemCancel.on("click",cancelJob);
function cancelJob()
{
$("#addItem").css("display","none");
$("#addItemName").val("");
}
var addItemConfirm=$("#addItemConfirm");
addItemConfirm.on('click',confirmJob);
function confirmJob()
{
if($("#addItemName").val()!="")
{
$("#addItem").css("display", "none");
var contentToAppend = '<button class="am-btn am-btn-danger am-btn-xs csu-btn-fontsize3005" >';
contentToAppend += ' '+$("#addItemName").val() + ' </button> ';
$("#csu_addbutton").before(contentToAppend);
$("#addItemName").val("");
}
else
{
cancelJob();
}
}
/************************2信息项操作*********************************/
var obj;
$(document).on("click", ".button_update", function() {
// alert(1);
obj = $(this);
$("#updateItemName").val($(this).text()); //attr("value",$(this).text());
$("#updateItem").css("display", "block");
$("#updateItem").attr("class", "am-modal am-modal-prompt am-modal-active");
});
var updateItem = $("#updateItemDel");
//----删除Item
updateItem.on("click", function() {
$(obj).remove();
$("#updateItem").css("display", "none");
ViewModel3005.InfoNames.remove(function(item) {
return item.name == $(obj).text();
});
});
//----更新Item
var updateItemConfirm = $("#updateItemConfirm");
updateItemConfirm.on('click', function() {
ViewModel3005.InfoNames.remove(function(item) {
return item.name == $(obj).text();
});
$(obj).text($("#updateItemName").val());
$("#updateItem").css("display", "none");
ViewModel3005.InfoNames.push({
name: $(obj).text(),
});
});
//-------对于自动生成的标签，可用如下方法加事件！！！
/************************信息项操作*********************************/
var obj;
$(document).on("click",".csu-btn-fontsize3005",function(){
// $(this).on("click",function()
// {
obj = $(this);
$("#updateItemName").val($(this).text());//attr("value",$(this).text()); 注意attr和val的区别
$("#updateItem").css("display","block");
$("#updateItem").attr("class","am-modal am-modal-prompt am-modal-active");
var updateItem=$("#updateItemDel");
//----删除Item
updateItem.on("click",function(){
$(obj).remove();
$("#updateItem").css("display","none");
///$("#updateItemName").val("");
});
//----更新Item
var updateItemConfirm=$("#updateItemConfirm");
updateItemConfirm.on('click',function()
{
$(obj).text($("#updateItemName").val());
$("#updateItem").css("display","none");
//$("#updateItemName").attr("value","");
});
// });
});
//-------下面代码是理解ko的一个阶段，理解下面的意义就是一个进步
ViewModel3005.InfoNames.push({
name:$("#addItemName").val(),
});
等价于
$("#addItem").css("display", "none");
var contentToAppend = '<button class="am-btn am-btn-danger am-btn-xs csu-btn-fontsize-3005" >';
contentToAppend += ' '+$("#addItemName").val() + ' </button> ';
$("#csu_addbutton").before(contentToAppend);
//-------实现在图片的点击选中效果以及失选效果
HTML中的代码：
<li style="position:relative"><img class="csu-img-3004 am-thumbnail " data-bind='attr:{ src: coverModel1 }' /></li>
JS中的代码：
$(document).on("click",".csu-img-3004",function(){var str= $(this).parent().html();
var str1=$(this).parent().html()+"<span class='am-icon-check-square-o am-icon-md' style='right:0;top:0;position:absolute;'></span>";
if(str.indexOf("<span")==-1)
{
$(this).parent().html(str1);
}
else
{
str= str.substring(0,str.indexOf('<span'));
$(this).parent().html(str);
}
});
var str=$(this).parent().html();
var str1=$(this).parent().html()+"<span class='am-icon-check-square-o am-icon-md csu-label-3004' style='right:0;top:0;position:absolute;'></span>";
var li_list=$(".csu-label-3004");
for(var i=0;i<li_list.length;i++)
{
li_list[i].remove();
}
if(str.indexOf("<span")==-1)
{
$(this).parent().html(str1);
}
else
{
str=str.substring(0,str.indexOf('<span'));
$(this).parent().html(str);
}
});
三、相关技术笔记
css/knockout/jquery/Json
1.top 绝对定位时
myObservableArray.push('Some new value') 在数组末尾添加一个新项
myObservableArray.pop() 删除数组最后一个项并返回该项
myObservableArray.unshift('Some new value') 在数组头部添加一个项
myObservableArray.shift() 删除数组头部第一项并返回该项
myObservableArray.reverse() 翻转整个数组的顺序
myObservableArray.sort() 给数组排序
remove和removeAll
observableArray 添加了一些JavaScript数组默认没有但非常有用的函数：
myObservableArray.remove(someItem) 删除所有等于someItem的元素并将被删除元素作为一个数组返回
myObservableArray.remove(function(item) { return item.age < 18 }) 删除所有age属性小于18的元素并将被删除元素作为一个数组返回
myObservableArray.removeAll(['Chad', 132, undefined]) 删除所有等于'Chad', 123, or undefined的元素并将被删除元素作为一个数组
添加： ViewModel3005.InfoNames.push({
name: names[i],
});
删除：ViewModel3005.InfoNames.remove(function (item) { return item.name==$(obj).text();});
将数组的键值转变为字符串：JSON.stringify(ViewModel3005.InfoNames())；
1.onclick和click的区别
2.
jquery中text val html attr的差别
html和innerHTMl是一样的，可以获得和设置html标签+文本
如：
设置值：$("p").html("<span style='font-size:13px;color:red'>HTML标签+文本</span>");
获得值：$("p").html();
text和innerText是一样的，可以获得和设置文本
如：
设置值：$("p").text("HTML标签+文本");
获得值：$("p").text();
val和value是一样的，直接获得和设置值，比如文本框
如：
$("input").val("这是文本框的值");
$("input").val();
attr用来设置元素的各种属性，比如
赋值：$("input").attr("value","admin");
禁用：$("input").attr("disable","true");
四、------------------------------------------JSON
parse用于从一个字符串中解析出json对象,如
var str = '{"name":"huangxiaojian","age":"23"}'
结果：
JSON.parse(str)
-
age: "23"
-
name: "huangxiaojian"
-
__proto__: Object
stringify()用于从一个对象解析出字符串，如
var a = {a:1,b:2}
结果：
JSON.stringify(a)
"{"a":1,"b":2}"
语法：
JSON.stringify(value [, replacer] [, space])
-
value：是必选字段。就是你输入的对象，比如数组，类等。
-
replacer：这个是可选的。它又分为2种方式，一种是数组，第二种是方法。
情况一：replacer为数组时，通过后面的实验可以知道，它是和第一个参数value有关系的。一般来说，系列化后的结果是通过键值对来进行表示的。 所以，如果此时第二个参数的值在第一个存在，那么就以第二个参数的值做key，第一个参数的值为value进行表示，如果不存在，就忽略。
情况二：replacer为方法时，那很简单，就是说把系列化后的每一个对象（记住是每一个）传进方法里面进行处理。
-
space：就是用什么来做分隔符的。
1）如果省略的话，那么显示出来的值就没有分隔符，直接输出来 。
2）如果是一个数字的话，那么它就定义缩进几个字符，当然如果大于10 ，则默认为10，因为最大值为10。
3）如果是一些转义字符，比如“\t”，表示回车，那么它每行一个回车。
4）如果仅仅是字符串，就在每行输出值的时候把这些字符串附加上去。当然，最大长度也是10个字符。
下面用实例说明；
1）只有第一个参数的情况下
//1var student = new Object(); student.name = "Lanny"; student.age = "25"; student.location = "China"; var json = JSON.stringify(student); alert(json); //alert(student);
结果如下图：
有些人可能会怀疑JSON.stringify的作用。那假如，我们不要这个函数，而直接alert(student)，结果如下：
这次意识到JSON.stringify的作用了吧。
2）第二个参数存在，并且第二个参数还是function的时候
//2var students = new Array() ; students[0] = "onepiece"; students[1] = "naruto"; students[2] = "bleach"; var json = JSON.stringify(students,switchUpper); function switchUpper(key, value) { return value.toString().toUpperCase(); } alert(json); /*下面这种方式也可以var json = JSON.stringify(students, function (key,value) { return value.toString().toUpperCase()}); alert(json);*/
运行结果如下：
3）第二个参数存在，并且第二个参数不是function，而是数组的时候
//3var stuArr1 = new Array() ; stuArr1[0] = "onepiece"; stuArr1[1] = "naruto"; stuArr1[2] = "bleach"; var stuArr2 = new Array(); stuArr2[0] = "1"; stuArr2[1] = "2"; var json = JSON.stringify(stuArr1,stuArr2)alert(json);
运行结果如下：
第二个参数被忽略了，只是第一个参数被系列化了。
4）如果第一个参数是对象，第二个参数是数组的情况
//4var stuObj = new Object(); stuObj.id = "20122014001"; stuObj.name = "Tomy"; stuObj.age = 25; var stuArr = new Array(); stuArr[0] = "id"; stuArr[1] = "age"; stuArr[2] = "addr";//这个stuObj对象里不存在。 var json = JSON.stringify(stuObj,stuArr); //var json = JSON.stringify(stuObj,stuArr,1000); //var json = JSON.stringify(stuObj,stuArr,'\t'); //var json = JSON.stringify(stuObj,stuArr,'OK '); alert(json);
运行结果如下：
第三个参数为数字时候的输出结果：
第三个参数为转义字符\t的时候输出的结果：
第三个参数为字符串时候的输出结果：
