JQuery prompts code sharing and jquery code sharing

JQuery prompts code sharing and jquery code sharing

Code 1:

Copy codeThe Code is as follows:
<P> <a href = "#" class = "tooltip" title = "this is my hyperlink prompt 1."> tip 1. </a> </p>
<P> <a href = "#" class = "tooltip" title = "this is my hyperlink prompt 2."> Tip 2. </a> </p>
<P> <a href = "#" title = "this is the built-in prompt 1."> built-in prompt 1. </a> </p>
<P> <a href = "#" title = "this is the built-in prompt 2."> built-in prompt 2. </a> </p>

Copy codeThe Code is as follows:
$ (Function (){
$ (". Tooltip"). mouseenter (function (e ){
This. mytitle = this. title
This. title = ""
Var a = "<div>" + this. mytitle + "</div>"
$ ("Body"). append ();
$ ("Div" ).css ({
"Top": (e. pageY + y) + "px ",
"Left": (e. pageX + x) + "px"
}). Show ("fast ")
}). Mouseout (function (){
This. title = this. mytitle;
$ ("Div"). remove ();
});
})

Learning Experience:
 
Do not append the div element under 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

Copy codeThe 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>
<Div id = "dialog-message" title = "message box" style = "display: none; height: 120px; width: 220px; "> I am a pop-up message box </div>

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:

Copy codeThe Code is as follows:
EasyDialog. open ({
Container: 'demobox'
});

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

Copy codeThe 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.