Realization of imitation QQ space gift function code _jquery based on jquery

We have a gift-giving function in the QQ space, which shows the recent birthday of the people. We just put the mouse in the following picture of Happy birthday on the label, will show the gift can be sent to the person!!

As shown in the following illustration:

Click on one of the gifts and send them right away. But we're going to say it now. And when you click More, a new window pops up in front of the current page! The following figure shows:

How to achieve the above function?

is to put the mouse up, a day out tips, click on the tips inside the control, and then pop-up another pop-up box.

There will be a lot of better plug-ins on the web, first to the Internet to find the corresponding jquery plug-ins.

The tips in jquery have a lot of plug-ins, but most of them follow the mouse, and you leave that designated position and disappear. Now this is the mouse is to be able to put the tips above the pop-up. Then found a match demand and very powerful tips plug-in poshytip. Poshytip is simple to use, it can also support Ajax to dynamically load content, and it is possible to call the specified assortment of gifts through the database.

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

Also need a pop-up layer, in order to make it easier to implement, the pop-up layer of another new page, click More time in the current window to load another page as a pop-up layer.

a lot of pop-up layers, with Colorbox and other jquery plug-ins. Directly after using only, found the pop-up window said link Error! Or the pop-up layer is canceled . That is because we clicked more time, a new window pops up, the mouse left the tips bounce out of the window, this time the tips out will disappear, and pop-up loading another page is canceled.

I'm going to have to do it myself. A pop-up plugin come on, it's good to write. For not JS to tell, find a relatively simple to customize is not faster. Here http://www.jb51.net/article/84902.htm compared to show off the pop-up layer plug-in. It is also very convenient to use and modify.

The Poshytip method is loadposhytip to bind to more binding popdialog methods when the contents are loaded. As long as we can achieve that function.

Implementation of the way is that, the following is part of the JS code I use

function Loadrecommenclick () {if ($ ("#floatBoxBg"). Length = = 0) {$ (". Morerecommend"). Popdialog ({event: "click",//Trigger response Event Title: "Send Gift",//Pop-up title content: "/peoplename/topeople.aspx?type 
   Id= ",//pop-up content get (text, container ID name, URL address, iframe address) width:630,//Popup layer width height:400,//Popup layer Height
 The height of the scrolltop:200//layer sliding is the distance from the top when the pop-up layer is ejected});  } 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> Select Good Gift, click on the gift Oh!
       </div> ";
       Container + + "<div class=\" birthdaygift\ ">"; $.each (Data[0].items, function (I, item) {container + = " more recommended </div>";
       container = "</div>"; if (Data[0].count = = "0") container = "No gift has been added, please contact administrator to add!"
       ";
      Updatecallback (container);
   }
     );
  Return "in load ...";
  Alignto: ' Target ', Alignx: ' Center ', Aligny: ' Bottom ', offsetx:0, offsety:5});
Loadrecommenclick (); }

Because this is used in the project to go, did not make a demo out, I just on the diagram two kinds of. The gift is added through the database, Ajax loaded out.

The above is a small set to introduce the introduction of jquery based on the QQ space to send gifts function code related knowledge, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!