Site Pinning Functions

Site pinning functions make it simple to add site-pinning features to your markup. All of these are accessible via the first parameter of the main

pinify() function (if you’ve worked with jqueryUI widgets in the past, this format will be familiar to you):

$(selector).pinify(functionName, options);

If the functionName parameter is omitted, the main pinify init function will be called.

$(‘head’).pinify(options) [or $(‘head’).pinify(‘init’, options)]

The most commonly-used method is the main pinify method (or the init method), which will add several meta tags to the <head> of your page.

Given the following:

   $('head').pinify({   
         applicationName: 'mySite',
         favIcon: 'favicon.ico',
         navColor: 'Green',
         startUrl: '/Home',
         tooltip: 'mySite,
         window: 'width=800;height=600',
         tasks: [{
               'name': 'Twitter',
               'action': 'http://twitter.com/brandonsatrom',
               'icon': 'http://twitter.com/favicon.ico'
            },
            {
               'name': 'User InExperience',
               'action': 'http://www.userinexperience.com',
               'icon': 'http://www.userinexperience.com/favicon.ico'
            }]
   });


The following meta tags will be automatically added to your page:

<link rel="shortcut icon" type="image/ico" href="http://localhost/favicon.ico">
<meta name="application-name" content="mySite">
<meta name="msapplication-tooltip" content="mySite">
<meta name="msapplication-starturl" content="http://mysite/Home">
<meta name="msapplication-navbutton-color" content="Green">
<meta name="msapplication-window" content="width=800;height=600">
<meta name="msapplication-task" 
content="name=Twitter;action-uri=http://twitter.com/brandonsatrom;icon-uri=http://twitter.com/favicon.ico">
<meta name="msapplication-task" 
content="name=User InExperience;action-uri=http://www.userinexperience.com;icon-uri=http://www.userinexperience.com/favicon.ico">

Note that it’s not necessary to pass in any of the default options above. If $(‘head’).pinify() is called with no parameters, the plugin will use current information

available to the browser to set the needed values.

$(selector).pinify(‘enablePinning’, title);

Enables any content item (for instance, an image) to be enabled for ‘pinning’ (dragging to the taskbar). The title parameter, which specifies the tooltip value

when the user hovers over the content item, is optional.

ex. $('img').pinify(‘enablePinning’);

$(selector).pinify(‘enableIESiteMode’, eventName);

Given an eventName (‘click’, ‘blur’, etc.), creates a binding that triggers site mode when the event fires. The result is a dialog from IE that asks the user if they wish

to pin the site to the Start Menu. If the eventName is omitted, the ‘click’ event will be bound by default.

ex. $('a').pinify(‘enableIESiteMode’);

$(selector).pinify(‘pinTeaser’, options);

Adds a teaser element to your page underneath the address bar, requesting that the user pin this site to enable added functionality. Given the options:

$('#header').pinify('pinTeaser', {
               icon: '/favicon.ico',
               pinText: 'Drag this image or the tab to the taskbar to pin this site',
               addStartLink: true,
               linkText: 'Click here to add this site to the start menu',
               linkColor: 'rgb(0, 108, 172)',
               backgroundColor: 'rgb(0, 108, 172)',
               textColor: 'white',
               mainContentSelector: '#body'
            });

The following teaser will be added to the page:

image

Note that it’s not necessary to pass in any of the default options above. If $(selector).pinify(‘pinTeaser’) is called with no options, the plugin will use current

information available to the browser to set the needed values.

Last edited May 11, 2011 at 5:31 PM by bsatrom, version 8

Comments

No comments yet.