搬码资源网广告位 搬码资源网广告位

动易AJAX分页标签详细制作教程(动画版)

呈现效果:
用户点击分页后,清空容器中的数据,加载loading动画,Ajax取数据,呈现数据。
(多了个清空容器和加载动画的操作)
————————————————————
部署说明:
1.把普通标签改造为AJAX标签,只需在标签中选中“允许AJAX访问”即可。
2.将分页标签的链接加入锚点或者去除a链接应用onclick事件,防止跳转到页首。
3.引入Common.js文件(内部参数需要根据情况修改)。
4.引入AJAX页面刷新脚本(内部参数需要根据情况修改)。
5.部署完毕。
————————————————————
HTML部分:

<script type="text/javascript" src="JS/Common.js" ></script>

<div>
<span id="itemlist"> <!– 数据容器,注意ID –>
{PE.Label id="AV-21_ajax分页" Titlelen="30" page="true" pagesize="8" urlpage="true" /}
</span>
</div>

<div id="urlpage"></div> <!– 分页标签容器,注意ID –>
————————————————————
Ajax页面更新脚本:

<script type="text/javascript">

function changepage(pagenum,sourcename,spanname)
{
var x = new AjaxRequest(‘XML’,’itemlist’); //itemlist 为数据容器ID
x.labelname = sourcename;
x.currentpage = pagenum;
x.para = [‘Titlelen=30′,’page=true’,’pagesize=8′,’currentPage=’+pagenum];
//根据分页标签中的参数对这里进行修改
x.post(‘updatelabel’,’/ajax.aspx’,function(s) {
var xml = x.createXmlDom(s);
var plstr = "";
for (var i=0; i < xml.getElementsByTagName("body")[0].childNodes.length; i++)
{
plstr += xml.getElementsByTagName("body")[0].childNodes.nodeValue;
}
document.getElementById("itemlist").innerHTML = plstr;
//itemlist 为数据容器ID
updatepage(spanname,xml);
});
}
function updatepage(spanname,xml)
{
if(parseInt(xml.getElementsByTagName("total")[0].firstChild.data) > 0)
{
var x = new AjaxRequest(‘XML’);
x.labelname = spanname;
x.sourcename = sourcename;
x.total = xml.getElementsByTagName("total")[0].firstChild.data;
x.currentpage = xml.getElementsByTagName("currentpage")[0].firstChild.data;
x.pagesize = xml.getElementsByTagName("pagesize")[0].firstChild.data;
x.post(‘updatepage’,function(s) {
var xml = x.createXmlDom(s);
if(document.getElementById("urlpage") != null)
{
var plstr = "";
for (var i=0; i < xml.getElementsByTagName("body")[0].childNodes.length; i++)
{
plstr += xml.getElementsByTagName("body")[0].childNodes.nodeValue;
}
document.getElementById("urlpage").innerHTML = plstr;
//urlpage 为分页标签容器ID
}
});
}
}
(function() {
changepage(1,’AV-21_ajax分页’,’JS_基本风格’);
//根据情况修改参数
})();

</script>
——————————————————
Common.js文件(只列出需要修改的部分)

/* XMLHTTP状态显示字符 */
/* 如果其它AJAX应用受到Loading动画影响,需根据情况进行修改。 */
/* 动画的具体呈现效果请自行添加样式*/
var xml_http_building_link =
‘<div><img src="loading.gif" alt="loading" /><p>Loading Now! Please Wait…</p></div>’;
var xml_http_sending =
‘<div><img src="loading.gif" alt="loading" /><p>Loading Now! Please Wait…</p></div>’;
var xml_http_loading =
‘<div"><img src="loading.gif" alt="loading" /><p>Loading Now! Please Wait…</p></div>’;
var xml_http_data_in_processed =
‘<div><img src="loading.gif" alt="Loading" /><p>Loading Now! Please Wait…</p></div>’;
var xml_http_load_Failed =
‘<div><img src="error.gif" alt="Error" /><p>Oops!Service Error! The Code is:[err:errcode].</p><p style="color:red;font-size:14px;">Please Check It!</p></div>’;
————————————————————
Tips:
Common.js中的$和JQuery库有$冲突,建议更名。我系统中如果不更改,评论就会失败。
例如:function $ 更改为function $jq,就可以避免冲突
————————————————————

声明:
本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途,否则后果请用户自负。
本站资源来自网络收集,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
如果您喜欢该程序,请支持正版软件,得到更好的正版服务。
本文链接:https://www.abnma.com/11019.html,转载请注明出处。
如有侵权,请邮件联系我们删除处理。

0
搬码资源网广告位

评论0

请先

没有账号? 注册  忘记密码?