JQuery notes / plugin notes

From Helpful
Jump to: navigation, search
Related to web development, hosting, and such: (See also the webdev category)
jQuery: Introduction, some basics, examples · plugin notes · unsorted

Server stuff:

Dynamic server stuff:

This article/section is a stub — probably a pile of half-sorted notes, is not well-checked so may have incorrect bits. (Feel free to ignore, fix, or tell me)
This hasn't been updated for a while, so could be outdated (particularly if it's about something that evolves constantly, such as software).

Though never entirely complete, plugins is a good list of available plugins.

Plugins themselves usually add functions on the jQuery ($) object when loaded.


clueTip

These are primarily notes
It won't be complete in any sense.
It exists to contain fragments of useful information.

Seems flexible in that you can get it to do clickable popup windows and and link/image hovertips, and load from title attribute, a local DOM element, and AJAX it in.

Will use hoverIntent when it is available (but does not require it). hoverIntent can be useful when you want hover tips to be smarter about recognizing mouse deceleration.


Tip contents:

  • from title="something"
    • $('a.title').cluetip({splitTitle: '|'});
    • ...that example splits title and contents from the same text
  • from in-DOM contents via a selector (suggestion is a hidden div referenced via an #identifier selector)
    • use {local:true} in options,
    • add selector in rel, e.g. rel="#hint01"
  • from AJAX:
    • URL in rel, e.g. rel="ajax.html"
    • (default when there is a rel, unless you specify local:true or splitTitle(verify)),
    • There are some added rules for <a> tags so that you can differentiate between content to ajax in and content to link to.


Tip styling:

You can add your own styling by setting cluetipClass:'something', then overriding the css you want to (This is also used to use existing themes, see http://plugins.learningjquery.com/cluetip/#subdetails4).


http://plugins.learningjquery.com/cluetip/#subdetails2


Options:

See http://plugins.learningjquery.com/cluetip/#options.

Overriding defaults can be done by setting values in $.fn.cluetip.defaults, for example:

var _qtd = $.fn.cluetip.defaults;
_qtd['local']=true;
_qtd['cluetipClass']='jtip';
_qtd['activation']='click';    _qtd['mouseOutClose']=false;  _qtd['sticky']=true;
_qtd['width']='350';           _qtd['arrows']=true;          _qtd['leftOffset']=29;
_qtd['closePosition']='title'; _qtd['closeText']='<img src="img/x.png" alt="close"/>';
_qtd['cluezIndex']=1101;


Unsorted:

If you use arrows, you probably want more leftOffset (30ish)

You can make tips abort viewing by having adding an onActivate function and having it return false.


Since there is only one cluetip visible ever, and it has DOM id cluetip, you can easily refer to it. For example, you can have a clicks elsewhere on the page close the cluetip with something like the following:

$('body').click(function(){  $('#cluetip').hide();  });

(this does assume that you don't use the return-false-to-stop-events hack anywhere.)

jEditable

The last editable code I used looked something like:

$('.editable').mouseover( 
    function(){$(this).addClass('hover')} 
).mouseout(
    function(){$(this).removeClass('hover')} 
).editable(
    'url.save',{indicator:'Saving...', 
                submit:'OK',
                onblur:'ignore', 
                type:'textarea',  
                rows:8,
                width:'none',
               }
);

Notes:

  • The mouseovered class is there for highlighting, a visual cue about what you can click to edit, for example:
.editable       { background:#fffff8; border:1px solid #ccc; }
.editable.hover { background:#ffffaa; }
  • An area is only clickable if it has a background color rather than the default transparent, so make sure it has a color set.
  • You may also want to make sure it has width and height, so that it won't be unclickable when it shows an empty string. A div with some padding helps.
  • submit:'OK', onblur:'ignore' means things stay editable until you submit them by pressing an 'ok' button. This is probably the easiest to understand to users.
  • For visual consistency, and because the content size estimation isn't always nice on relatively small, I fairly consistently use the same look, type:'textarea', rows:8
  • The indicator can also be '<img src="whatever">' (as the jEditable examples show)
  • The width is set on creation time, but it isn't too smart and may be a few pixels too wide. To set it via your stylesheets, you should set width:'none' first. (see also cssclass) You could also add somewhat iffier hacks, such as the CSS .editable *[name='value'] {width:95% !important;}

The AJAX part consists of

  • it sending the typed text to the server,
  • (server-side processing and likely) database storing, and sending back whatever the field should show.

This looks a little complex, perhaps, but it enables writing of some useful behaviour.

For example, you can taking a string that you'll interpret as HTML to show, safety-strip-and-transform it server-side, storing the cleaned version in the database, and sending it back; the next edit will show the cleaned version and should be (almost) identical to the version you stored (there is some handling of &lt, > and & that you may want to watch).

Also, you can avoid showing an empty string. Imagine the following implementation: If a database entry is an empty string, you can create the HTML-to-become-jeditable with a constant string, like '(click here to add)' . Once your server-side code gets this code, you can you can test for / remove that exact string. You can then store an empty string, but still send that same same '(click here to add)' , back to be displayed - also to avoid an empty, unclickable field.

Note that you usually want to strip()/trim() whitespaces.

History

This article/section is a stub — probably a pile of half-sorted notes, is not well-checked so may have incorrect bits. (Feel free to ignore, fix, or tell me)

[1] fixes the back button in major browsers.

In the doc's onload, you have to register a function that takes a hash value and does whatever needs to happen to the page:

$.history.init(loader_callback);

The given example also adds code to replace regular <a href="#thing"> style links with replacement onclick handlers (using rel="history"; a class may be simpler/cleaner) that call whatever centralized #-based reload function you've written. In some cases this allows you to add some graceful degradation, but if you're going for full-on scripting, you may wan to use $.history.load directly.

Tooltip

I wanted to use this as an alternative for the basic title="" attributes that does line wrapping on all browsers, and a no-brainer drop-in at that.

By default the text goes into a h3. The plugin optionally splits into a h3 and a p, but that's extra work at HTML generation time, so I chose to strip the h3's major formatting with something like:

#tooltip h3 { 
    font-size: medium;  
    font-weight:normal;
    font-family: sans-serif;
    padding:.7em 1em .7em 1em; 
    margin:0px; 
}
#tooltip {
     border:     1px solid #aaa;
     background: #ffe;
     /* The opacity's here for kicks. It'll work in at least FF and IE */
     opacity:0.95;-moz-opacity:0.95; filter:alpha(opacity=95);
}

It means the following is enough for a page:

$('[@title]').Tooltip({showURL:false,delay:0});