[jQuery] New jTip, Plugged In (alpha)

[jQuery] New jTip, Plugged In (alpha)

<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; ">Hey everyone,<DIV><BR class="khtml-block-placeholder"></DIV><DIV>I've been toying around with a new version of the jTip plugin, which was originally created by Cody Lindley.</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>This one is a complete re-write, and like Klaus's Thickbox Reloaded, it uses the more jQuery-ish syntax. So, now you can do something like this to have a jTip appear when you hover over a link:</DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN>$('a').jtip();</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>An example of the HTML markup would be:</DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><a href="<A href="http://www.learningjquery.com"> http://www.learningjquery.com</A>" rel="local-ajax-file.html" title="about learning jquery">learningjquery.com</a></DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>It's in alpha stage right now, so don't expect it to perform perfectly yet. I'm going to re-work the ajax options a bit and also allow for showing content from the current page in the jTip. There are a couple small issues with the CSS in IE6 (so what's new?) and I'll probably borrow from Klaus's png fix for the drop shadow (if he'll let me. :-) )</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Here is a list of the currently working options:</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "># width: default is 275;</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "># attribute: default is 'rel'; set it to some other attribute of the link to designate that attribute as the one that refers to the jTip's content</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "># sticky: default is false; set to true if you want the jTip to remain open when you "mouse out" of the link. This option also places a "close" link on the jTip itself.</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "># closePosition: default is 'top'; set to 'bottom' to put the 'close' link at the bottom of the jTip</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "># closeText: default is 'Close'; set it to something else if you want to</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "># hoverClass: default is an empty string; set to the name of the class to add that class to the link on hover</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "># loadImage: default is 'wait.gif'; not implemented yet</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "># truncate: default is 0, which means there will be no truncation; set it to some number to truncate the jTip's contents to n characters</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "># dataType: default is 'html'</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Adding a jTip with options looks like this:</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">$('#examples a.myclass').jtip({</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">  hoverClass: 'highlight',</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">  attribute: 'name',</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">  sticky: true,</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">  closePosition: 'bottom',</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">  closeText: 'Close [x]'</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">  truncate: 80</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">});</DIV><DIV><BR><DIV><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; ">If any of you would like to take a look, I would greatly appreciate any feedback you have to offer. Here is the URL of a demo page with a few notes:</SPAN></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><A href="http://test.learningjquery.com/jtip/"> http://test.learningjquery.com/jtip/</A><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "></SPAN></DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Also, I'm not crazy about the name (jTip), especially since this version is quite a departure from Cody's original, so if anyone has an idea for a new name, I'd love to hear it!</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Oh, one more thing: Thanks a lot to Shelane Enos for compiling a list of feature requests and motivating me to actually put this together!</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>thanks,</DIV><DIV><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><BR class="Apple-interchange-newline"><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><DIV><BR class="khtml-block-placeholder"></DIV><DIV>--Karl</DIV><DIV>_________________</DIV><DIV>Karl Swedberg</DIV><DIV>www.englishrules.com</DIV><DIV>www.learningjquery.com</DIV><DIV><BR class="khtml-block-placeholder"></DIV><BR class="Apple-interchange-newline"></SPAN></SPAN> </DIV><BR></DIV></BODY></HTML>