Implementation of LigerUi framework + jquery + ajax without refreshing message board system, ligeruijquery

Implementation of LigerUi framework + jquery + ajax without refreshing message board system, ligeruijquery

The LigerUi framework added, deleted, and modified code a few days ago. A bunch of code really didn't have a picture. Some netizens recommended that we share all the open source message boards that involve this framework with you today. There may be some shortcomings in the modification process.

When ajaxis used for the basic display page on the message board, only one index.html page can be viewed on the front page. When running, open this page. The compressed file contains the compiled version and source code. You can use vs debugging or IIS to view the supported version. net2.0 only works. both access and mssql data can be used for data. During switchover, modify the data in the configuration file. I will not talk much about it. Let's take a look at the main javascript code at the front end:

Var pageIndex = 1; // page index var where = "where 1 = 1"; // set the footer attribute function bindPager () {// fill in the Distribution Control Information var pageCount = parseInt ($ ("# lblPageCount "). text (); // the total number of 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 "). 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 retrieve the total number of pages function GetPageCount () {$. ajax ({type: "post", dataType: "html", url: "pagecount. aspx ", data: {" wherePageCount ": where}, //" wherePageCount "+ where. For personal suggestions, async: false, success: function (msg) {document. getElementById ("lblPageCount "). innerHTML = msg ;}}) ;}// AJAX method to retrieve the total number of records function GetTotalCount () {$. ajax ({type: "post", dataType: "text/html", url: "getCount. asp X ", 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 (); GetPageCou Nt (); bindPager () ;});} function add () {.. ajax ({url: 'add. aspx? Action = add', type: 'post', data: {title: $ ("# title "). val (), contents: escape ($ (document. getElementsByTagName ("iframe" %%0%.content%%%document.body%.html (), muser: $ ("# muser "). val ()}, dataType: 'html', error: function () {alert ('unknown error');}, success: function (data) {if (data = "OK") {alert ('added successfully! '); Content (1); $ ("# title "). val (""); $ (document. getElementsByTagName ("iframe" %%0%.content%%document.body%.html (""); $ ("# muser "). val ("") ;}if (data = "erro") {alert ('add failed'); content (1 );}}});} $ (document ). ready (function () {// click Event on the first page of the button $ ("# first "). click (function () {pageIndex = 1; $ ("# lblCurent "). text (1); content (pageIndex) ;}); // click Event on the previous page $ ("# previous "). click (function () {if (pag EIndex! = 1) {pageIndex --; $ ("# lblCurent "). text (pageIndex) ;}content (pageIndex) ;}); // click Event on the next page $ ("# next "). click (function () {var pageCount = parseInt ($ ("# lblPageCount "). text (); if (pageIndex! = PageCount) {pageIndex ++; $ ("# lblCurent "). text (pageIndex) ;}content (pageIndex) ;}); // click Event on the last page $ ("# last "). click (function () {var pageCount = parseInt ($ ("# lblPageCount "). text (); pageIndex = pageCount; content (pageIndex) ;}); // get the magic light $. 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 (); // obtain the width (display area) of the focus chart var len = $ ("# focus ul li "). length; // obtain the number of focal points var index = 0; var picTimer; // The following Code adds a number button and a translucent bar after the button, there are also 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 "mirror.css (" opacity ", 0.5); // Add a mouse slide event for a small button to display the corresponding content $ (" # focus. btn span "2.16.css (" opacity ", 0.4 ). mouseenter (function () {index = $ ("# focus. btn span "). index (this); showPics (index );}). eq (0 ). trigger ("mouseenter"); // process the transparency of buttons on the previous page and next page $ ("# focus. preNext "pai.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 page 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 uses left and right scrolling, that is, all the li elements are floating to the left in the same row, so the width of the peripheral ul elements needs to be calculated here $ ("# focus ul" ).css ("width ", sWidth * (len); // stop automatic playback when you move the mouse over the focus chart, and start automatic playback when the mouse slides out $ ("# focus "). hover (function () {clearInterval (picTimer) ;}, function () {picTimer = setInterval (function () {showPics (index); index ++; if (index = len) {index = 0 ;}, 4000); // This 4000 represents the automatic playback interval, in milliseconds }). trigger ("mouseleave"); // display the image function, and display the corresponding content based on the received index value. function showPics (index) {// normal switch var nowLeft =-index * sWidth; // calculate the left value of the ul element based on the index value $ ("# focus ul "). stop (true, false ). animate ({"left": nowLeft}, 300); // use animate () to adjust the ul element to scroll to the calculated position // $ ("# focus. btn span "). removeClass ("on "). eq (index ). addClass ("on"); // switch the current button to the selected effect $ ("# focus. btn span "). stop (true, false ). animate ({"opacity": "0.4"}, 300 ). eq (index ). stop (true, false ). animate ({"opacity": "1"}, 300); // switch the current button to the selected effect }});

There are still a lot of code that I will not be able to, first look at the picture, the effect is good.

Background image:

Message Board foreground diagram:

There are still a lot of code I will not put on, leave an address for everyone to download! Click "Download.

 

How to Implement jquery ajax without refreshing the url of a new page

The browser points to the URL. As long as your URL changes, your content page will be refreshed once. Therefore, ajax can only be used for content without refreshing the content. The URL for the browser cannot, unless you divide a part into a part of the page

Jquery framework and ajax framework

Jquery framework. jquery is a js framework. js framework is a js language framework, which is consistent with other language frameworks, such as php codeigniter framework and zend framework, this language framework usually includes a set of functions commonly used in the language field. The framework provides a set of functions that are closer to the implementation of the project goal than the program language itself. Several basic functions of the jquery framework are: selector (supports css selector, and jquery custom selector such as eq, first), animation function (show, hide, animate, slideDown), dom operations, events, ajax. Different frameworks focus on different functions. jquery focuses on query, which is the dom selector, and does not provide much extension to the js language itself.
The Ajax framework provides a set of modular Ajax functions. The Ajax framework can be implemented in a variety of languages (for example, SAJAX is implemented in a variety of languages). Ajax is only part of jquery.
Reference: jqueryvsmootools.com/index_cn.html