JQuery tip effect code sharing _ jquery-js tutorial

Here we will share with you several pieces of code indicating the effects of JQuery, which is very simple and practical. If you need it, you can directly take it away. Code 1:

The Code is as follows:

Tip 1.

Tip 2.

Built-in prompt 1.

Built-in prompt 2.

The Code is as follows:

$ (Function (){
$ (". Tooltip"). mouseenter (function (e ){
This. mytitle = this. title
This. title = ""
Var a ="

"+ This. mytitle +"

"
$ ("Body"). append ();
$ ("P" ).css ({
"Top": (e. pageY + y) + "px ",
"Left": (e. pageX + x) + "px"
}). Show ("fast ")
}). Mouseout (function (){
This. title = this. mytitle;
$ ("P"). remove ();
});
})

Learning Experience:

Do not append the p element to the p tag. A large deviation value is displayed!

Originally! This and $ ("this") are different.
This. title changed to $ ("this"). attr ("title") will cause the following mouseout event to fail to access the saved title

Code 2:

Reference css: jqueryui/css/ui-lightness/jquery-ui-1.8.18.custom.css
Reference js: jqueryui/js/jquery-ui-1.8.18.custom.min.js

The Code is as follows:

Script
$ ("# Dialog: ui-dialog"). dialog ("destroy ");

$ ("# Dialog-message"). dialog ({

Height: 120,
Width: 220,
Modal: true,
Buttons :{
"No": function (){
// Dosomething
$ (This). dialog ("close ");
},
"Yes": function (){
// Dosomething
$ (This). dialog ("close ");
}
}
});
Script

I am a pop-up message box

Code 3:

Use the javascript pop-up layer component easyDialog

After a period of use, easyDialog summarized some problems encountered during usage. Recently, it took some time to refactor and optimize the original code, and added some new functions. The original version is only used to implement basic functions of the simple pop-up layer. From the project perspective, it is how to quickly complete the project. This version is not only used to implement basic functions, more consideration is given to how the pop-up layer can be better and more easily applied to projects.
New Features of easyDialog v2.0:

1. the default pop-up layer content template is added. For some simple applications, you do not need to write the structure of the pop-up layer content, but only need to pass a few simple parameters. The original usage method is as follows:

The Code is as follows:

EasyDialog. open ({
Container: 'demobox'
});

If the default content template is used, the container parameter can be used as follows:

The Code is as follows:

EasyDialog. open ({
Container :{
Header: 'pop-up layer title ',
Content: 'Welcome to easyDialog :)',
YesFn: btnFn,
NoFn: true
}
});

Shows the effect:

If you want to modify the external content template, you can modify the easydialog.css file in the downloaded document to implement the style you want.
2. added the drag-and-drop effect to make the pop-up layer have a better user experience, and the custom pop-up layer content can also easily implement the drag-and-drop effect.
3. the cache system and micro-event processing system are added internally, and the pop-up layer content is also cached to improve the performance of the pop-up layer.
In addition, the name of a parameter is modified. The original isOverlay is changed to overlay, And the IDs of the elements in the original pop-up layer are also renamed to avoid conflicts.

The above three tips are commonly used by me. You can use them as needed.