侧栏列表_GJ-UI前端组件

发布时间::2018-06-01 18:40:13 已收录 阅读:334次

将将下列html代码复制粘贴在html文件的相应位置即可(可参考组件附带index.html文件中相应的注释说明位置);

媒体列表3[ul-mt3]:

HTML代码:

<div class="gj-wk">
    <div class="gj-bt">
        <h3><i class="fa fa-list-ul" aria-hidden="true"></i> 组件标题</h3>
    </div>
    <div class="gj-body ul-mt3">
        <div class="gtw-ul clear">
            <div class="gtw-img gj-left">
                <a href="javascript:(0)"><img src="images/gjui.jpg" alt=""></a>
            </div>
            <div class="gtw-body">
                <a href="javascript:(0)">
                    <h4>这里是文章的标题部分内容这里是文章的标题部分内容</h4>
                </a>
                <div class="gtw-sx">
                    <i class="fa fa-clock-o"> 2017-10-19</i>
                    <i class="fa fa-eye"> 668</i>
                </div>
            </div>
        </div>
        ...
    </div>
</div>

YzmCMS代码:

<div class="gj-wk">
    <div class="gj-bt">
        <h3><i class="fa fa-list-ul" aria-hidden="true"></i> 组件标题</h3>
    </div>
    <div class="gj-body ul-mt3">
        {m:lists field="title,thumb,url,inputtime,click" modelid="1" limit="6"}
        {loop $data $v}
        <div class="gtw-ul clear">
            <div class="gtw-img gj-left">
                <a href="{$v[url]}"><img src="{$v[thumb]}" alt="{$v[title]}"></a>
            </div>
            <div class="gtw-body">
                <a href="{$v[url]}">
                    <h4>{$v[title]}</h4>
                </a>
                <div class="gtw-sx">
                    <i class="fa fa-clock-o"> {date('Y-m-d',$v['inputtime'])}</i>
                    <i class="fa fa-eye"> {$v[click]}</i>
                </div>
            </div>
        </div>
        {/loop}
    </div>
</div>

标题列表1[gj-list1]:

HTML代码:

<div class="gj-wk">
    <div class="gj-bt">
        <h3><i class="fa fa-list-ul" aria-hidden="true"></i> 组件标题</h3>
    </div>
    <div class="gj-body gj-list1">
        <ul>
            <li>
              <a href="javascript:(0)">这里是标题部分的内容</a>
              <span>2018-04-13</span>
            </li>
            ...
        </ul>
    </div>
</div>

YzmCMS代码:

<div class="gj-wk">
    <div class="gj-bt">
        <h3><i class="fa fa-list-ul" aria-hidden="true"></i> 组件标题</h3>
    </div>
    <div class="gj-body gj-list1">
        <ul>
            {m:lists field="title,url,inputtime" modelid="1" limit="8"}
            {loop $data $v}
            <li>
              <a href="{$v[url]}">{$v[title]}</a>
              <span>{date('Y-m-d',$v['inputtime'])}</span>
            </li>
            {/loop}
        </ul>
    </div>
</div>

标题列表2[gj-list2]:

HTML代码:

<div class="gj-wk">
    <div class="gj-bt">
        <h3><i class="fa fa-list-ul" aria-hidden="true"></i> 组件标题</h3>
    </div>
    <div class="gj-body gj-list2">
        <ul>
            <li>
                <a href="javascript:(0)">栏目名称</a> | 
                <a href="javascript:(0)">这里是标题部分的内容</a>
            </li>
            ...
        </ul>
    </div>
</div>

YzmCMS代码:

<div class="gj-wk">
    <div class="gj-bt">
        <h3><i class="fa fa-list-ul" aria-hidden="true"></i> 组件标题</h3>
    </div>
    <div class="gj-body gj-list2">
        <ul>
            {m:lists field="title,url,catid" modelid="1" limit="8"}
            {loop $data $v}
            <li>
                <a href="{get_category($v['catid'], 'pclink')}">{get_catname($v['catid'])}</a> | 
                <a href="{$v[url]}">{$v[title]}</a>
            </li>
            {/loop}
        </ul>
    </div>
</div>

标题列表1+序号[gj-list1]:

HTML代码:

<div class="gj-wk">
    <div class="gj-bt">
        <h3><i class="fa fa-list-ul" aria-hidden="true"></i> 组件标题</h3>
    </div>
    <div class="gj-body gj-list1">
        <ul id="gXh">
            <li><a href="javascript:(0)">这里是文章的标题部分内容</a></li>
            ...
        </ul>
    </div>
</div>

javascript代码:

<script>
    //列表序号
    function setSN(e) {
        var ul = document.getElementById(e);
        var lis = ul.getElementsByTagName('li');
        for (var i = 0, l = lis.length; i < l; i++) {
            var tHTML = lis[i].innerHTML;
            lis[i].innerHTML = '<small>' + (i + 1) + '</small>' + tHTML;
        };
    };

    setSN('gXh');
</script>

YzmCMS代码:

<div class="gj-wk">
    <div class="gj-bt">
        <h3><i class="fa fa-list-ul" aria-hidden="true"></i> 组件标题</h3>
    </div>
    <div class="gj-body gj-list1">
        <ul id="gXh">
            {m:lists field="title,url" modelid="1" limit="8"}
            {loop $data $v}
            <li><a href="{$v[url]}">{$v[title]}</a></li>
            {/loop}
        </ul>
    </div>
</div>