1. 论坛系统升级为Xenforo,欢迎大家测试!
    排除公告

细说简单js,几句话搞定多图片字段自由分割

本帖由 huaxia112011-01-13 发布。版面名称:前端开发

  1. huaxia11

    huaxia11 New Member

    注册:
    2010-10-21
    帖子:
    61
    赞:
    0
    在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
     
  2. yangshuanghao12

    yangshuanghao12 New Member

    注册:
    2011-01-03
    帖子:
    169
    赞:
    0
    HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD>
     
  3. xiaobaobei2323

    xiaobaobei2323 New Member

    注册:
    2011-01-13
    帖子:
    167
    赞:
    0
    看了一下,还不错