项目的js和el总结

36 篇文章 0 订阅
17 篇文章 0 订阅

本次项目中的el表达式应用:

<div class="dbsharebuttonbox"></div>百度分享CDN引用用后分享框显示的地址
<a class="bds_more" style="margin-top: 13px;" data-cmd="more"></a><c:if></c:if>的应用
③没有href的标签需要的js触发事件onclick
<div class="share bdsharebuttonbox">
     <c:if test="${YorNCollect == 0 || empty sessionScope.user}">
         <span onclick="collectNews(1);" id="collect_1">收藏</span>
    </c:if>
    <c:if test="${YorNCollect == 1}">
         <span onclick="collectNews(2);" id="collect_2">已收藏</span>
    </c:if>
    <a class="bds_more" style="margin-top: 13px;" data-cmd="more"></a>
 </div>

关于el的拼接应用:阿狸/小猫/春天/,点击每个标签都有连接跳转

<div class="tag">
   <c:forEach items="${laberAry}" var="data1" varStatus="status">
       <span onclick="doLabelSearch('${data1}');">${data1}
        <c:if test="${!status.last}">/</c:if>
      </span>
   </c:forEach>
</div>

关于评论分页和el拼接部署

<%@ page language="java" import="java.util.*" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="str" uri="http://www.bigdata.com/jstl/string"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>


    <c:choose>
        <c:when test="${!empty page.data}">
            <ul>
                <c:forEach items="${page.data}" var="data">
                    <li>
                        <div class="headImg">
                            <img src="/images/detail.jpg" alt="">
                        </div>
                        <div class="userCont">
                            <div>${data.userId}</div>
                            <div>${data.comments }</div>
                            <div class="time">${str:showDate(data.addtime,'yyyy-MM-dd HH:mm')}</div>
                        </div>
                    </li>
                </c:forEach>
            </ul>
        </c:when>
        <c:otherwise>
        <ul><li style="text-align: center;">暂无评论~~</li></ul>
        </c:otherwise>
    </c:choose>

    <c:if test="${!empty page.data}">
        <div id="page" class="page"
            data-currentPage="${page.currentPage}"
            data-totalPage="${page.totalPage}"
            data-totalRow="${page.totalRow}"
            >
        </div>
    </c:if>                     
    <script type="text/javascript">
        function pager(){
            $("#page").pager({
                //renderTo: null,
                currentPage: $("#page").attr("data-currentPage"),
                totalPage: $("#page").attr("data-totalPage"),
                totalRow: $("#page").attr("data-totalRow"),
                navBarStyle: '',
                func: function(current){
                    loadCommentList(current);
                }
            });
        }
        //执行分页
        pager();
    </script>

关于推荐的jsp页面的拼接和推荐

<%@ page language="java" import="java.util.*" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="str" uri="http://www.bigdata.com/jstl/string"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<c:choose>
    <c:when test="${!empty related}">
        <ul>
        <c:forEach items="${related}" var="data">
            <li>
               <h2 style="text-align: left;"><a href="/nsinfo/detail/${data.id}" title="${str:replaceSignString(data.title,'#','#','') }">${str:replaceSignString(data.title,'#','#','')}</a></h2>
                <p>
                    <a href="/nsinfo/detail/${data.id}" title="${data.artabstract }" >${str:subString(data.artabstract,175,'...') }</a>
                </p>

                <c:if test="${!empty data.pic }">
                     <a class="rec-img" href="/nsinfo/detail/${data.id}"><img src="${data.pic }" alt="" ></a>            
                </c:if>

                <div class="from">
                     <span>来自:${data.pubsource }</span>
                     <span>${str:fmtLongToDate(data.createtime,'yyyy-MM-dd')}</span>
                </div>
            </li>
        </c:forEach>
        </ul>
    </c:when>
    <c:otherwise>
        <ul><li style="padding-bottom:15px;text-align:center;">暂无推荐~~</li></ul>
    </c:otherwise>
</c:choose>

js总结:

<script>
    $(function(){
        $(".chn-bar li").mouseenter(function () {
                    var $sub = $(this).children('.chn-sub');
                    if ($sub.length) {
                        $sub.fadeIn(200);
                    }
                })
                .mouseleave(function () {
                    var $sub = $(this).children('.chn-sub');
                    if ($sub.length) {
                        $sub.fadeOut(200);
                    }
                });

        $('.tb-search input').focus(function(){
                    $('.tb-confirm').show();
                })
                .blur(function(){
                    $('.tb-confirm').hide();
                })
        ;
       /*  $('#collect_1').click(function () {
            $(this).hide();
            $('#collect_2').show();
        })
        $('#collect_2').click(function () {
            $(this).hide();
            $('#collect_1').show();
        }) */
    //加载评论列表和相关推荐        
       initList(true,true);
    });
    //加载顺序
   function initList(Comment,Recommendation){
             loadCommentList(1);
        if(Recommendation){
             loadRecommendationList();
        }
    }
    //评论列表函数
   function loadCommentList(currentpage){
        var news_id = $("#newsid").val();
        var param={
            currentPage:currentpage,
            newsId:news_id,
            ran:Math.random()
        };
    $("#commentWeb").load("/nsinfo/detail/commentlist", param);
    }
    //加载相关推荐
    function  loadRecommendationList(){
        var labelId=$("#labelId").val();
        var lanmuid =$("#lanmuid").val();
        var news_id = $("#newsid").val();
        var param={
            channelId:lanmuid,
            label:labelId,
            newsId:news_id,
            ran:Math.random()
        };
        $("#recommendList").load("/nsinfo/detail/recommendationlist", param);
    }
    //添加评论
    function addComment(){
        if(!checkLoginInfo()){
            alertMsg("请先登录。");
            return  false;
        }
        var comment = $("#comment").text().trim();
        var newsid = $("#newsid").val();
        if(comment==""){
            alertMsg("请输入评论内容。");
            $("#comment").focus();
            return false;
        }
        $.ajax({
            type:"post",
            url:"/nsinfo/detail/addComment",
            dataType: "text",
            async:false,
            data:{comments:comment,newsId:newsid},
            success: function(data){
                if(data==1){
                    alertMsg("评论成功");
                    $("#comment").text("");
                    loadCommentList(1);
                } else {
                    alertMsg("系统出错。");
                }
            }
        });
    }
    //检查登录
    function checkLoginInfo(){
        var result=false;
        $.ajax({
                type:"post",
                url:"/checkLoginInfo",
                dataType: "text",
                async:false,
                data:{},
                success: function(data){
                    if(data==1){
                        result=true;
                    }
                }
            });
        return result;
    }
    function collectNews(type){
        if(!checkLoginInfo()){
            alertMsg("请先登录。");
            return  false;
        }
       var news_id = $("#newsid").val();
       $.ajax({
             type:"post",
             url:"/nsinfo/detail/checkCollect",
             dataType: "json",
             async:false,
             data:{newsId:news_id,type:type},
             success: function(data){
                if(data==1){
                    alertMsg("收藏成功");
                    window.location.reload();
                }else if(data==2){
                    alertMsg("已取消收藏");
                    window.location.reload();
                } else {
                    alertMsg("系统出错。");
                }
            }
       });
    }
    //标签链接搜索
    function doLabelSearch(value){
        var keyword = value.trim();
        window.location.href = "/search?keyword="+encodeURIComponent(encodeURIComponent(keyword));
    }
</script>
//百度分享插件的js
<script>
     window._bd_share_config={
        "common":
           {"bdSnsKey":{},
            "bdText": "",
            "bdDesc": "",
            "bdMini":"2",
            "bdPic":"",
            "bdStyle":"0",
            "bdSize":"24"},
        "share":{},
        "image":
           {"viewList":["qzone","tsina","tqq","renren","weixin"],
            "viewText":"分享到:",
            "viewSize":"16"},
        "selectShare":
            {"bdContainerClass":null,
            "bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};
    with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值