Some of the features you might not have used under jquery _jquery

A. Create one's own DropDownList
Speaking of dropdown list, in HTML you would think

Copy Code code as follows:

<select>
<option>hello 1</option>
</select>

But its display will be not very good-looking, we can use Div+ul to make a drop down list, and have very bitter slidedown and slideup function.

Comparison of effects under IE8:

First of all talk about thinking, very simple ideas,

A. You need to use a div instead of the container shown in the selected record in the drop down list, by offset to get the location that this div should show, Offtset.top and Offset.left.

B. Through a UL and its children Li to simulate the dropdown box. Here are a few questions to be aware of,

I: Be sure to put the UL in a new good div inside, and this div position from top data in the previous step of the div (we call it idiv) of the top+idiv.height;

II: Every time after clicking on an Li component, you must clear it, or your drop down list will be more and more long ...

III: When the mouse clicks somewhere else, hide the dropdown list.

Let me take a step-by-step code to illustrate how to implement this feature:

1. Create Idiv as a container for the drop down list check value.
Before creating Idiv we need to get to the location where we want to show this drop down list:

Copy Code code 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 ();

The next step is to create the IDIVB and use the CSS () method to add formatting to the Idiv.

Copy Code code as follows:

var idiv = $ ("<div id= ' idiv ' class= ' Idiv ' >"). css ({
' Top ': offset.top,
' Left ': Offset.left,
' Width ': width,
' Height ': height,
' Border ': ' 1px solid #aaaaaa ',
' FontSize ': ' 12px ',
' textindent ': ' 4px ',
' Cursor ': ' Default '}. Text ("Hello");

Idiv also to add a class= ' Idiv ', was not needed, but then I found jquery css () can not go to the background image of the no-repeat attributes, Google for a long time there are no examples of foreigners, so only through this clas= ' Idiv ' to set:

Copy Code code as follows:

. idiv
{
Background-image:url (' images/select_right.gif ');
Background-position:right;
Background-repeat:no-repeat;
}

The effect is as follows;

2. When the idiv occurs, create a Drop-down box and use the Slidedown effect.
First we need to create a cdiv and add it to the body of the HTML, which is just below the idiv, so the cdiv needs to be created as follows:

Copy Code code 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 ();

And by default we want it to be hidden away.



With this cdiv, we just need to create a UL list of Idiv when the Click event occurs, and append it backwards cdiv.

Copy Code code as follows:

var UL = $ ("<ul style= ' list-style:none;margin:0;padding:0; ') ></ul> "). Appendto (Cdiv);
for (var i = 1; i < i++) {
$ ("<li style= ' testindent:4px;height:20px;lineheight:20px; Cursor:pointer; ' > "). Appendto (UL). Text (" Hello "+ i). MouseOver (function () {
$ (this). CSS (
{
' Color ': ' White ',
' Background ': ' Gray '
}
);
}). mouseout (function () {
$ (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 (' slow ');

You can see that the Mouseover,mouseout and click events were added to each Li record when it was added.

When the Click event occurs, we need to not only give cdiv to slideup but also hide it, and empty cdiv before the next click on Idiv. These two points are very important. You can try to see what happens when you don't do these two things.

When you click Li, don't forget to copy the current Li HTML content to idiv, otherwise our control is not practical ...

3. Use Ajax to get the value of the Drop-down list from the server.
Most of the time we need to dynamically get the value of the Drop-down list from the server, so we need to start by Jquey Ajax (or other Ajax methods) from the server load data when we click on the Idiv, and then we begin to create the UL list when the data load is complete.

I'm using WCF servece as a data source for AJAX requests.

To add user-friendly, when fetching data from the server, we let idiv display as a load picture ....

Code Download: Http://xiazai.jb51.net/201008/yuanma/jQueryAJAXCallWCFService.rar

Two. Use jquery's append feature to have no refresh switch playback video files (flash or Silverlight player).

There's a minisite need to use this stuff before. I just tried to study it, and it was a terrific pass.

Http://haokan.lafaso.com/pretty.html you can have a look. I do not count advertising bar, we are basically men are not going to look at this. Oh. It's just the way I think you might be able to use it later.

Because these players are all a embed control, we can play different videos by replacing the SRC attribute of the embed. For example:

Using the Append () method of jquery We have a cynical, we can replace the embed SRC, and replace the Div1 HTML, on the page is like using AJAX technology.

Copy Code code 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 ());

three. Use jquery to implement header and footer functions for HTML.
There are header and footer controls in Php,asp.net, in PHP with include, and in asp.net we use master or ascx.

In HTML? I believe it has never been. But the customer asks us to do the page must be the HTML, said is afraid the user too many ...

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

Then find a way to use the jquery load () method.

First we need to add two div in HTML one at the top of the <body>, one at the bottom, preferably a id= ' header ', a id= ' footer '.

Then on the server side we just need to create a header.html and a footer.html.

We use the jquery load method to loadheader.html and footer.html when the page loads.


Code:

Copy Code code as follows:

$ ("#header"). Load ("controls/header.html", function (response, status, XHR) {
if (Status = = "Error") {
var msg = "Server data transfer error, please refresh page";
$ ("#error"). 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 transfer error, please refresh page";
$ ("#error"). HTML (msg + xhr.status + "" + Xhr.statustext);
Alert (msg);
}
});

If possible, I'll go on to sum up some jquery tips and share with you ... And the drop down box code, I'll give you the download address later.
Cheers
Nic
Code Download: Http://xiazai.jb51.net/201008/yuanma/jQueryAJAXCallWCFService.rar