第一组:姚成栋 AngularJs分页
要正确并完整地显示分页信息,一定要注意以下几个点:
1. HTML页面上不能写错,模板如下
其中容易缺的是:max-size="10"最大显示页数(当页数很多时特别实用);
2. 对应的controller中
因为在Js/models.js中有定义
也可以自己对其进行定义。
3. 如果页面上有两个以上的小模块,类似于
则pageChanged方法要改成如下:
4. 还有一个类似于分页的,就是序号
要注意的点主要是,需要应写成如下,
不能写成{{$index+1}},会出现转到第二页后序号仍从1开始的情况
5. 总结
这个分页的注意事项主要是针对我们当前使用的新模板而言的,而且是针对分页出现的一些小问题。如果出现分页数据无法出现,或者刷新之后分页出现不同的情况,可以先看看controller中是否有多个$scope.page = data.Page字段,如果不是这个问题,那应该就需要调试后台传过来的分页数据了。
第二组:徐晋 jquery对象和DOM对象的相互转换、 删除节点:remove和detach的区别、 AppCan UI基础框架
1. jquery对象和DOM对象的相互转换
-
jquery --> DOM
var ("#cr"); //jquery对象
var cr = $cr[0]; //DOM对象var ("#cr"); //jquery对象
var cr = $cr.get(0); //DOM对象
-
DOM --> jquery
- var cr = document.getElementById("cr"); //DOM对象
var (cr); //jquery对象
- var cr = document.getElementById("cr"); //DOM对象
2. 删除节点:remove和detach的区别
- .remove()方法
当某个节点用remove()方法删除后,该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。
var $li = $("ul li:eq(1)").remove();
$li.appendTo("ul");
- .detach()方法
detach()和remove()一样,也是从DOM中去掉所有匹配的元素。但需要注意的是,这个方法不会把匹配的元素从jquery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。
$("ul li").click(function(){
alert($(this).html);
})
var $li = $("ul li:eq(1)").detach();
$li.appendTo("ul");
使用detach()后appendTo,该元素所绑定的click事件仍然存在;
若使用remove()后appendTo,click事件将不复存在。
总结来说:remove()与detach()的方法区别在于元素绑定的事件与附加数据是否被失效!
3. AppCan UI基础框架
在AppCan UI架构中进行了CSS类封装
ub 元素采用弹性BOX布局
ub-rev 子元素反序排列
ub-con 在子元素中加入一个容器,用于避免内容引起子元素大小变化
对应CSS代码为position:absolute;width:100%;height:100%;
ub-ac、ub-ae 子元素垂直居中对齐和尾对齐
ub-pc、ub-pe、ub-pj 子元素水平居中对齐、尾对齐和两端对齐
ub-ver 子元素纵向排列
ub-f1、ub-f2、ub-f3、ub-f4子元素占用区域份数
UI的分辨率适配
UI 中,我们在中间件中为不同屏幕密度(单位尺寸中可显示的点数),默认定义好了字体,开发者不再需要在代码中引入ui-media.css文件,即使有新的 分辨率手机问世,也会自动适配。目前参照Andorid屏幕密度划分为低密度、普通密度、高密度、超高密度、超超高密度,分别定义字体为14px 16px 24px 32px 48px。
第三组: liger中利用 js关闭alertpage 和 Ajax 简单操作步骤
1. liger中利用 js关闭alertpage
在调用完Ajax之后想要关闭当前页面回到父页面,如果用parent.CloseAlertPage()
;
是不起作用的,可以利用以下方法:
parent.$.ligerDialog.close();
parent.$(".l-dialog,.l-window-mask").remove();
2. Ajax 简单操作步骤
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
以下是根据我实际操作过程中的个人理解,具体解释在代码的注释中供参考:
.aspx
$.ajax({
type: "post",
url: "/Action/PmAsCheckHandler.ashx",
data: {
method: "getplantid",
//Ajax引用的方法
insplantid: planTid //调ajax时需要传入的参数
},
dataType: 'text',
async: false,
//同步异步操作,false表示异步,即在页面加载完之后再执行ajax;
若是true,表示同步,即在页面加载时运行ajax;
由于ajax运行速度较快,往往在页面加载之前便完成运行,
所以在我们现在的实际运用过程中,多设置成false。
success: function(data) {
plancheckType = data; //data是用于接收执行完的Ajax返回值
}
});
.ashx.cs
public void ProcessRequest(HttpContext context) {
context.Response.ContentType = "text/plain";
string method = !string.IsNullOrEmpty(context.Request["method"]) ? context.Request["method"].ToLower() : "";
string result = "";
switch (method) { //method表示从前台传进来的方法,上面的代码只需复制即可
case "getplantid":
result = GetPlanType(context);//方法返回值
break;
}
context.Response.Write(result);
}
//下面的实际方法与我们在后台写的方法类似;需要注意的是loginUser不能直接用,需要用DB.Config.systemAdmin代替
/// <summary>
/// 通过plantid查问题类型
/// </summary>
/// <param name="context"></param>
/// <returns></returns>
public string GetPlanType(HttpContext context) {
string plantid = context.Request["insplantid"];
Model.PmAsFormulatePlan dbpafplan = DB.PmAsFormulatePlan.SelectById(DB.Config.systemAdmin, plantid.ToLong());
string planType = Model.EnumHelper.GetEnumDescription(dbpafplan.PmAsFormulateCheckType);
return planType;
}
第四组:张元一 兴趣分享
《惊魂记》(Psycho)中正对喷水莲蓬头的镜头是怎么拍出来的?
比较正式的记载,如Alfred Hitchcock and the Making of Psycho这本书中,给出的答案指解决方案是由希区柯克本人设想的,把喷头的中间孔堵住,然后将摄影机放在比较远的地方用长焦镜头拍摄,再把景别取紧一点,就让观众有一种水柱直冲镜头而去的感觉了。
另外有一种流言,例如IMDb的trivia等处,说剧组设计了一个直径6英尺(约合180cm)的巨型喷头(把道具放大,希区柯克不是没干过类似的事),然后把摄影机放底下拍来。但这种说法找不到有力的支持,有的工作人员表示不知道此事。虚假的可能性比较大。
原文抄录如下:
希区柯克还让拉塞尔想办法,设计一个主观视角镜头,以提高观众的代入感。这镜头要拍的就是,花洒喷出的水,直接冲着镜头而来。“那是个老式花洒,无法随意控制喷水方向。”场记施罗姆注意到,“所以大家都很疑惑,‘如果直接对着它拍,那又如何保证镜头不会被淋湿?’希区柯克先生解释,‘用长焦镜拍,再把花洒上面靠里的几个洞堵上,水就不会乱喷了。’用长焦镜,我们可以退得更靠后一些,水看似要打在镜头上,其实却只是从两侧喷过去了。站在边上的人倒是确实都被淋到了,但也拍到了我们需要的画面。”
第五组: 周倩宇 实现全选执行批量操作
在做页面功能时,经常会遇到需要批量执行的操作,例如:批量删除,批量发布,批量提交等。当数量少的时候可以像图中一个个勾选。
但是当数据量很大的时候,勾选单选框很费时间,这时就需要勾选全选框。然而全选框对应的那行是没有数据的,我们需要一些方法在勾选全选框的同时,排除掉全选框那一行。
也就是说,在勾选全选框执行批量操作时,在对应的执行方法中排除图中红框那一行,从序号1那一行开始获取数据。
代码举例:
先在此处给全选框所对应的那一行加个ID
<table class="tablelist" style="width: 3000px" id="tbodyID">
然后在方法中进行处理
<script>
function changeApply() {
var items = document.getElementsByName("cb");
var rows = document.getElementById("tbodyID").rows;
var count = 0;
var tid = "";
for (var i = 0; i < items.length; i++) {
//当前checkbox实现勾选
if (items[i].checked) {
var row = items[i].parentElement.parentElement.rowIndex;
var status = rows[row].cells[3].innerHTML;
if (status != "已发布" && row != 0) {
alert("请选择已发布状态的数据!");
return false;
}
count += 1;
tid += items[i].value + ','
}
}
if (count == 0) {}
else if (count != 0) {
var r = confirm("确认xx?")
if (r == true) {
openTab();
}
}
}
</script>