Several functions that you may have never used in jQuery

1. Create your own dropdownlist
Speaking of dropdown list, you will think
Copy codeThe Code is as follows:
<Select>
<Option> hello 1 </option>
</Select>

However, its display will not look good. We can use div + ul to make a drop down list by ourselves, and it has a bitter slidedown and slideup functions.

Comparison of results in IE8:

First, let's talk about the idea. It's a simple idea,

A. You need to use a Div to replace the container for displaying the selected records in the drop down list. offset is used to obtain the position that the Div should be displayed, offtset. top and offset. left.

B. Simulate the drop-down box through a UL and its children li. Pay attention to the following issues,

I: You must place UL in a newly created Div, and the position of this Div is the top + iDiv. height of the Div (we call it iDiv) from the top data in the previous step;

Ii: each time you click a li component, you must clear it. Otherwise, your drop down list will become longer and longer...

Iii: When the mouse clicks somewhere else, the dropdown list must be hidden.

Next, I will explain how to implement this function with code:

1. Create an iDiv to serve as the container for the drop down list selected value.
Before creating an iDiv, we need to first obtain the position to display the drop down list:
Copy codeThe Code is as follows:
// Get the select list's position using offset, width and height
Var offset = $ (". select_css"). offset ();
Var width = $ (". select_css"). width ();
Var height = $ (". select_css"). height ();

Next, create iDivb and use the css () method to add a format for iDiv.
Copy codeThe Code is as follows:
Var iDiv = $ ("<Div id = 'idiv 'class = 'idiv'>" example .css ({
'Top': offset. top,
'Left': offset. left,
'Width': width,
'Height': height,
'Border': '1px solid # aaaaa ',
'Fontsize': '12px ',
'Textind': '4px ',
'Cursor ': 'default'}). text ("hello ");

IDiv also adds class = 'idiv ', which is not required. However, I found that jQuery's css () cannot fix the no-repeat attribute of the background image, google has no examples for foreigners for a long time, so it is set only through this clas = 'idiv:
Copy codeThe Code is as follows:
. IDiv
{
Background-image: url ('images/select_right.gif ');
Background-position: right;
Background-repeat: no-repeat;
}

The effect is as follows;

2. When an iDiv click event occurs, create a drop-down box and use the slidedown effect.
First, we need to create a cDiv and add it to the html body. Its position is exactly below the iDiv, so we need to create the cDiv as follows:
Copy codeThe Code is as follows:
Var cDiv = $ ("<div id = 'cdiv '>" ).css ({
'Position': 'absolute ',
'Width': width,
'Top': offset. top + 22,
'Left': offset. left,
'Background': '# f7f7f7 ',
'Border': '1px solid silver'
}). Hide ();

By default, we need to hide it.



With this cDiv, we only need to create a UL list when the iDiv Click event occurs and append it to the cDiv.
Copy codeThe Code is as follows:
Var UL = $ ("<ul style = 'LIST-style: none; margin: 0; padding: 0; '> </ul>"). appendTo (cDiv );
For (var I = 1; I <10; I ++ ){
$ ("<Li style = 'testindent: 4px; height: 20px; lineheight: 20px; cursor: pointer; '> "). appendTo (UL ). text ("hello" + I ). mouseover (function (){
Certificate (this).css (
{
'Color': 'white ',
'Background': 'Gray'
}
);
}). Mouseout (function (){
Certificate (this).css (
{
'Color': 'black ',
'Background': 'white'
});
}). Click (function (){
// Disvisualble the cDiv and set the selected crrent li's text as iDiv's text
$ ("# CDiv"). slideUp (). hide ();
$ ("# IDiv" ).html((this).html ());
});
}
// Slide show the cDiv now
$ ("# CDiv"). slideDown ('low ');

You can see that the mouseover, mouseout, and click events are added for each li record.

When the click event occurs, we must not only hide the cDiv to slideUp, but also clear the cDiv before clicking iDiv next time. These two points are very important. You can try not to see the effect of these two points.

When you click li, do not forget to copy the html content of the current li to iDiv. Otherwise, our control will not actually work .....

3. Use Ajax to get the value of the drop-down list from the server.
Most of the time, we need to dynamically obtain the value of the drop-down list from the server. In this way, we need to load data from the server through the jQuey ajax method (or other ajax methods) when clicking iDiv, the UL list is created only when data load is complete.

I am using WCF Servece as the data source for ajax requests.

To add a user-friendly model, when retrieving data from the server, let iDiv display as a load image ............

Download Code: http://xiazai.jb51.net/201008/yuanma/jQueryAJAXCallWCFService.rar 2. Use the jQuery append function to do nothing new to switch the playback of video files (flash or Silverlight player ).

A minisite used this before. I tried to study it.

Http://haokan.lafaso.com/pretty.html you can look. I don't know how to advertise this. Most people are male and basically don't look at it. Haha. I think you may need this method later.

Since these players are all embed controls, we can replace the src attribute of embed to play different videos. For example:

Using the jQuery append () method, we can steal the bar and change the src of embed, and change the html of div1 again, on the page, it is like using ajax technology.
Copy codeThe Code is as follows:
$ ("# Div1 embed"). empty ();
Var placeHolder =$ ("<div/> ");
Var tempParent =$ ("<div/> ");
Var embed = $ ("# div1 embed ");
Embed. replaceWith (placeHolder );
TempParent. append (embed );
Embed. attr ("src", http://player.ku6.com/refer/DMFZdNYzKDEosiPG/v.swf&auto=1 );
PlaceHolder.replaceWith(tempParent.html ());


3. Use jQuery to implement the header and footer functions for HTML.
Both php and asp.net have headers and footer controls. include is used in php, while master or ascx is used in asp.net.

In html? I believe it has never been. But the page that the customer asked us to make must be html, saying that there are too many users to be afraid .....

The advantage of using footer and header is that when we need to modify the content of these parts, we only need to modify one page, and all the pages will change.

Later, I found a way to use jquery's load () method.

First, we need to add two divs to the html, one at the top of the <body> and the other at the bottom, preferably one Id = 'header' and the other id = 'footer '.

At the server end, we only create a header.html and a footer.html.

We will use the jqueryloadheaders to loadheader.html and footer.html during page preparation.


Code:
Copy codeThe Code is as follows:
$ ("# Header"). load ("controls/header.html", function (response, status, xhr ){
If (status = "error "){
Var msg = "server data transmission error, Please refresh the page ";
// $ ("# Error" cmd.html (msg + xhr. status + "" + xhr. statusText );
Alert (msg );
}
});
// Load footer from server
$ ("# Footer"). load ("controls/footer.html", function (response, status, xhr ){
If (status = "error "){
Var msg = "server data transmission error, Please refresh the page ";
// $ ("# Error" cmd.html (msg + xhr. status + "" + xhr. statusText );
Alert (msg );
}
});

If possible, I will summarize jQuery's skills and share them with you ........ The code in the drop-down box will be provided later.
Cheers
Nic
Code download: http://xiazai.jb51.net/201008/yuanma/jQueryAJAXCallWCFService.rar