您的位置:首页 > Web前端 > CSS

学习ajax+css 做的一个奇偶板块例子

2008-03-21 15:47 405 查看
1,建立divblock.css




body {...}{


text-align: left;


font-family: Arial, sans-serifarial, Verdana, Helvetica;


font-size: 12px;


line-height: 1.5em;


color: black;


}




div.leftcontent {...}{


float: left;


width: 380px;


display: inline;


margin-top: 10px;


margin-bottom: 10px;


position: relative;


overflow: hidden;


border: 1px solid #a8bacd;


}




div.rightcontent {...}{


float: right;


width: 380px;


display: inline;


margin-top: 10px;


margin-bottom: 10px;


position: relative;


overflow: hidden;


border: 1px solid #a8bacd;


}




h3 {...}{


font-size: 1.2em;


line-height: 1.5em;


margin: 0 0 0.5em 0;


padding:0;


color: black;


}




h3 {...}{


text-align: center;


font-size: 12px;


font-weight: normal;


background-image: url(/InfoIssue/page/jscripts/img/bg_box_title.png);


border-bottom: 1px solid #a8bacd;


padding: 2px 0;


}




a.more {...}{


background-image: url(/InfoIssue/page/jscripts/img/icon_more.gif);


background-repeat: no-repeat;


width: 40px;


height: 10px;


text-decoration: none;


position: absolute;


bottom: 0px;


right: 4px;


line-height: 10px;


}






a.new {...}{


width: 40px;


height: 20px;


text-decoration: none;


position: absolute;


bottom: 0px;


right:40px;


line-height: 20px;


color: red;


}






img {...}{


margin-top: 5px;


margin-left: 80px;


margin-bottom: 5px;


position: relative;


}






span.date {...}{


right: 10px;


position: absolute;


}

2,建立ext.js:可以下载/*
* Ext JS Library 2.0.2
* http://extjs.com/license
*/

3,建立页面:(因为用eos所以ajax部分用的是hiddensubmit)


<html>


<HEAD>


<LINK href="/InfoIssue/page/jscripts/divblock.css" rel="stylesheet" type="text/css">


<script language="javascript" type="text/javascript" src="/InfoIssue/page/jscripts/ext.js"></script>


<script language="javascript" type="text/javascript" src="/InfoIssue/page/jscripts/divblock.js"></script>


<SCRIPT language="JavaScript" src="/fbtools/page/hiddensubmit.js" type="text/javascript"></SCRIPT>




<SCRIPT>...


Ext.namespace("DIV");




var DIV = function() ...{


var tt = new Ext.Template(


'<div>',


'<div class="{0}"><h3>{1}</h3><a class="new" href="JavaScript:onclick=send({2})">发布</a><a class="more" href="JavaScript:onclick=IntoTheme({2})"></a><div id="Ext-{6}"><img src="/InfoIssue/page/img/ajax-loader.gif"/></div></div>',


'<div class="{3}"><h3>{4}</h3><a class="new" href="JavaScript:onclick=send({5})">发布</a><a class="more" href="JavaScript:onclick=IntoTheme({5})"></a><div id="Ext-{7}"><img src="/InfoIssue/page/img/ajax-loader.gif"/></div></div>',


'<div>'


);


var t = new Ext.Template(


'<div>',


'<div class="{0}"><h3>{1}</h3><a class="new" href="JavaScript:onclick=send({2})">发布</a><a class="more" href="JavaScript:onclick=IntoTheme({2})"></a><div id="Ext-{3}"><img src="/InfoIssue/page/img/ajax-loader.gif"/></div></div>',


'<div>'


);


var tpl = new Ext.XTemplate(


'<ol>',


'<tpl for="kids">',


'<li><a href="JavaScript:onclick=IntoRebackTheme({sendtextId})">{sendtextName:this.blankFm}</a><span class="date">{sendtextCreatetime}</span></li>',


'</tpl>',


'</ol>'


);




tpl.blankFm = function(val)...{


return val;


};


var obj = null;




return ...{




init : function() ...{


tt.compile();


t.compile();


var obj = this.queryDivBlock(1);


this.commonTemplate(tt,t,obj);


},




allBlock : function() ...{


var obj = this.queryDivBlock(0);


this.commonTemplate(tt,t,obj);


},




queryDivBlock : function(isShow) ...{




var sub = new HiddenSubmit("InfoIssue.biz.bizGetDivBlockInfo");




if(isShow=="1")...{


sub.add("BlockTd/isShow",isShow);


}




if(sub.submit())




...{


return eval(sub.getProperty("str"));


}


},




queryListInfo : function(obj) ...{




for(var i=0; i<(obj.length); i++) ...{


var sub = new HiddenSubmit("InfoIssue.biz.bizGetListInfo");


sub.add("SendthemeTd/blockId/criteria/value",obj[i].blockId);


if(sub.submit())




...{


var str = "({kids : "+sub.getProperty("str")+"})";


var data = eval(str);


tpl.overwrite("Ext-"+obj[i].blockId, data);


}


}


},




commonTemplate : function(tt,t,obj) ...{


Ext.get('Ext-block').update('');


var odd = (obj.length)%2;


var i=0




for(; i<(obj.length-odd); i=i+2) ...{


tt.append('Ext-block', ['leftcontent',obj[i].blockName,obj[i].blockId,'rightcontent',obj[i+1].blockName,obj[i+1].blockId,obj[i].blockId,obj[i+1].blockId]);


}






if(odd==1)...{


t.append('Ext-block',['leftcontent',obj[i].blockName,obj[i].blockId,obj[i].blockId]);


}


this.queryListInfo(obj);


},




rightPad : function (val, size, ch) ...{


var result = new String(val);




if(!ch) ...{


ch = " ";


}




while (result.length < size) ...{


result = result + ch;


}


return result.toString();


}


};


}();






Ext.onReady(function()...{


DIV.init();


});


</SCRIPT>


</HEAD>


<BODY>


<div style="text-align:right;"><a href="javascript:DIV.allBlock();" >显示所有版块</a></div>


<div id='Ext-block'></div>


<form method="post" name="listForm" target="GeneralResult">


<input type="hidden" name="flag" />


</form>


</BODY>


</html>






<script>...




function IntoTheme(id)...{


document.listForm.target="_self";


document.listForm.action ="InfoIssue.pr.prIntoThemeInit.do?BlockTd/blockId="+id;


document.listForm.submit();


}








function IntoRebackTheme(sendtextId)...{


document.listForm.target="_self";


document.listForm.action ="InfoIssue.pr.prIntoRebackThemeInit.do?SendthemeTd/sendtextId="+sendtextId;


document.listForm.submit();


}






function send(a)...{


document.listForm.target="_self";


document.listForm.action ="InfoIssue.pr.prIntoSendTheme.do?SendthemeTd/blockId="+a;


document.listForm.submit();




}




</script>

4,InfoIssue.biz.bizGetDivBlockInfo 是取符合条件的list

构建代码:


package com.starit;


import java.text.MessageFormat;




import org.w3c.dom.*;




import com.primeton.business.bncommon.bizlet.util.BNXmlUtil;


import com.primeton.tp.core.api.BizContext;




/** *//**


* @author Administrator


* @version 1.0


* @date 2007-4-27


* @class_displayName Common


*/






public class Common ...{






/** *//**


* 转换的形式为[{......},{......},{......}.....]


* @param doc type: Document, DOM;


* @param param type: BizContext;


* @return: int ,运算逻辑返回值,如果失败返回0,成功返回1


* @throws Exception


* <p>


* ** bizlet 的显示名称 **


* @bizlet_displayName ConvertJson


* @bizlet_param passing="in" type="EOSEntityList" value="list" name="" desc=""


* @bizlet_param passing="in_out" type="field" value="str" name="" desc=""


*/


public static int ConvertJson(Document doc, BizContext param)




throws Exception ...{


Node node = (Node) param.getParaObjectAt(0);


Node str = (Node) param.getParaObjectAt(1);


StringBuffer strBuffer = new StringBuffer("[");


NodeList entityNodeList = node.getChildNodes();




for(int i=0; i<entityNodeList.getLength();i++) ...{


Node entityNode = entityNodeList.item(i);


NodeList fieldNodeList = entityNode.getChildNodes();


strBuffer.append("{");


boolean flag_1 = true;




for(int j=0;j<fieldNodeList.getLength();j++) ...{


Node fieldNode = fieldNodeList.item(j);




if(!flag_1) ...{


strBuffer.append(", ");




} else ...{


flag_1 = false;


}


strBuffer.append(fieldNode.getNodeName()+" : ""+fieldNode.getFirstChild()+""");


}


strBuffer.append("}");


if(i!=(entityNodeList.getLength()-1))




...{


strBuffer.append(", ");


}


}


strBuffer.append("]");


BNXmlUtil.setNodeValue(str, new String(strBuffer));


return 1;


}






/** *//**


* 转换的形式为[{......},{......},{......}.....]


* @param doc type: Document, DOM;


* @param param type: BizContext;


* @return: int ,运算逻辑返回值,如果失败返回0,成功返回1


* @throws Exception


* <p>


* ** bizlet 的显示名称 **


* @bizlet_displayName ConvertJson


* @bizlet_param passing="in" type="EOSEntityList" value="list" name="" desc=""


* @bizlet_param passing="in_out" type="field" value="str" name="" desc=""


*/


public static int ConvertSelectJson(Document doc, BizContext param)




throws Exception ...{


Node node = (Node) param.getParaObjectAt(0);


Node str = (Node) param.getParaObjectAt(1);


StringBuffer strBuffer = new StringBuffer("[");


NodeList entityNodeList = node.getChildNodes();




for(int i=0; i<entityNodeList.getLength();i++) ...{


Node entityNode = entityNodeList.item(i);


NodeList fieldNodeList = entityNode.getChildNodes();


strBuffer.append("{");


boolean flag_1 = true;




for(int j=0;j<fieldNodeList.getLength();j++) ...{


Node fieldNode = fieldNodeList.item(j);




if(!flag_1) ...{


strBuffer.append(", ");




} else ...{


flag_1 = false;


}


strBuffer.append("NAME : ""+fieldNode.getFirstChild()+""");


}


strBuffer.append("}");


if(i!=(entityNodeList.getLength()-1))




...{


strBuffer.append(", ");


}


}


strBuffer.append("]");


BNXmlUtil.setNodeValue(str, new String(strBuffer));


return 1;


}






/** *//**


*


* @param doc type: Document, DOM;


* @param param type: BizContext;


* @return: int ,运算逻辑返回值,如果失败返回0,成功返回1


* @throws Exception


* <p>


* ** bizlet 的显示名称 **


* @bizlet_displayName CreateSQL


* @bizlet_param passing="in_out" type="EOSEntity" value="Hidden" name="" desc=""


* @bizlet_param passing="in_out" type="EOSEntity" value="Entity" name="" desc=""


* @bizlet_param passing="in_out" type="constant" value="flag" name="" desc="表示是生成更新语句还是插入语句"


* @bizlet_param passing="in_out" type="constant" value="form_rec_id" name="" desc=""


* @bizlet_param passing="in_out" type="constant" value="field_rec_id" name="" desc=""


* @bizlet_param passing="in_out" type="EOSEntityList" value="list" name="" desc=""


*/




public static int CreateSQL(Document doc, BizContext param) throws Exception...{


Node hidden = (Node)param.getParaObjectAt(0);


Node entity = (Node)param.getParaObjectAt(1);


String flag = (String)param.getParaObjectAt(2);


String formRecID = (String)param.getParaObjectAt(3);


Node nodeList = (Node)param.getParaObjectAt(4);


//保证hidden 和 entity子节点的个数相同,获取任意一个的长度,来遍历


NodeList hiddenList = hidden.getChildNodes();


NodeList entityList = entity.getChildNodes();


Element tempNode;


Element tempNodeC = null;


Text tempNodeT;


String insertSql = "insert into ioms_common_field_rec (FIELD_VALUE,FIELD_ID,FORM_REC_ID,FIELD_REC_ID) VALUES (''{0}'',''{1}'',''{2}'',''";


String updateSql = "update ioms_common_field_rec set FIELD_VALUE=''{0}'' where FIELD_ID=''{1}'' and FORM_REC_ID=''{2}''" ;


int length = hidden.getChildNodes().getLength();


for(int i=0; i<length;i++)




...{


String temp = "";


String fieldStr = hiddenList.item(i).getFirstChild().toString();


String valueStr = "";


for(int j=0; j<length;j++)




...{


//System.out.println(hiddenList.item(i).getNodeName());


//System.out.println(entityList.item(j).getNodeName());


if(hiddenList.item(i).getNodeName()==entityList.item(j).getNodeName())




...{


if(entityList.item(j).getFirstChild()!=null)


valueStr = entityList.item(j).getFirstChild().toString();


break;


}


}




String []arr = fieldStr.split("/");


if(flag.equals("0") || flag=="0")




...{


arr[0] = valueStr;


arr[2] = formRecID;


temp = MessageFormat.format(insertSql,arr);


}


else




...{


arr[0] = valueStr;


arr[2] = formRecID;


temp = MessageFormat.format(updateSql,arr).toString();


}


tempNodeC=doc.createElement("SQL");


tempNode = doc.createElement("entity");


tempNodeT = doc.createTextNode(temp);


tempNodeC.appendChild(tempNodeT);


tempNode.appendChild(tempNodeC);


nodeList.appendChild(tempNode);


}


return 1;


}


}

5,显示效果:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: