It was released the other day LigerUi The increase of the frame 、 Delete 、 To change the code , A bunch of code really doesn't have a picture . Some netizens recommend the picture above , All the open source message boards related to this framework are shared with you today . In the process of revision, there may be some deficiencies. I hope you can make bricks .

Because the message board front display page basically uses ajax operational , So there's only one front page index.html Page to view . Please open this page while running , The compressed file includes the compiled version and the source code , You can use vs Debug or IIS Run view Just support .net2.0 Just go , The data uses access and mssql Both data are OK , Please modify it in the configuration file when switching . No more nonsense . Look at the front desk first javascript Main code :

var pageIndex = 1; // Page index 
var where = " where 1=1";
// Footers property settings
function bindPager() {
// Fill in the distribution control information
var pageCount = parseInt($("#lblPageCount").text()); // Total number of pages
if (pageCount == 0) {
document.getElementById("lblCurent").innerHTML = "0";
}
else {
if (pageIndex > pageCount) {
$("#lblCurent").text(1);
}
else {
$("#lblCurent").text(pageIndex); // The current page
}
}
document.getElementById("first").disabled = (pageIndex == 1 || $("#lblCurent").text() == "0") ? true : false;
document.getElementById("previous").disabled = (pageIndex <= 1 || $("#lblCurent").text() == "0") ? true : false;
document.getElementById("next").disabled = (pageIndex >= pageCount) ? true : false;
document.getElementById("last").disabled = (pageIndex == pageCount || $("#lblCurent").text() == "0") ? true : false;
} //AJAX Method to get the total number of pages
function GetPageCount() {
$.ajax({
type: "post",
dataType: "html",
url: "pagecount.aspx",
data: { "wherePageCount": where }, //"wherePageCount" + where, I don't recommend this way
async: false,
success: function (msg) {
document.getElementById("lblPageCount").innerHTML = msg;
}
});
}
//AJAX Method to get the total number of records
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(' An unknown error occurred ' + 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(' An unknown error occurred '); },
success: function (data) {
if (data == "ok") {
alert(' Add success !');
content(1);
$("#title").val("");
$(document.getElementsByTagName("iframe")[0].contentWindow.document.body).html("");
$("#muser").val("");
}
if (data == "erro") { alert(' Add failure '); content(1); }
}
}); } $(document).ready(function () {
// The first page button click event
$("#first").click(function () {
pageIndex = 1;
$("#lblCurent").text(1);
content(pageIndex);
});
// Previous button click event
$("#previous").click(function () {
if (pageIndex != 1) {
pageIndex--;
$("#lblCurent").text(pageIndex);
}
content(pageIndex);
}); // Next button click event
$("#next").click(function () {
var pageCount = parseInt($("#lblPageCount").text());
if (pageIndex != pageCount) {
pageIndex++;
$("#lblCurent").text(pageIndex);
}
content(pageIndex);
});
// The last page button click event
$("#last").click(function () {
var pageCount = parseInt($("#lblPageCount").text());
pageIndex = pageCount;
content(pageIndex);
});
// Get slide
$.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(); // Get the width of the focus graph ( Display area )
var len = $("#focus ul li").length; // Get the number of focus graphs
var index = 0;
var picTimer; // The following code adds a number button and a translucent bar behind the button , And the last page 、 Two buttons on the next page
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); // Add mouse in events for small buttons , To display the corresponding content
$("#focus .btn span").css("opacity", 0.4).mouseenter(function () {
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter"); // The previous page 、 Next page button transparency processing
$("#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);
}); // Previous button
$("#focus .pre").click(function () {
index -= 1;
if (index == -1) { index = len - 1; }
showPics(index);
}); // Next button
$("#focus .next").click(function () {
index += 1;
if (index == len) { index = 0; }
showPics(index);
}); // In this case, scroll left and right , That is all li Elements are all floating to the left in the same row , So here we need to calculate the periphery ul Width of element
$("#focus ul").css("width", sWidth * (len)); // Stop playing automatically when the mouse slides over the focus image , Auto play on slide out
$("#focus").hover(function () {
clearInterval(picTimer);
}, function () {
picTimer = setInterval(function () {
showPics(index);
index++;
if (index == len) { index = 0; }
}, 4000); // this 4000 Represents the interval between autoplay , Company : millisecond
}).trigger("mouseleave"); // Display picture function , According to the received index The value shows the corresponding content
function showPics(index) { // Normal switching
var nowLeft = -index * sWidth; // according to index Value calculation ul Elemental left value
$("#focus ul").stop(true, false).animate({ "left": nowLeft }, 300); // adopt animate() adjustment ul The element scrolls to the calculated position
//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); // Switch to the selected effect for the current button
$("#focus .btn span").stop(true, false).animate({ "opacity": "0.4" }, 300).eq(index).stop(true, false).animate({ "opacity": "1" }, 300); // Switch to the selected effect for the current button
} });

There is still a lot of code, so I will not cut it , Look at the pictures first , Good results .

Backstage pictures :

Front view of message board :

There's a lot of code that I won't put on , Leave an address for you to download ! Click me to download .

LigerUi frame +jquery+ajax No refresh message board system to achieve more related articles

  1. JQUERY AJAX No refresh asynchronous upload file

    AJAX No refresh upload file and display http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...

  2. jQuery Ajax No refresh operation

    Here is “ No refresh login ” Example , use Ashx+jQuery Ajax Realization . // Background instance code ashx file ( Instead, read from the database ) public void ProcessRequest(HttpCont ...

  3. no need jquery And so on ajax No refresh login

    <script type="text/javascript"> window.onload = function () { document.getElementByI ...

  4. jQuery Ajax General handler without refresh operation ashx

    // Foreground instance code  aspx file <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="ser ...

  5. JQuery+AJax - No refresh using captcha

    Final effect : Project directory : Default.aspx The front-end code : <%@ Page Language="C#" AutoEventWireup="true" C ...

  6. jquery+ajax No refresh loading data , News browsing more

      <script type="text/javascript"> $(document).ready(function (){ $(window).scroll(fu ...

  7. jquery ajax No refresh upload

    var form = new FormData(); form.append('file', $("#submitmaterials").find("input" ...

  8. Thinkphp frame -- ajax No refresh upload image

    use Thinkphp Frame to do no refresh upload pictures View layer View <!doctype html> <html lang="en"> <head> < ...

  9. DWZ frame Ajax No refresh form submission process

    DWZ frame Ajax The no refresh form submission process is : 1.       ajax Submit the form to the server 2.       The server returns a fixed format json structure 3.       js The tunable function is based on this json Do the data accordingly ...

Random recommendation

  1. Js Front end code exception monitoring

    window.onerror = function(msg,url,line,col,error){ // No, URL Don't report ! I don't know the error if (msg != "Script error ...

  2. Date Type time conversion

    /* Time shift start */ public static void main(String args[]) { Date nowTime = new Date(); System.out.print ...

  3. C# Of Reflection summary

    What is reflection stay .NET Reflection in can also understand objects from the outside ( Or assembly ) The function of internal structure , Even if you don't know the object ( Or assembly ) What is it , in addition .NET Reflection in can also create objects and execute its methods . back ...

  4. Domain name resolution URL forward

    URL forward Forward capability : If you don't have a stand-alone server ( That is, there is no independent IP Address ) Or you have a domain name B, You want to visit A Domain name to B Content of domain name , Then you can go through URL Forward to achieve .url Forwarding can be forwarded to a certain target ...

  5. Windows 7 taskbar and startmenu pin

    original text  Windows 7 taskbar and startmenu pin stay Windows 7 On , Users can put their favorite software “ nail ” In the start menu or taskbar , More convenient to use . But sometimes we also need to program this ...

  6. iOS And Two dimensional code generation and scanning (LBXScan)

    Reference resources :https://github.com/MxABC/LBXScan Steps are as follows : 1. download Download it from the reference website . 2. Import Import the whole LBXScan Folder 3. To configure stay pch Add #impo ...

  7. 【 Source code 】HashMap Source code and thread non safety analysis

    I haven't been too busy with my work recently , Ready to read some more source code , think it over and over again , Or from JDK The source code to read it , After all, I haven't read it for a long time , A lot of things are rusty . Of course , Or from hot HashMap, Every time you read it, you get something . Of course ,JDK8 Yes HashM ...

  8. 【redux】 Detailed explanation react/redux Server side rendering of : Page performance and SEO

        Questions to be solved Why does the server render the first screen faster ?( Compared with the first screen rendering of the client )   react A big pain in client rendering is the slow rendering speed of the first screen , because react It's a single page app , Most resources need to be loaded before the first rendering ...

  9. 007_ip Statistics and attacks ip analysis

    There are often scanned online DDoS Attacks , Need to collect logs for analysis , There are two ways , The difference is through shell and python The way . One .shell '''<1>shell A command analysis http://bl ...

  10. input Button to remove the default style

    border: 1px solid transparent; // Custom border outline: none; // Remove the default click blue border effect