jQuery-UI Eating Contest
Using a jQuery-UI modal dialog in your Meteor app is as easy as the proverbial pie (eating it, that is, not making it, which is decidedly more difficult); simply follow these steps:
- In the console, enter "meteor add linto:jquery-ui" to install the package.
- Add a "
hide
" CSS class:
.hide {
visibility: hidden;
display: none;
}
- Add some HTML to the Template where the Dialog should display, hiding it by default, such as:
<template name="platypus"> <div id="duckbill"
name="duckbill"> <h2>Duckbilled Platypi of the World Unite!</h2>
<img alt="platypus image" height="275" id="imgPlatypusParty"
name="imgPlatypusParty" src="images/dplat.png" width="350" />
</div> <div class="hide" id="dialog" title="Basic dialog">
<p>Put whatever you want in here.</p> </div> </template>
- In response to some event, unhide the
div
and call dialog()
on it, such as:
Template.platypus.events({
'click #imgPostTravelBottom': function() {
$( "#dialog" ).removeClass('hide');
$( "#dialog" ).dialog(); }
});
And that's all there is to it! It's almost as easy as falling off a log, and is as easy as pie, which is "funner."