Several functions under jQuery that you may not have used_jquery

1. Create your own dropdownlist
Speaking of dropdown list, in html you will think of

Copy code The code is as follows:

hello 1

But Its display will not look good. We can use div ul to make a drop down list ourselves, and it has very painful slidedown and slideup functions.

Effect comparison under IE8:

First let’s talk about the idea, a very simple idea,

a. A Div needs to be used instead of drop down list Select the container where the record is displayed, and use offset to get the position where the Div should be displayed, offset.top and offset.left.

b. Simulate a drop-down box through a UL and its children li. There are several issues that need to be noted here.

i: The UL must be placed in a newly created Div, and the position of this Div is far from the top of the Div in the previous step (we call it iDiv) of the top data. iDiv.height;

ii: Be sure to clear it every time after clicking on an li element, otherwise your drop down list will become longer and longer. . .

iii: When the mouse is clicked elsewhere, the dropdown list must be hidden.

Let me explain how to implement this function step by step with the code:

1. Create an iDiv as a container for the selected value of the drop down list.
Before creating iDiv we need to first get the position where we want to display this drop down list:

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

The next step is to create the iDivb and use css() Method to add formatting to iDiv.

Copy code The code is as follows:

var 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 added a class='iDiv', which was originally unnecessary, but then I found that jQuery's css() cannot handle the background. For the no-repeat attribute of the image, there is no example for foreigners after searching for a long time, so I can only set it through this clas='iDiv':

Copy code The 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 a click event occurs on iDiv, create a Drop down box and use slidedown effect.
First we need to create a cDiv and add it to the body of the html. Its position is just below the iDiv, so the cDiv needs to be created as follows:

Copy code The code is as follows:

var 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.



With this cDiv, we only need to create a UL list when the iDiv Click event occurs, and append it to the cDiv.

Copy code The code is as follows:

var UL = $("

").appendTo(cDiv);
for (var i = 1; i < 10; i ) {
$("

"). 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 each li record is added when it is added mouseover, mouseout and click events.

When the click event occurs, we not only need to give the cDiv to slideUp but also hide it and clear the cDiv before clicking the iDiv next time. These two points are very important. You can try what will happen if you don't do these two things.

Don’t forget to copy the html content of the current li to iDiv when clicking li, otherwise our control will have no practical effect. . . . .

3. Use Ajax to get the value of the drop-down list from the server.
Many times we need to dynamically obtain the value of the drop-down list from the server, so when clicking on the iDiv, we need to first load the data from the server through jQuey's ajax method (or other ajax method), and when the data load is completed We just started creating the UL list.

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

In order to increase user-friendliness, when fetching data from the server, we let the iDiv display as a load image. . . . . . . . . . . .

Code download: http://xiazai.jb51.net/201008/yuanma/jQueryAJAXCallWCFService.rar

2. Use jQuery’s append function to switch the played video file (flash or Silverlight player) without refreshing.

There was a minisite that needed this thing before. I tried researching it, and it really works.

http://haokan.lafaso.com/pretty.html Everyone can take a look. I don’t think this is an advertisement. Most of us are men and will not read this. hehe. It’s just that I think you might be able to use this method in the future.

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

Using jQuery's append() method, we can change the src of embed and replace the html of div1 again. It is like using ajax technology on the page.

Copy code The code is as follows:

$("#div1 embed").empty() ;
var placeHolder = $("

");
var tempParent = $("

");
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 header and footer functions for HTML.
In php and asp.net, there are controls such as header and footer. In php, we use include, but in asp.net, we use master or ascx. What about

in html? I believe there never has been. But the customer asked us to make the page must be html, saying that we were afraid of too many users. . . . .

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 pages will change.

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

First we need to add two Divs in the html, one at the top of and one at the bottom. It is best to have an Id='header' and an id='footer'.

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

When the page is loaded, we will use jquery's load method to load header.html and footer.html.


Code:

Copy code The 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").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").html(msg xhr.status " " xhr .statusText);
alert(msg);
}
});

If possible, I will summarize some jQuery techniques and share them with you later. . . . . . . . I will also provide you with the download address for the code for the drop-down box later.
Cheers
Nic
Code download: http://xiazai.jb51.net/201008/yuanma/jQueryAJAXCallWCFService.rar

Statement：

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

Previous article：Develop sliding menu control with javascript oop_javascript skillsNext article：Develop sliding menu control with javascript oop_javascript skills

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved