Home > Web Front-end > JS Tutorial > A pop-up box for selecting Chinese universities based on jquery (data, steps, code)_jquery

A pop-up box for selecting Chinese universities based on jquery (data, steps, code)_jquery

WBOY
Release: 2016-05-16 17:51:32
Original
1155 people have browsed it

1. The data
contains a total of 3049 universities across the country. It was copied from Renren (for learning and exchange only, please do not use it for commercial projects). This is a script file. The JSON object contained in it stores the school information. , the format is:

Copy code The code is as follows:

var schoolList=[
{
"id":1, //Province id
"school": [
{
"id": 1001, //School id
"name": "u6e05u534eu5927u5b66" // School name
}
/....
], //Schools in this province
"name": "u5317u4eac"
},
//...
];

2. Steps
2.1 The structure and pop-up method of the pop-up frame
Currently the pop-up frame is divided into two forms: iframe and div. In this example, I choose to use div as Pop-up frame, the structure of the pop-up frame is as follows:
Copy code The code is as follows:




Choose school











The pop-up box is initially hidden ( display:none), for the sake of user experience, after the user triggers the time to open the pop-up box, the pop-up box should be displayed in the center of the page. Use the following piece of code to achieve the centering effect:
Copy code The code is as follows:

function makeCenter()
{
$('#choose-box-wrapper').css( "display","block");
$('#choose-box-wrapper').css("position","absolute");
$('#choose-box-wrapper'). css("top", Math.max(0, (($(window).height() - $('#choose-box-wrapper').outerHeight()) / 2) $(window).scrollTop() ) "px");
$('#choose-box-wrapper').css("left", Math.max(0, (($(window).width() - $('#choose- box-wrapper').outerWidth()) / 2) $(window).scrollLeft()) "px");
}

2.2 Load province list and school list
When the pop-up box pops up for the first time, it defaults to the first province in the list. After loading all the lists of this province, a click function needs to be bound to each item. After the user clicks, the user's selection is updated. List of universities in the province.
After updating the list of universities in the province, a click function must also be bound to each item. The user can perform corresponding operations after selecting the university. (For example, to a text box Fill in the value, page redirect etc.)
Copy code The code is as follows:

2.3 Pop-up and hidden windows
In this example, the user clicks on a text box that requires the school to be entered, and a pop-up box pops up on the page. The pop-up box contains a close button, which can close the pop-up box.
Copy the code The code is as follows:

//Pop-up window
function pop(){
//Center the window
makeCenter();
//Initialize the province list
initProvince();
//By default, add the choosen style to the first province
$('[province-id="1"]').addClass('choosen');
//Initialize the university list
initSchool(1);
}
//Hide window
function hide()
{
$('#choose-box-wrapper').css("display"," none");
}

3. DEMO and download
http://demo.jb51.net/js/2012/jquery_school/
Download: jquery_school.rar
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template