Implementation of Ligerui frame +jquery+ajax non-flush message board system

A few days ago released the Ligerui framework of the increase, deletion, change code, a bunch of code really do not have a picture. Some netizens recommend, all today to relate to this framework of open-source message board to share to everyone. In the process of modification may be a bit of a shortage of places to want everyone to shoot bricks.

Because the message board Front desk Display page basically uses Ajax to operate, so the front page only a index.html page can be viewed. In the run time please open this page, compressed files include compiled version and source code, you can use vs debugging or IIS run to view as long as support. net2.0, data using access and MSSQL data two can, when switching, please change in the configuration file. Nonsense will not be said more. First look at the foreground JavaScript main code:

var pageIndex = 1; Page index var where = "where 1=1";//Footer Property Set function Bindpager () {//Fill distribution control information var PageCount = parseint ($ ("#lblPageCoun T "). text ());    Total Pages if (PageCount = = 0) {document.getElementById ("Lblcurent"). InnerHTML = "0";        } else {if (PageIndex > PageCount) {$ ("#lblCurent"). Text (1); } else {$ ("#lblCurent"). Text (pageIndex);//Current Page}} document.getElementById ("First"). Disab LED = (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 Gets the total number of pages function Getpagecount () {$.ajax ({type: "Post", DataType: "html", url: "Pagecount.a      SPX ",  Data: {"Wherepagecount": where},//"Wherepagecount" + where, personal advice is not async:false in this way, success:function (msg)        {document.getElementById ("Lblpagecount"). InnerHTML = msg; }    });} The Ajax method gets the total number of records function Gettotalcount () {$.ajax ({type: "Post", DataType: "text/html", url: "GetC Ount.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 (' unknown error ' + 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 () {Ale RT (' An unknown error occurred '); }, Success:function (data) {if (data = = "OK") {alert (' added successfully!                ‘);                  Content (1);                  $ ("#title"). Val ("");                  $ (document.getElementsByTagName ("iframe") [0].contentwindow.document.body). HTML ("");            $ ("#muser"). Val ("");        } if (data = = "Erro") {alert (' Add failed '); content (1);} }    });}        $ (document). Ready (function () {//First page button click event $ ("#first"). Click (function () {pageIndex = 1;        $ ("#lblCurent"). Text (1);    Content (PageIndex);    });            Prev button click event $ ("#previous"). Click (function () {if (PageIndex! = 1) {pageindex--;        $ ("#lblCurent"). Text (PageIndex);    } content (PageIndex); });    Next-page button click event $ ("#next"). Click (function () {var PageCount = parseint ($ ("#lblPageCount"). Text ());            if (pageIndex! = PageCount) {pageindex++;        $ ("#lblCurent"). Text (PageIndex);    } content (PageIndex);    });        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 (); Gets 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 translucent bar after the number buttons and buttons, and the previous page, next page, two buttons 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); Adds a mouse-over event to the small button to display the corresponding contents $ ("#focus. BTN span"). CSS ("opacity", 0.4). MouseEnter (function () {index = $ ("#focus. BT        N span "). index (this);    Showpics (index);    }). eq (0). Trigger ("MouseEnter"); Previous page, Next 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);    });        Prev Button $ ("#focus. Pre"). Click (function () {index-= 1;        if (index = =-1) {index = len-1;}    Showpics (index);    });        Next Page button $ ("#focus. Next"). Click (function () {index + = 1;        if (index = = len) {index = 0;}    Showpics (index);    }); This example scrolls left and right, that is, all LI elements areFloat to the left in the same row, so here you need to calculate the width of the perimeter ul element ("#focus ul"). CSS ("width", swidth * (len));    Stops AutoPlay when the mouse is on the focus chart, and starts to automatically play $ ("#focus") when it is slid out. Hover (function () {clearinterval (Pictimer);            }, Function () {Pictimer = SetInterval (function () {showpics (index);            index++;        if (index = = len) {index = 0;} }, 4000);    This 4000 represents the interval of AutoPlay, in milliseconds}). Trigger ("MouseLeave"); Displays the picture function, which displays the corresponding contents according to the received index value function showpics (index) {///normal toggle var nowleft =-index * swidth;//Calculate the UL element's Le according to the index value FT Value $ ("#focus ul"). Stop (True, false). Animate ({"Left": Nowleft}, 300); Adjust the UL element by Animate () to the calculated position//$ ("#focus. BTN span"). Removeclass ("on"). EQ (index). addclass ("on"); Switches the current button to the selected effect $ ("#focus. BTN span"). Stop (True, false). Animate ({"opacity": "0.4"}, +). EQ (index). Stop (True, FA LSE). Animate ({"Opacity": "1"}, 300); Switch to the selected effect for the current button});

There is a lot of code I will not cut, first look at the picture, the effect is good.

Background Image:

Message version of the front desk map:

There is a lot of code I will not put up, leave an address for everyone to download it! Click I download.