开发参照 _Web前端

开发参考

body{
??background:url(<%=request.getContextPath()%>/resources/image/images/a_90.jpg) no-repeat;
?}

Example：CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a>

Example：CSS鼠标手型效果 <a href="#" style="cursor:pointer">CSS鼠标手型效果</a>
注：pointer也是小手鼠标，建议大家用pointer，因为它可以兼容多种浏览器。
Example：CSS鼠标由系统自动给出效果 <a href="#" style="cursor:auto">CSS鼠标由系统自动给出效果</a>
Example：CSS鼠标十字型效果 <a href="#" style="cursor:crosshair">CSS鼠标十字型效果</a>
Example：CSS鼠标I字型效果 <a href="#" style="cursor:text">CSS鼠标I字形效果</a>
Example：CSS鼠标等待效果 <a href="#" style="cursor:wait">CSS鼠标等待效果</a>
Example：CSS鼠标默认效果 <a href="#" style="cursor:default">CSS鼠标默认效果</a>
Example：CSS鼠标向右的箭头效果 <a href="#" style="cursor:e-resize">CSS鼠标向右的箭头效果</a>
Example：CSS鼠标向右上箭头效果 <a href="#" style="cursor:ne-resize">CSS鼠标向右上箭头效果</a>
Example：CSS鼠标向上箭头效果 <a href="#" style="cursor:n-resize">CSS鼠标向上箭头效果</a>
Example：CSS鼠标向左上箭头效果 <a href="#" style="cursor:nw-resize">CSS鼠标向左上箭头效果</a>
Example：CSS鼠标向左箭头效果 <a href="#" style="cursor:w-resize">CSS鼠标向左箭头效果</a>
Example：CSS鼠标向坐下箭头效果 <a href="#" style="cursor:sw-resize">CSS鼠标向坐下箭头效果</a>
Example：CSS鼠标向右下箭头效果 <a href="#" style="cursor:s-resize">CSS鼠标向右下箭头效果</a>

// 回调函数 2011-12-30 后台返回二维数组的形式
// 后台返回Map的数据形式
function getCity(){
??var provCode = document.getElementById("province");
??var objSelect = document.getElementById("pCity");
??// 改变选择时清楚之前的内容
??objSelect.length=1;
??DWREngine.setAsync(false);
??????objSelect.options.add(new Option(cityMap[city], city));
?????DWREngine.setAsync(true);
??for(var j=1;j<objSelect.options.length;j++){
???if(objSelect.options[j].value==oldVlaue){
????objSelect.options[j].selected=true;
???}
?}
}

if("${dateValue}".length==8){
?val = "${dateValue}".slice(0,4)+"-"+"${dateValue}".slice(4,6)+"-"+"${dateValue}".slice(6,8);
}
if("${dateValue}".length==14){
?val = "${dateValue}".slice(0,4)+"-"+"${dateValue}".slice(4,6)+"-"+"${dateValue}".slice(6,8)+" "+"${dateValue}".slice(8,10)+":"+"${dateValue}".slice(10,12)+":"+"${dateValue}".slice(12,14);
}
document.getElementById('lab_${index}').innerHTML=val;

// 单选框name必须一致,否则就成为了"多选"
<input type=radio style="" value="bank" id="bankDepositOpt" name="useWayOpt" onClick="disBankDeposit(this.value)">银行存款</input>
<input type=radio style="" value="cash" id="cashOpt" name="useWayOpt" onClick="disCash(this.value)">现金</input>

对于div，要想隐藏其中的内容，必须保证其内容是一个整体，比如里面应该包含有table标记，而不仅仅因为外层有table标签
而在div内容没有，这样的话达不到隐藏的效果

<input?? type= "image "?? border= "0 "?? align=middle?? height=20?? id=IMG1??
name= "IMG1 "?? onclick= "javascript:OnSearch() "?? disabled=true??
style= "CURSOR:?? hand "?? width=40???? src= "http://expert.csdn.net/images/top1.gif ">

对于放置在div里面的内容，比如table，当要把table隐藏时，因为div本身的间距的特殊，会使得和其他的元素有一定的间隙

对于图片的提交按钮，需要显式的在onclick属性里加上return,对于表单提交按钮submit，会自动处理，所以需要
注意两者之间的区别。

// 页面的一般性设置
.doubleHint {
??? font-size: 12px;
??? background-color: #F4F4F4;
??? border-bottom: 1px solid #1874CD;
??? border-left: 1px solid #1874CD;
??? border-right: 1px solid #1874CD;
??? padding-bottom: 1px;
??? *padding-bottom: 0px !important;
??? width: 15%;
}

var param=new Object();
param.currency=document.getElementById('currency').value;
param.remark=document.getElementById('remark').value;
param.accPeriod=document.getElementById('accPeriod').value;
var retValue=new Object();
var rowNum = parseInt(hiddenRowNum.value);
retValue=window.showModalDialog("${contextPath}/page/ftl/admin/MW/MA/MW010101_01.ftl",param,"dialogHeight=600px;dialogWidth=770px;scroll:no");
function cancel(){
??//取消，关闭窗口
??var obj=window.dialogArguments;
??obj.flag=0;
??window.returnValue=obj;
??window.close();
??return;
?}
?
document.getElementById('rdiv').style.height = (parseInt(height.substr(0,height.length-2))+40)+"px";?

table 里面套table,会因为border和间距的问题，使得内部的边框不可见,如果是依赖外围的边框
外围的border=0，那么内部的就不可见了

? <SCRIPT LANGUAGE="JAVASCRIPT">
?????function checkform(obj) {
??????if(confirm("是否确定取消操作返回至登陆界面？"))
??????window.location.href="${contextPath}/page/jsp/admin/home/welcome.jsp";
??????return false;
?????}
????? </SCRIPT>

var seq=document.createElement("label");
seq.innerHTML=rowNum+1;
seq.id="1_"+rowNum;
seq.name="seq"
var tdEle0=document.createElement("label");
tdEle0.appendChild(seq);

?
//格式化页面的数据显示
<td>${vwQ[4]?string("yyyy-MM-dd HH:mm:ss")} </td>

pDocument.forms["form1"]["currency"].setAttribute("disabled","disabled");
form1["currency"].removeAttribute("disabled");

前台params = encodeURI(encodeURI(params));
URLDecoder.decode(request.getParameter("busiOprNm"),"utf-8")
URLDecoder.decode(request.getParameter("busiOprNm"),"utf-8")

<@double.row id="bankDeposit1">
??<@double.selectParamShow label="银行所属省" id="province" name="province" param="" value="" width="150" title="" onchange="getCity()" isStar=true isFull=false />
??<@double.selectParamShow label="银行所属市" id="city" name="city" param="" value="" width="150" title="" onchange="" isStar=true isFull=false />
??
?</@double.row>
?

?function formReset(form){
??????? form.reset();
??????? return false;
??? }
???
??? ??function showMainInsure(){
????var flag = $("select[name=relInsure]").val();
????if("0"==flag ||""==flag){
?????$("#mainInsuer").css('display','none');?
????}else if("1"==flag){
?????$("#mainInsuer").css('display','block');?
????}
????
???}

$("#NPAYLEVL").attr("disabled","disabled");
$("#grpAppNo").focus();
$("#NPAYLEVL").val(dataArr[1]);//空是取值，有值就是设值

$.ajax({
url:"jsontest/gainUserInfo.action",
type:"POST",
data:params,
dataType:"json",
success: function(data) {
//清空显示层中的数据
$("#message").html("");
//为显示层添加获取到的数据
//获取对象的数据用data.userInfo.属性
$("#message").append("<div><font color='red'>用户ID："+data.userInfo.userId+"</font></div>")
.append("<div><font color='red'>用户名："+data.userInfo.userName+"</font></div>")
.append("<div><font color='red'>密码："+data.userInfo.password+"</font></div>")
}
});

$("#beneInfo").css('display','none');

????//动态添加行
????$("#add").click(function(){
????count++;
????var newDiv="<tr id='tr"+count+"'>"
??????? +"<td><input type='text' id='name_ben"+count+"' readonly name='name_ben"+count+"' size=20/></td>"+
???????? "<td><select id='docType_"+count+"' name='name_ben"+count+"' onchange='getBeneInfo(this.id)'></select></td>"+
???????? "<td><input type='text' id='docCode_"+count+"' name='name_ben"+count+"' onblur='getBeneInfo(this.id)' size=32/></td>"+
???????? "<td><input type='text' id='beneOrder"+count+"' name='name_ben"+count+"' size=10/></td>"+
???????? "<td><input type='text' id='benePart"+count+"' name='name_ben"+count+"' size=10/></td>"+
???????? "<td><select id='rel_"+count+"' name='name_ben"+count+"' onchange=''></select></td>"+
???????? "</tr>";
?????$("#title").after(newDiv);
?????$("#beneNum").val(count);
???
?????//受益人证件类型添加
?????$("select[name=maindoctype] option").each(function(){
??????var currVal = $(this).val();
??????if(currVal!=""){
???????var text = $(this).text();
???????$("<option value="+currVal+">"+text+"</option>").appendTo($("#docType_"+count));
??????}
?????})
?????//受益人与投保人关系添加
?????$("select[name=mainRelInsure] option").each(function(){
??????var currVal = $(this).val();
??????if(currVal!=""){
???????var text = $(this).text();
???????$("<option value="+currVal+">"+currVal+" "+text+"</option>").appendTo($("#rel_"+count));
??????}
?????})
????})
????//动态删除行
????$("#del").click(function(){
?????//$("#zeng tr").empty();//清空id为zeng的table下的所有tr
?????
?????// $("#zeng tr:not(:first)").empty();
?????
?????$("[id='tr"+count+"']").empty();//当count值是2时，删除的数据就是id=tr2的数据
?????
?????count--;
?????$("#beneNum").val(count);
????})
????
???})
???
???
?? window.showModalDialog("${contextPath}/OtherItemAction.do?action=queryOtherItem&param=o"+params,document,
"dialogHeight=700px;dialogWidth=770px;scroll=no;resizable=yes;");
??
跳转后的页面可以这样使用传递过来的document参数
var pDocument = window.dialogArguments;
var pTbcontent = pDocument.getElementById("tbcontent");tbcontent是父页面的id标识
var addRow = pTbcontent.rows;
var itemFlag = addRow[0].cells[11].innerText.trim();??
---------------------

button 控件没有display这一属性

<table id="maintable" width="750px" border="0" cellspacing="0" cellpadding="4">
?<thead>
??<tr>
???<td>
????全选<input type="checkbox" name="settlenor" value="" onclick="selectAll(this)"/>
???</td>
???<td>审批单据号</td>
???<td>机构</td>
???<td>科目</td>
???<td>币种</td>
???<td>金额</td>
???<td>有效余额</td>
???<td>录入日期</td>
???<td>申请人</td>
??</tr>
?</thead>
?<tbody id="t001">
??? ?<tr class="common_query_table" onmouseover="javascript: omover(this);" onmouseout="javascript: omout(this);">
???<td>
????<input type="checkbox" name="settlenor" value="${dto[0]}◎${dto[1]}"/>
???</td>
??????<td>${dto[2]} </td>
???// 这里的td的内容不会显示在页面上，但是可以隐藏一些值
???<td style="display:none">${dto[3]} </td>
???<td>${dto[4]} </td>
???<td>${dto[5]} </td>
???<td>${dto[6]} </td>
???<td>${dto[7]} </td>
???<td>${dto[8]} </td>
???
???<td style="display:none">${dto[9]} </td>
???
???<td style="display:none">${dto[10]} </td>
??</tr>
?</tbody>
?</table>
?
function selectAll(settlenor0) {
??// settlenor0表示的是标题上的复选按钮
??var settlenors = queryForm["settlenor"];
??if(settlenor0.checked == true) {//如果被选中
???for(var i=1;i<settlenors.length;i++) {
????settlenors[i].checked = true;
???}
??} else {
???for(var i=1;i<settlenors.length;i++) {
????settlenors[i].checked = false;
???}
??}
?}
?
var selectTr = settlenors[i].parentNode.parentNode;// 处于td里面的checkbox
????// 获得选中行里所有td的内容 ,得到的是一个数组
????var selectCells = selectTr.cells;
????// 在父页面的tbody里插入一行
????row = pTbcontent.insertRow();
????// td里面的文本内容需要通过innerText来获得
????var settle = selectCells[1].innerText;
????var pSettle = pDocument.getElementById(settle);
????// 防止重复添加记录
????if(pSettle != null) {
?????continue;
????}

????// 插入的td自动补齐
????cell = row.insertCell();
????cell.innerHTML = "<a name=\"seqId\" class=\"textShow\" size=\"10\" id=\""+settle+"\" href=\"###\" onclick=\"showOtherItemDtl('"+selectCells[1].innerText+"')\">"
????+ selectCells[1].innerText + "<\/a>";
????
????cell = row.insertCell();
????cell.innerHTML = selectCells[2].innerText;
????
????cell = row.insertCell();
????cell.innerText = selectCells[3].innerText;

如果cell里面有其他控件，如input=button等，获取时如
var zfAmt = payCells[8].childNodes[0].value.trim();即要获得控件对象
若cell只有text，则直接可以取值

<table id="maintable" width="100%" border="0" cellspacing="0" cellpadding="4">
??<thead>
???<tr>
??????</tr>
??</thead>
??<tbody id="tbcontent">
??</tbody>
?function delRow(obj){
??var trNode = obj.parentNode.parentNode;
??var currTrValue = obj.parentNode.parentNode.cells[8].childNodes[0].value;
??(tempAmt*document.getElementById("rate").value).toFixed(2);
??tbcontent.deleteRow(trNode.sectionRowIndex);//当前行的索引，从0开始
??}

var params1="verifType="+verifType+"&paramValue="+params
$.post("${contextPath}/OtherItemAction.do?action=otherItemVerSave",params1,function(data){
后台可以像通过getParameter（）方法一样来获得参数

DWREngine.setAsync(false);是否设置同步无效 false 表示是同步

DWREngine.setAsync(false);
??FileNetUtil.getBranchBank(bankCode.value,cityCode.value,function(branchBankMap){
???if(branchBankMap!=null){
???// 返回的是map形式，循环的就是里面的key
????for(var branchBank in branchBankMap){
?????// option(text,value)
?????objSelect.options.add(new Option(branchBankMap[branchBank],branchBank));
????}
???}
??});
??DWREngine.setAsync(true);