dede调用img图片src地址<img src="[field:litpic/]">

本文介绍织梦CMS中使用arclist标签来调用文章列表的方法,包括默认列表页调用、直接调用内容缩略图及图片地址等技巧。

默认的列表页调用

{dede:arclist row=5 orderby=pubdate type='image.' imgwidth='124' imgheight='94' typeid='11' }

               <li><a href="[field:arcurl/]">[field:image/]<span class="title">[field:title/]</span></a>

{/dede:arclist}

用arclist标签,用[field:image/] 调用图片,用[field:title/]文章标题。

直接调用当前内容的缩略图,如文章内容页里:

{dede:field name='image'/}

直接调用图片地址:

<img src="{dede:field.litpic /}">

[field:litpic /]  缩图地址 与 [field:picname /]相同
[field:picname /]  缩图地址 与[field:litpic /]相同



    <!--最新文档-->
    {dede:arclist row=14 titlelen=32 noflag='h'}
    <li><a href="[field:arcurl/]">[field:title/]</a>  </li>
	<img src="[field:litpic/]">
	
    {/dede:arclist}
    <!--//最新文档-->





<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page isELIgnored="false" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="author" content="order by dede58.com"/> <title>小米手机列表</title> <link rel="stylesheet" type="text/css" href="/css/style.css"> </head> <body> <!-- start header --> <header> <div class="top center"> <div class="left fl"> <ul> <li><a href="/index.jsp">小米商城</a></li> <li>|</li> <li><a href="">MIUI</a></li> <li>|</li> <li><a href="">米聊</a></li> <li>|</li> <li><a href="">游戏</a></li> <li>|</li> <li><a href="">多看阅读</a></li> <li>|</li> <li><a href="">云服务</a></li> <li>|</li> <li><a href="">金融</a></li> <li>|</li> <li><a href="">小米商城移动版</a></li> <li>|</li> <li><a href="">问题反馈</a></li> <li>|</li> <li><a href="">Select Region</a></li> <div class="clear"></div> </ul> </div> <div class="right fr"> <div class="gouwuche fr"><a href="">购物车</a></div> <div class="fr"> <ul> <c:if test="${user==null}"> <li><a href="/login.jsp">登录</a></li> <li>|</li> <li><a href="/register.jsp">注册</a></li> <li>|</li> <li><a href="/cart.jsp">购物车</a></li> </c:if> <c:if test="${user!=null}"> <li><img style="width: 38px; height: 38px;border-radius: 18px;margin-right: 5px" src="${user.pic}"></li> <li>|</li> <li><a href="/login.jsp">${user.username}</a></li> <li>|</li> <li><a href="/index.jsp">首页</a></li> <li>|</li> <li><a href="/cart.jsp">个人中心</a></li> </c:if> </ul> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> </header> <!--end header --> <!-- start banner_x --> <div class="banner_x center"> <a href="index.jsp"><div class="logo fl"></div></a> <a href=""><div class="ad_top fl"></div></a> <div class="nav fl"> <ul id="categoryList"> <li><a href="/list.jsp">小米手机</a></li> <li><a href="">红米</a></li> <li><a href="">平板·笔记本</a></li> <li><a href="">电视</a></li> <li><a href="">盒子·影音</a></li> <li><a href="">路由器</a></li> <li><a href="">智能硬件</a></li> <li><a href="">服务</a></li> <li><a href="">社区</a></li> </ul> </div> <div class="search fr" style="position: relative;top: -12px"> <form action="" method="post"> <div class="text fl"> <input type="text" id="shuru" class="shuru" placeholder="小米6 小米MIX现货"> </div> <div class="submit fl"> <input type="submit" id="sousou" class="sousuo" value="搜索"/> </div> <div class="clear"></div> </form> <div class="clear"></div> </div> </div> <!-- end banner_x --> <!-- start banner_y --> <!-- end banner --> <!-- start danpin --> <div class="danpin center"> <%-- <div class="biaoti center">小米手机</div>--%> <%-- <div class="main center" style="width: 1226px;height: 800px;display: flex;flex-wrap: wrap;align-content: space-around;justify-content: space-between;flex-direction: row;">--%> <%-- <c:forEach items="${goodsList}" var="goods" varStatus="status">--%> <%-- <div class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid red'">--%> <%-- <div class="sub_mingxing"><a href="/goods/goodshow?id=${goods.id}"><img src="${goods.pic}" alt=""></a></div>--%> <%-- <div class="pinpai"><a href="/goods/goodshow?id=${goods.id}">${goods.name}</a></div>--%> <%-- <div class="youhui">${goods.title}</div>--%> <%-- <div class="jiage">${goods.price}元</div>--%> <%-- </div>--%> <%-- </c:forEach>--%> <%-- <c:if test="${status.count % 5 == 0}">--%> <%-- <div class="clear"></div>--%> <%-- </c:if>--%> <%-- </div>--%> <div id="divlist" class="main center" style="width: 1226px;height: 800px;display: flex;flex-wrap: wrap;align-content: space-around;justify-content: space-between;flex-direction: row;"> </div> </div> </div> <div class="main center mb20"> <footer class="mt20 center"> <div class="mt20">小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</div> <div>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> <div>违法和不良信息举报电话:185-0130-1238,本网站所列数据,除特殊说明,所有数据均出自我司实验室测试</div> </footer> </div> <!-- end danpin --> <script> $("#sousou").click(function () { var sea = $("#shuru").val(); $.ajax({ url: "/goods/list1", type: "post", success:function (e) { } }) }) $(function () { $.ajax({ url:"/goods/lists", type:"post", success:function (e) { var lists=e.data; var html=''; for (var i=0;i<lists.length;i++){ html +="<div class=\"mingxing fl mb20\" style=\"border:2px solid #fff;width:230px;cursor:pointer;\" " + "onmouseout=\"this.style.border='2px solid #fff'\" " + "onmousemove=\"this.style.border='2px solid red'\">" + "<div class=\"sub_mingxing\"><a href=\"/goods/goodshow?id="+lists[i].id+"\" ><img src=\""+lists[i].pic+"\" alt=\"\"></a></div>" + "<div class=\"pinpai\"><a href=\"/goods/goodshow?id="+lists[i].id+"\" >"+lists[i].name+"</a></div>" + "<div class=\"youhui\">"+lists[i].title+"</div>" + "<div class=\"jiage\">"+lists[i].price+"元</div>" + "</div>"; } $("#divlist").append(html) } }) }) // $(function () { // $.ajax({ // url: "/goods/lists", // type: 'post', // success:function (e) { // var lists = e.data; // var html=''; // for ( var i = 0;i<lists.length;i++){ // html +="<div class=\"mingxing fl mb20\" style=\"border:2px solid #fff;width:230px;cursor:pointer;\" " // + "onmouseout=\"this.style.border='2px solid #fff'\" " // + "onmousemove=\"this.style.border='2px solid red'\">" // + "<div class=\"sub_mingxing\"><a href=\"/goods.jsp\"><img src=\""+lists[i].pic+"\" alt=\"\"></a></div>" // + "<div class=\"pinpai\"><a href=\"/goods.jsp\">"+lists[i].name+"</a></div>" // + "<div class=\"youhui\">"+lists[i].title+"</div>" // + "<div class=\"jiage\">"+lists[i].price+"元</div>" // + "</div>"; // // } // $("#divlist").append(html); // } // }) // }) </script> </body> </html>这里搜索怎么搞
最新发布
11-08
虽然给定引用中未直接涉及小米手机列表页面及搜索功能相关代码,但可以基于常见的JSP和JavaScript实现搜索功能的思路来阐述方法。 ### 实现思路 1. **前端页面(JSP)**:在小米手机列表页面添加搜索框,用于用户输入搜索关键词。使用JavaScript监听搜索框的输入事件,当用户输入内容时触发搜索逻辑。 2. **数据获取**:通过AJAX技术向服务器发送请求,获取包含小米手机信息的列表数据。 3. **过滤数据**:在前端使用JavaScript根据用户输入的关键词对获取的数据进行过滤,只显示包含关键词的手机信息。 4. **更新页面**:将过滤后的数据更新到页面上,展示搜索结果。 ### 示例代码 #### 前端页面(JSP) ```jsp <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米手机列表搜索</title> <script> function searchPhones() { // 获取搜索框中的关键词 const keyword = document.getElementById('searchInput').value.toLowerCase(); // 获取手机列表的所有行 const rows = document.querySelectorAll('#phoneList tbody tr'); // 遍历每一行 rows.forEach(row => { const phoneName = row.querySelector('td:nth-child(1)').textContent.toLowerCase(); // 如果行中的手机名称包含关键词,则显示该行,否则隐藏 if (phoneName.includes(keyword)) { row.style.display = ''; } else { row.style.display = 'none'; } }); } </script> </head> <body> <!-- 搜索框 --> <input type="text" id="searchInput" oninput="searchPhones()" placeholder="搜索小米手机"> <!-- 手机列表 --> <table id="phoneList"> <thead> <tr> <th>手机名称</th> <th>价格</th> </tr> </thead> <tbody> <!-- 这里可以使用JSP动态生成手机列表 --> <tr> <td>小米13</td> <td>3999元</td> </tr> <tr> <td>小米12S</td> <td>3499元</td> </tr> </tbody> </table> </body> </html> ``` ### 代码解释 1. **搜索框**:使用`<input>`标签创建搜索框,通过`oninput`事件监听用户输入,当用户输入内容时调用`searchPhones`函数。 2. **搜索函数**:`searchPhones`函数获取搜索框中的关键词,将其转换为小写。然后遍历手机列表的每一行,获取每行中手机名称的文本内容并转换为小写。如果手机名称包含关键词,则显示该行,否则隐藏该行。 3. **手机列表**:使用`<table>`标签创建手机列表,通过`<tbody>`中的`<tr>`标签动态生成手机信息。 ### 相关问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值