Imitation qq space gift function, imitation qq gift

Imitation qq space gift function, imitation qq gift

Link: http://www.cnblogs.com/dengxinglin/archive/2013/03/23/2976737.html

We have a gift sending function in the QQ space, showing the person who recently celebrated his birthday. We just need to move the mouse over the Happy Birthday label, and it will show the gift that can be given to this person !!

Click a gift to send it out immediately. However, if you click more, a new window will pop up at the beginning of the current page! As shown in:

 

How can we implement the above functions?

You just need to move the mouse up, pop up tips for one day, click the control in tips, and then pop up another pop-up box.

There will be a lot of good plug-ins on the Internet, so I went online to find the corresponding jquery plug-ins.

There are many tiins for tips in jquery, but most of them follow the mouse, and you will disappear when you leave the specified position. Now we need to place the mouse over the pop-up tips. Then we found a required and powerful tips plug-in poshytip. Poshytip is easy to use. It also supports ajax to dynamically load content, so that you can use the database to call the gift of the specified category.

More poshytip examples and demos in: http://vadikom.com/demos/poshytip/

 

A new pop-up layer is also required. For easier implementation, a new page is created for the pop-up layer, when you click more, load another page in the current window as the pop-up layer.

Many pop-up layers use colorbox and other jquery plug-ins. After using it directly, you will find that the pop-up window says a link error! Or the pop-up layer is canceled.That's because when we click more, a new window pops up, and the mouse leaves the window popped out of tips. At this time, the tips will disappear, the pop-up page is canceled.

Is it good to write a plug-in for the pop-up layer by myself. For JavaScript, It is not faster to find a simple customization method. Here refer. It is easy to use and modify.

Use the poshytip method loadposhytip to load the content and then bind it to more bind popdialog methods. As long as we can implement that function.

The implementation method is like that. below is part of my js Code

Function loadRecommenClick () {if ($ ("# floatBoxBg "). length = 0) {$ (". moreRecommend "). popDialog ({Event: "click", // trigger response Event title: "gift", // The title content of the pop-up layer: "/peoplename/toPeople. aspx? TypeId = ", // get the content of the pop-up layer (text, container ID name, URL address, Iframe address) width: 630, // The width of the pop-up Layer height: 400, // The height of the pop-up layer scrollTop: 200 // The sliding height of the layer, that is, the sliding distance from the top of the pop-up layer});} function loadposhytip (currClass) {$ (". "+ currClass ). poshytip ({className: 'tip-yellowsimple ', content: function (updateCallback) {classId = $ (this ). attr ("classId"); var htmss = ""; $. getJSON (gifturl + '? Ac = 1 & classId = '+ classId +' & pageSize = 6 & pageIndex = 1' + "& r =" + Math. random (), function (data) {var container = "<div id = \" sphtml \ "class = \" giftInfo1 \ "> "; container + = "<div> featured gifts. Click here to give away! </Div> "; container + =" <div class = \ "birthdayGift \"> "; $. each (data [0]. items, function (I, item) {container + = " ";}); container + =" </div> "; container + = "<div class = \" moreRecommend \ "> more recommendations </div>"; container + = "</div>"; if (data [0]. count = "0") container = "no gifts have been added. Please Contact the administrator! "; UpdateCallback (container) ;}); return" loading ..... ";}, alignTo: 'target', alignX: 'center', alignY: 'bottom ', offsetX: 0, offsetY: 5}); loadRecommenClick ();}

Because this is used in the project and I did not make a demo, I only have two types. The gifts are added through the database and loaded by ajax.