Chalalo Land

Tecnologías ASP.NET y un poco Más

Contacto


 Si quierer cooperar, yo feliz, muy agradecido :)

De donde me Visitan?

Locations of visitors to this page

Generic Content

Si te gustaron los articulos, y te animas te estaría muy agradecido!


Recent Posts

Tags

Community

Blogs de MVP

Amigos Geeks

Blogs Imperdibles

GODS

Archives

Email Notifications

[IE9] IE9ify, plugin de jQuery para IE9

image

Hola, quiero compartir este plugin que he encontrado, que facilita bastante el agregar la funcionalidad de Pinned sites , Task y Jumping list, se llama IE9ify y esta disponible para la descarga en:

http://ie9ify.codeplex.com/

Instalación

Para instalarlo en nuestro sitio, podemos también utilizar el excelente NuGet desde Visual Studio y como te darás cuenta, instala jQuery 1.5.2 y jQuery.ie9ify 1.0,

image

Una vez con los Script ya descargados, vamos a poder utilizarlo.

image

Dentro de las facilidades que nos da este plugin, es que se encarga de agregar los meta tags necesarios para activar las funcionalidades en IE9,  proveer una forma más “Ordenada” de agregar Task List y Jumping List y agregar un aviso al usuario de que se puede arrastrar el sitio a la barra para poder anclarlo.

Código

Primero agregamos las referencias y el favicon:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 

<script src="Scripts/jquery-1.5.2.min.js" type="text/javascript"></script>

<script src="Scripts/jquery.ie9ify.min.js" type="text/javascript"></script>

Luego el código (Creo que es auto explicativo, cualquier consulta, la puedes hacer en el blog)

<script type="text/javascript">

   $(document).ready(function () {

       $('head').ie9ify({

          applicationName: 'Ejemplo IE9ifi',

          tooltip: 'Ejemplo de IE9Ifi ',

          startUrl: 'Default.aspx',

           tasks: [{

                'name': 'Mi Blog',

                'action': 'http://www.chalalo.cl',

                'icon': 'favicon.ico'

              },

              {

                'name': 'RSS',

                'action': 'http://geeks.ms/blogs/gperez/rsscomments.aspx',

                'icon': 'icons/rss.ico'

              },

              {

                'name': 'Twitter',

                'action': 'http://twitter.com/chalalo',

                'icon': 'icons/twitter.ico'

              },

              {

                'name': 'Facebook',

                'action': 'http://www.facebool.com/chalalo',

                'icon': 'icons/facebook.ico'

                }]

            });

 

           

           $('#barra').ie9ify('pinTeaser', {

                addStartLink: false,

                backgroundColor: '#ea6d03',

                pinText: 'Arrastra esta imagen a la barra de tareas'

            });

 

            if ($.ie9ify.isPinned()) {

 

                $.ie9ify.addJumpList({

                    title: 'IE9 en Chalalo',

                    items: [

                    {

                    'name': 'Thumbnails Icons',

                    'url': 'http://geeks.ms/blogs/gperez/archive/2010/11/16/tutorial-r-225-pido-crea-tus-propios-thumbnails-icons-en-ie9.aspx',

                    'icon': 'http://geeks.ms/favicon.ico'

                    },

                    {

                    'name': 'Overlays Icons',

                   'url': 'http://geeks.ms/blogs/gperez/archive/2010/11/17/tutorial-r-225-pido-utilizar-overlays-icons-en-tu-p-225-gina-con-ie9.aspx',

                    'icon': 'http://geeks.ms/favicon.ico'

                    },

                    {

                    'name': 'Promoción de Sitios',

                    'url': 'http://geeks.ms/blogs/gperez/archive/2010/11/23/tutorial-r-225-pido-promocionar-tus-sitios-que-utilizan-ie9.aspx',

                    'icon': 'http://geeks.ms/favicon.ico'

                    }]

                });

            }

 

        });

    </script>

 

Con este código, lo que estamos haciendo es agregando las task item, las jumping list y la funcionalidad de indicarle al usuario que puede anclar en sitio, para esto solo debes agregar un div en tu página, por ejemplo:

<div id="barra"></div>

y al momento de visualizar nuestra página veremos el div posicionado en la parte superior y con el formato y texto que nosotros hayamos escogido Sonrisa

image

 

Luego, al anclar el sitio, veremos desaparecer esta barra y la lista de tareas de nuestro sitio anclado se verá mucho más completa Guiño

 

image

Esto no es todo lo que puede lograr el Plugin, puedes revisar más información en:

Saludos,
Gonzalo

Posted: 10/4/2011 7:48 por Gonzalo Perez | con no comments
Archivado en: ,,
Comparte este post: