前端界面目前所遇难点解决方案总结
2015-09-02 10:01
633 查看
前端界面问题及解决方案总结
1.固定表头
将表头和数据列表放入两个div中去;<span style="font-size:18px;color:#FF0000;"><strong><td valign="top"></strong><!--列表垂直分布显示--></span> <!--固定表头--> <span style="color:#FF0000;"> <span style="font-size:18px;color:#FF6666;"><strong><div style="width:320px;height:30px;"></strong></span> <table width="100%" cellspacing="1" cellpadding="1" border="0" style="table-layout: fixed; "> <tbody> <tr style="background-color:#ADD8E6;" > <td align="center"> 页面ID </td> <td align="center"> 页面名 </td> <td align="center" width="20%"> <input type="checkbox" id="add_selectAll" name="add_selectAll" onchange="allCheck_add();"/> </td> </tr> </table> <span style="color:#FF0000;"><span style="font-size:24px;"></div></span> </span></span> <!--数据列表项--> <span style="color:#330000;"><div style="overflow-y:auto;width:320px;height:250px;" > <table id="edit_rightPage" width="100%" cellspacing="1" cellpadding="1" border="0" style="table-layout: fixed; "> <tbody> <s:iterator value="unavailable" status="status" var="unavailable"> <tr class="<s:if test="#status.odd">bk_data_white</s:if><s:else>bk_data_gray</s:else>"> <td height="5%"> ${i_page_id} </td> <td> ${i_page_name} </td> <td align="center"> <input type="checkbox" id="add_role" name="chkItem" /> </td> </tr> </s:iterator> </tbody> </table> </div></span> </td>
2.获取数据表格中第一列的值
/* --------------------获取可用列表的第一列i_page_id的值---------------- */ function getI_page_ids(){ var content; $("#rightPage tr").each(function(){ var firstVal=$(this).children("td:first").html()<span style="font-size:24px;"><strong>.trim()</strong></span>; if(isString(firstVal)) content +=firstVal + ","; }); /* 将获取的ids传入后台 */ $("#addForm").attr("action", "${pageContext.request.contextPath}/role_addSave.action<span style="font-size:24px;color:#FF0000;">?i_page_ids="+content</span>).submit(); } /* --------------------获取可用列表的第一列i_page_id的值---------------- */
3.编辑记录时传入当前记录的值
<a href="#" onclick="showEditUI('${i_code}','${i_flag}','${i_property1}','${i_property2}');" >编辑</a>
function showEditUI(i_code,i_flag,i_property1,i_property2){ document.getElementById("edit_i_code")<span style="font-size:24px;color:#FF0000;"><strong>.value</strong></span>=i_code; var selects = document.getElementsByName("edit_i_flag"); for (var i=0; i<selects.length; i++){ if (selects[i].value==i_flag) { selects[i].checked= true; break; } } document.getElementById("edit_i_property1").value=i_property1; document.getElementById("edit_i_property2").value=i_property2; $("font.message").empty(); var objDiv = document.getElementById("editUI"); objDiv.style.top = "0px";//设置弹出层距离上边界的距离 objDiv.style.left = "200px";//设置弹出层距离左边界的距离 objDiv.style.width = "400px";//设置弹出层的宽度 objDiv.style.height = "220px";//设置弹出层的高度 objDiv.style.visibility = "visible"; var objMask = document.getElementById("fullMask"); objMask.style.height = "600px"; objMask.style.width = "1165px"; objDiv.style.display = "block"; objMask.style.visibility = "visible"; }
注:这里要搞清楚.value和.innerHTML的使用背景
4.js做大小比较时警惕对象类型
通过js获取页面两个数字输入框的值,并对其进行大小比较。此时出来的结果可能让你迷惑不解,例如代码:假如input1中输入10,input2中输入2。10肯定是大于2的,所以上面的alert框应该弹出true,但实际上给出的是false。原因何在?对应数字10大于2是毫无疑问的,如果是作为字符串比较,那么结果刚好相反。而上述从页面获取值得到的类型是String。
如果明确是要进行数字比较,则需要显示的转化为数字,例如使用parseInt、parseFloat;还有一种方法是使用减法运算符,如:v1 – v2 > 0,此时js在运算前内部会进行类型转换。
另外由于加法运算符同时支持数字和字符串,使用这个时候也要小心。例如 a + b ,如果其中一个是字符串类型,一个是数字类型,在执行运算前会把另外一个转化为字符串类型,所以实际是进行字符串链接操作,而不是想要的算术运算。在确定是要做算术运算的情况下,对于未知类型的参数,保险的情况下还是使用parseInt进行类型转换。
5.onclick="return check()"和onclick="check()"区别
JAVASCRIPT在事件中调用函数时用return返回值实际上是对window.event.returnvalue进行设置。而该值决定了当前操作是否继续。当返回的是true时,将继续操作。
当返回是false时,将中断操作。
而直接执行时(不用return)。将不会对window.event.returnvalue进行设置
所以会默认地继续执行操作
详细说明如下:
例如:
当在 <a href="abc.htm" onclick="return add_onclick()">Open</a> 中
如果函数 add_onclick() 返回 true, 那么 页面就会打开 abc.htm
否则, (返回 false), 那么页面不会跳转到 abc.htm, 只会执行你的 add_onclick() 函数里的内容. (add_onclick函数中控制页面转到 abc.htm除外
)
而 <a href="abc.htm" onclick="add_onclick()">Open</a>
不管 add_onclick() 返回什么值, 都会在执行完 add_onclick 后打开页面 abc.htm
另外补充:
onclick事件时就相当于onclick="return true/false"
例:
function check() { if(obj.value=="" ) { window.alert("不能为空!"); obj.focus(); return false; } return true; }
调用方法返回true时才提交表单,反之则不提交,这是submit按钮
6.通过数据库生成导航菜单
function LoadMenu(){ $.ajax({ type: 'get', url:'${pageContext.request.contextPath}/homepage_getMenu.action', data:{"i_user_id":"${i_user_id}"}, datatype: "json", async: false, cache:false, success: function (data) { var j=$.parseJSON(data); var mList=j.obj; var root=document.getElementById("menu"); for(var i=0;i<mList.length;i++){ //添加一级菜单 var li=document.createElement("li"); var a=document.createElement("a"); a.href=mList[i].url; a.innerHTML=mList[i].text; if(mList[i].text!="退出") a.target="mainFrame"; li.appendChild(a); root.appendChild(li); //添加二级菜单 var submenu=mList[i].children; if(submenu!=null){ for(var k=0;k<submenu.length;k++){ var ul2=document.createElement("ul"); var li2=document.createElement("li"); var a2=document.createElement("a"); a2.href=submenu[k].url; a2.innerHTML=submenu[k].text; a2.target="mainFrame"; li2.appendChild(a2); ul2.appendChild(li2); li.appendChild(ul2); } } } }, error : function(XMLHttpRequest,textStatus,errorThrown) { alert('getMenu error!'); } }); };
7.div随着表格中的记录数的变动而变动
<span style="font-size:24px;"> .fixed_div{position:fixed;left:200px;bottom:20px;width:400px;}</span>
8.对指定table中的checkbox全选
<script src="jquery-1.6.2.min.js"></script> <input type="checkbox" id="ckAll" />check all<br /> <input type="checkbox" name="sub" />1<br /> <input type="checkbox" name="sub"/>2<br /> <input type="checkbox" name="sub"/>3<br /> <input type="checkbox" name="sub"/>4<br /> <script> $(function(){ //全选 <pre name="code" class="javascript"> $("#ckAll").click(function() { $("#rightPage input[name='sub']").prop("checked", this.checked); }); //当子项全部被选中的时候,表头项也自动被选中 $("#rightPage input[name='sub']").click(function() { var $subs = $("#rightPage input[name='sub']"); $("#ckAll").prop("checked" , $subs.length == $subs.filter(":checked").length ? true :false); });
});</script>
//1.注意ckAll为表头的id,然后jQuery的版本是最新的,采用了其中的prop方法。
//2.注意$("#rightPage input[name='sub']").prop("checked", this.checked);中的this.checked的状态,以及#rightPage为指定table的id
<pre name="code" class="javascript"> 原文链接:http://www.oschina.net/code/snippet_119416_5689
9.javascript:history.go()和History.back()的区别
原文链接:http://www.cnblogs.com/yuanyuan/archive/2010/01/12/1645297.html
相关文章推荐
- JQuery级联下拉框的实现
- jQuery的.bind()、.live()和.delegate()之间区别
- jQuery入门教程
- 在JSP页面中输出JSON格式数据
- javascript学习总结之js使用技巧
- 清晰高效的深度学习(Deep Learning)框架:Caffe
- 关于css的样式和jsp、jquery相关问题
- JS中style属性
- my97datepicker 日历在jsp中路径问题
- Node.js v0.10.31API手工-DNS
- 写好jquery的良好习惯
- JSP页面中包含文件
- 前端实现标签切换跳转
- 常规功能和模块自定义系统(cfcmms)—006Extjs的目录结构和mvvm介绍
- js中的递归函数
- div动态设置样式
- js实现获取当前时间的前几天日期
- Fedora10安装与配置Samba
- js不加alert后面的代码不工作
- jQuery的ajax报错:SyntaxError: missing ] after element list