`
aumy2008
  • 浏览: 117933 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Struts2+Hibernate+Spring项目小结――js相关部分

    博客分类：
  • js
SpringHibernateAjaxCSSprototype
阅读更多
1、js设置表单的值？
方法一：纯js实现
<script language="JavaScript" type="text/JavaScript">
function changTempValue(value) {
document.getElementById("tempJob").value=value;
}
</script>

方法二：js＋div实现
<tr><td class="tdLabel"><label for="tempJob" class="label"> 申请职位: </label></td>
<td><div id="myDiv"><input type="text" name="tempJob" id="tempJob" value="" onkeyup="qureyJob(this.value);"></div></td></tr>
<s:select id="applierJob" label="" list="#{${jobSelectItemInfos}}"
listKey="key" listValue="value" name="jobId" emptyOption="false"
headerKey="null" headerValue="--请选择--"
onchange="changTempValue(applierJob.options[applierJob.selectedIndex].text);" />

function changTempValue(value) {
var d = $("myDiv");
d.innerHTML = "<input type=\"text\" name=\"tempJob\" id=\"tempJob\" value=\"" + value + "\" onkeyup=\"qureyJob(this.value);\">";
}

2、js获取下拉列表的值
selectName.options[index].value....
selectName.options[index].text....

如：
employeeCompany.options[employeeCompany.selectedIndex].value
applierJob.options[applierJob.selectedIndex].text

3、怎么显示和隐藏div？
onClick="JavaScript:xxxxxx.style.display='none';"
XXX.style.display = "none";  //隐藏
XXX.style.display = "block"; //XXX为div元素的id值。显示
<div id="nextInterviewDateLable" style="display:none;">  //隐藏


4、js中对中文参数进行编码规整
使用js的encodeURIComponent()函数。
如var url="findJobsByJobName.action?nameParameter="+encodeURIComponent(value);

5、js实现多选框的全选盒反选功能，提交表单时，验证多选框是否被选值
（1）全选
<a href="#" onclick="checkall(document.myform.checkboxField)">全选</a>
或者<a href="javascript:checkall(document.myform.checkboxField)" >全选</a>
//checkall为设置全选
function checkall(oj) {
for (var i = 0; i < oj.length; i++) {
oj[i].checked = true;
}
}
（2）反选
<a href="#" onclick="checkback(document.myform.checkboxField)">反选</a>
或者<a href="javascript:checkback(document.myform.checkboxField)" >反选</a>
//checkback为设置反选
function checkback(oj) {
for (var i = 0; i < oj.length; i++) {
if (oj[i].checked) {
oj[i].checked = false;
} else {
oj[i].checked = true;
}
}
}
（3）多选框是否被选值
<form action="makeMailContent.action" method="post" name="myform"
onsubmit="return check(document.myform.checkboxField);">//true提交，false不提交
//check函数检测是否选中信息
function check(oj) {
var d = false; //定义一个标志符
for (var i = 0; i < oj.length; i++) {
if (oj[i].checked) {
d = true;
}
}
if (d) {
//提交action
return true;
} else {
alert("\u8bf7\u9009\u62e9\u8981\u53d1\u90ae\u4ef6\u7684\u9762\u8bd5\u4eba\u5458\uff01");
return false;
}
}
（4）删除确认
<s:a href="%{deleteApplier}" onclick="return fCheck();">删除</s:a>
  function fCheck(){//提交确认函数
return window.confirm("确定要删除吗？");
}

6、客户端上传图片时，用js显示缩略图
<s:file name="myFile" label="上传相片" id="myFile" onchange="showphoto('myFile')"/>
<div id="photo_div">
<img width="150" height="200" src="../images/blank.JPG" id="photo_img"></img>
</div>

function showphoto(id){
var text=$(id).value;
$('photo_img').src=text;
}

7、jsp中引进js文件和css文件
方式一：
<link rel="stylesheet"
href="<%=request.getContextPath()%>/css/style.css" type="text/css" />
方式二：（优选）
<script language="JavaScript" type="text/javascript"
src="${pageContext.request.contextPath}/js/applierSelect.js"></script>

8、使用prototype.js库来简化ajax交互
参阅：prototype.js开发笔记  https://compdoc2cn.dev.java.net/prototype/html/prototype.js.cn.html

9、用ajax实现下拉列表的联动
参阅：http://aumy2008.iteye.com/blog/141529

10、使用 Ajax 技术创建 lightbox 效果、渐变效果、弹出效果和窗口
参阅：http://www.huddletogether.com/projects/lightbox2/#example
http://www.ibm.com/developerworks/cn/xml/x-ajaxxml6/index.html

11、日期输入框的选择
（1）My97日期控件  http://www.waytop.net/my97/datepicker/3.0/demo/index.htm

（2）jscalendar，国内外很多软件产品都在使用它。
是一款开源、功能強大、应用比较广泛的JS实现的日历。可以定制日期事件，定制日期链接。而且支持中文化。
官方地址：http://www.dynarch.com/projects/calendar/
演示地址：http://www.dynarch.com/demos/jscalendar/

12、页面加载时调用js，弹出操作执行状态，参数来源于页面action返回的值
<body onload="printSendResult(${sendStatus})">
分享到：
| Struts2+Hibernate+Spring项目小结――Stru ...
评论
1 楼 aumy2008 2008-08-15  
多选框是否被选值补充：
    当多选框只有一个选框时，取不到多选框对象的长度（oj.length），此时上边给出的是否选中就不完全。下边给出补充实现代码： 
         //原有部分
	for (var i = 0; i < oj.length; i++) {
		if (oj[i].checked) {
			d = true;
		}
	}
	//增加部分：对只有一个多选框情况的处理，此时checkbox.length取不到值，只能用checkbox.checked。
	if(!d){
		//alert("checkbox.length="+oj.checked);
		if(oj.checked){
			d = true;
		}
	}
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics