LigerUi框架+jquery+ajax無刷新留言板系統的實現

2019-11-17 01:39:37

字體：大中小

來源：轉載

供稿：網友

LigerUi框架+jquery+Ajax無刷新留言板系統的實現

前些天發布了LigerUi框架的增、刪、改代碼，一堆代碼真的也沒一張圖片。有的網友推薦上圖，所有今天把涉及到這個框架的開源的留言板共享給大家。在修改的過程中可能有些不足的地方希望大家拍磚。

因為留言板前臺展示頁基本采用ajax進行操作的，所以前臺頁面只有一個index.html頁可查看。在運行的時候請打開這個頁面，壓縮文件里面包括編譯版本和源碼，大家可以用vs調試或者IIS運行查看只要支持.net2.0就行，數據采用了 access和mssql數據兩個都可以，切換的時候請在配置文件中修改。廢話就不多說了。先看看前臺javascript主要代碼：

var pageIndex = 1; //頁索引 var where = " where 1=1";// 頁腳屬性設置 function bindPager() {    //填充分布控件信息     var pageCount = parseInt($("#lblPageCount").text()); //總頁數     if (pageCount == 0) {        document.getElementById("lblCurent").innerHTML = "0";    }    else {        if (pageIndex > pageCount) {            $("#lblCurent").text(1);        }        else {            $("#lblCurent").text(pageIndex); //當前頁         }    }    document.getElementById("first").disabled = (pageIndex == 1 || $("#lblCurent").text() == "0") ? true : false;    document.getElementById("aspx",        data: { "wherePageCount": where }, //"wherePageCount" + where,個人建議不用這種方式         async: false,        success: function (msg) {            document.getElementById("lblPageCount").innerHTML = msg;        }    });}//AJAX方法取得記錄總數 function GetTotalCount() {    $.ajax({        type: "post",        dataType: "text/html",        url: "getCount.aspx",        async: false,        cache:false,          success: function (msg) {            document.getElementById("lblToatl").innerHTML = msg;        }    });}function content(pages) {    $(function () {        $.ajax({        url: 'values.aspx',        type: 'post',        cache:false,          data: {page: pages},        error: function (e) { alert('出現未知錯誤' + e); },        success: function (data) {            $("#content").html(data);        }    });    $("#lblCurent").text(pageIndex);        GetTotalCount();        GetPageCount();        bindPager();    });}function add() {    $.ajax({        url: 'add.aspx?action=add',        type: 'post',        data: { title: $("#title").val(), contents: escape($(document.getElementsByTagName("iframe")[0].contentWindow.document.body).html()), muser: $("#muser").val() },        dataType: 'html',        error: function () { alert('出現未知錯誤'); },        success: function (data) {            if (data == "ok") {                alert('添加成功！');                content(1);                  $("#title").val("");                  $(document.getElementsByTagName("iframe")[0].contentWindow.document.body).html("");                  $("#muser").val("");            }            if (data == "erro") { alert('添加失敗'); content(1); }        }    });}$(document).ready(function () {    //第一頁按鈕click事件    $("#first").click(function () {        pageIndex = 1;        $("#lblCurent").text(1);        content(pageIndex);    });    //上一頁按鈕click事件     $("#previous").click(function () {        if (pageIndex != 1) {            pageIndex--;            $("#lblCurent").text(pageIndex);        }        content(pageIndex);    });    //下一頁按鈕click事件     $("#next").click(function () {        var pageCount = parseInt($("#lblPageCount").text());        if (pageIndex != pageCount) {            pageIndex++;            $("#lblCurent").text(pageIndex);        }        content(pageIndex);    });    //最后一頁按鈕click事件     $("#last").click(function () {        var pageCount = parseInt($("#lblPageCount").text());        pageIndex = pageCount;        content(pageIndex);    });    //獲取幻燈    $.ajax({        type: "post",        dataType: "text/html",        url: "Magiclante/Magiclantelist.ashx",        async: false,        cache: false,        success: function (msg) {            document.getElementById("focus").innerHTML = msg;        }    });    var sWidth = $("#focus").width(); //獲取焦點圖的寬度（顯示面積）    var len = $("#focus ul li").length; //獲取焦點圖個數    var index = 0;    var picTimer;    //以下代碼添加數字按鈕和按鈕后的半透明條，還有上一頁、下一頁兩個按鈕    var btn = "<div class='btnBg'></div><div class='btn'>";    for (var i = 0; i < len; i++) {        btn += "<span></span>";    }    btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";    $("#focus").append(btn);    $("#focus .btnBg").CSS("opacity", 0.5);    //為小按鈕添加鼠標滑入事件，以顯示相應的內容    $("#focus .btn span").css("opacity", 0.4).mouseenter(function () {        index = $("#focus .btn span").index(this);        showPics(index);    }).eq(0).trigger("mouseenter");    //上一頁、下一頁按鈕透明度處理    $("#focus .preNext").css("opacity", 0.2).hover(function () {        $(this).stop(true, false).animate({ "opacity": "0.5" }, 300);    }, function () {        $(this).stop(true, false).animate({ "opacity": "0.2" }, 300);    });    //上一頁按鈕    $("#focus .pre").click(function () {        index -= 1;        if (index == -1) { index = len - 1; }        showPics(index);    });    //下一頁按鈕    $("#focus .next").click(function () {        index += 1;        if (index == len) { index = 0; }        showPics(index);    });    //本例為左右滾動，即所有li元素都是在同一排向左浮動，所以這里需要計算出外圍ul元素的寬度    $("#focus ul").css("width", sWidth * (len));    //鼠標滑上焦點圖時停止自動播放，滑出時開始自動播放    $("#focus").hover(function () {        clearInterval(picTimer);    }, function () {        picTimer = setInterval(function () {            showPics(index);            index++;            if (index == len) { index = 0; }        }, 4000); //此4000代表自動播放的間隔，單位：毫秒    }).trigger("mouseleave");    //顯示圖片函數，根據接收的index值顯示相應的內容    function showPics(index) { //普通切換        var nowLeft = -index * sWidth; //根據index值計算ul元素的left值        $("#focus ul").stop(true, false).animate({ "left": nowLeft }, 300); //通過animate()調整ul元素滾動到計算出的position        //$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //為當前的按鈕切換到選中的效果        $("#focus .btn span").stop(true, false).animate({ "opacity": "0.4" }, 300).eq(index).stop(true, false).animate({ "opacity": "1" }, 300); //為當前的按鈕切換到選中的效果    }});

代碼還有很多我也就不切了，先看看圖片，效果還是不錯。

后臺圖片：