在zoomla!,给模型添加一个多图片字段是存储大量图片信息的最好办法。但后台存储图片数据的方 式,从html的角度来看不怎么友好,需要用这个标签:{ZL:SplitPicUrl(图片地址数组)/} 提取, 写在<ul></ul>之间。 在一个简单的<li>里面放一个简单<img>是这个标签能为我们做的。这样可能不能满足全部的要求, 比如想要这样的代码: 每个<li>标签都有计数器式的id <li id="li_1"><img src="sa/a-001.gif"/><li> <li id="li_2"><img src="sa/a-001.gif"/><li> 或者想在<img>标签中,甚至更有创意的地方做文章形如 <li><img src="sa/a-001.gif" alt="这是图片"/><li> 除此之外,也许我并不需提取所有图片,而只需要列出例如第2到4张。 或者以上问题兼而有之。本贴的重点是: 只调用一个js函数,CreateImageList ,就解决上面全部问题。 这个函数接5个参数:容器Id,多图片字符串,想要的形式字符串,起始图片编号,结束图片编号 举例说明,有多图片字符串: 图片地址1|sa/a-001.gif$图片地址2|sa/a-002.gif$图片地址3|sa/a-003.gif$图片地址4|sa/a- 004.gif 函数需要的5个参数: var strId = 'aa'; var strImages = '图片地址1|sa/a-001.gif$图片地址2|sa/a-002.gif$图片地址3|sa/a-003.gif$ 图片地址4|sa/a-004.gif'; var strItem = '<li id="li_##"><img src="$$"/></li>'; var nFrom = 2; var nTo = 5; 调用 CreateImageList( strId, strImages, strItem, nFrom, nTo ); 这样就完成如下html代码 <ul id="aa"> <li id="li_2"><IMG src="sa/a-002.gif"></li> <li id="li_3"><IMG src="sa/a-003.gif"></li> <li id="li_4"><IMG src="sa/a-004.gif"></li> </ul> 其中<ul id="aa"></ul>是这个函数使用的基础。函数第一个参数strId为指定的容器Id,(不一定 要是ul列表),在本例中是ul的Id,"aa"。函数把多图片字符串中的每个图片编号,图片地址提取 出来,按照strItem所指定的方式处理字符串,然后写到这个容器里面去。 这里strItem = '<li id="li_##"><img src="$$"/></li>' 两个##连起来写表示每次提取图片时,这里被替换成图片编号 两个$$连起来写表示每次提取图片时,这里被替换成图片地址 于是第2张:<li id="li_2"><IMG src="sa/a-002.gif"></li> nFrom 和 nTo 就是要提取的图片编号的范围。包含nFrom而不包含nTo 2,5 就是 2,3,4张 最具有意义的地方是,这个函数的参数strItem 可以随心所欲,只需要把地址用$$表示,而编号用 ##表示 不一定要html标签,如果strItem写成这, '第##张图片地址<br/>' 最后html的效果就是: 第2张图片地址:sa/a-002.gif 第3张图片地址:sa/a-003.gif 第4张图片地址:sa/a-004.gif 用在模板里 上面有一行 var strImages = '图片地址1|sa/a-001.gif$图片地址2|sa/a-002.gif$图片地址3|sa/a-003.gif$ 图片地址4|sa/a-004.gif'; 现在既然是写模板,就用标签输出那个字段。 var strImages = '{SField sid="某模型数据源标签" FD="some_album_field"/}'; CreateImageList 的代码呢? 就这个: <SCRIPT type=text/javascript> function CreateImageList( strId, strImages, strItem, nFrom, nTo ){ document.getElementById(strId).innerHTML = strImages.replace(/图片地址(\d)\|(.*?) (\$|$)/g, function _callback(p1,p2,p3){return p2>=nFrom&&p2<nTo? strItem.replace (/##/g,p2).replace(/\$\$/g,p3):"";}); } </SCRIPT> 把它放到<head></head>之间调用即可。 附上一个测试用得完整例子: <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD> <META content="text/html; charset=utf-8" http-equiv=Content-Type> <SCRIPT type=text/javascript> function CreateImageList( strId, strImages, strItem, nFrom, nTo ) { document.getElementById(strId).innerHTML = strImages.replace(/图片地址(\d)\|(.*?) (\$|$)/g, function _callback(p1,p2,p3){return p2>=nFrom&&p2<nTo? strItem.replace (/##/g,p2).replace(/\$\$/g,p3):"";}); } </SCRIPT> </HEAD> <BODY> <UL id="aa"></ul> <!-- 上面有一个id为aa的空ul列表容器,现在把调用函数的代码写在下面 --> <script type="text/javascript"> var strImages = "图片地址1|sa/a-001.gif$图片地址2|sa/a-002.gif$图片地址3|sa/a-003.gif$ 图片地址4|sa/a-004.gif"; var strItem= '<li id="li_##"><img src="$$"/></li>'; CreateImageList( "aa", strImages, strItem, 2,5); </script> </BODY></HTML> 逐浪社区:http://bbs.zoomla.cn/showtopic-12406.aspx