用 Pinify 将你的网站固定到 Windows 7 的任务栏中
jopen
13年前
<p>微软在 IE9 中引入一个叫 ‘Site Pinning’ 的功能，该功能仅在 Windows 7 下能用。该功能允许用户将某个网站固定在任务栏中，并可直接点击打开该网站，就像其他应用程序一般。</p> <p>而 Pinify 就是这样一个 jQuery 的插件（前身是 ie9ify）可让开发者模拟上述工具，让网站看起来像是一个桌面程序一般，不仅可以固定到任务栏还提供了一些附加的功能特性。</p> <h2>要求</h2> <p>Pinify 插件可从 <a href="/misc/goto?guid=4959517950463335387" rel="nofollow">http://bsatrom.github.com/pinify/</a> 这里下载，它要求 jQuery 1.5 或者更高的版本，要求 IE9 或者更新的浏览器。</p> <h2>开始使用</h2> <p>Pinify 插件包含下面两个功能：</p> <ul> <li>将网站固定到任务栏中</li> <li>提供一些工具函数用来给固定到任务栏的网站增加一些类似桌面应用的体验功能</li> </ul> <h3>固定网站到任务栏</h3> <p>为了固定网站到任务栏，我们需要拖动 IE9 浏览器的 tab 栏到任务栏中，该插件就可以实现将网站固定到任务栏，Pinify 的方法定义如下：</p> <pre class="brush:js; toolbar: true; auto-links: false;">$(selector).pinify(functionName, options);</pre> <p>其中参数 <em>functionName</em> 和 <em>options</em> 并不是必填的，默认的会调用 init 方法，该方法将手机网站信息并填充一些不同的元数据，通常的话使用 head 元素作为指定的选择器：</p> <pre class="brush:js; toolbar: true; auto-links: false;">$(‘head’).pinify(); </pre> <p>但是，站长其实并不知道网站是否可以被固定到任务栏，这是网站开发者的责任，他需要在用户浏览器支持的情况下告知此功能。例如他可以在网页上的banner条上添加一个图片，并指示用户将该图片拖拽到系统的任务栏。为了允许固定网页上的任何元素，functionName 必须指定为 enablePinning，同时可以在图片上显示一个hover提示信息告知用户此功能。pinify 函数本身可以指定这个提示信息，例如：</p> <pre class="brush:js; toolbar: true; auto-links: false;">$(‘img’).pinify(‘enablePinning’,’请将我拖到任务栏上:)’);</pre> <p>另外也可以在页面上显示一个提示信息：</p> <pre class="brush:js; toolbar: true; auto-links: false;">$('#header').pinify('pinTeaser', { icon: 'favicon.ico', pinText: 'Drag this image to the taskbar to pin this site', textColor: 'white', mainContentSelector: '#body' });</pre> <p></p> <p>如下图所示：</p> <p><img alt="用 Pinify 将你的网站固定到 Windows 7 的任务栏中" src="https://simg.open-open.com/show/4b55e802853f088670f2a5411880c594.png" width="571" height="49" /></p> <p>Pinify 也可以将网站固定到开始菜单中，只需要将 functionName 设置为 enableSiteMode ，一定点击指定页面元素，便会弹出对话框让用户确认是否将网站固定到开始菜单。</p> <pre class="brush:js; toolbar: true; auto-links: false;">$(‘a’).pinify(‘enableSiteMode’,click);</pre> <p></p> <p>该函数也可以使用其他种类的事件来触发，该事件可以作为第二个参数传递给pinify，如果不指定的话，默认就是点击事件。弹出的提示对话框如下图所示：</p> <p><img alt="用 Pinify 将你的网站固定到 Windows 7 的任务栏中" src="https://simg.open-open.com/show/4b6177bbb65fa00508cc539a2c5374eb.png" width="699" height="329" /> </p> <h3>定制固定的网站</h3> <p>一旦网站被固定到了任务栏，可以通过 width 和 height 参数来自设定打开浏览器的大小，也可以设置网站图标、默认打开的网址、应用名称、工具提示和任务等，其中任务可以是导航链接或者是网站的功能。这使得用户可以无需访问网站首页直奔主题。</p> <p>下面是完整的定制方法：</p> <pre class="brush:js; toolbar: true; auto-links: false;">$('head').pinify({ applicationName: 'mySite1', favIcon: 'sample_icon.ico', navColor: 'Black', startUrl: '/sample/pinify_simple.html', tooltip: 'mySite', window: 'width=800;height=600', tasks: [ { 'name': 'jQuery 推ter feed', 'action': 'http://推ter.com/jQuery', 'icon': 'http://jquery.com/favicon.ico' }, { 'name': 'Microsoft blog', 'action': 'http://blogs.technet.com/b/microsoft_blog/', 'icon': 'http://blogs.technet.com/themes/wireframe/favicon.ico' }] });</pre> <p></p> <p>当右击被固定的网站时，一个选项菜单就会显示，如下图所示。该选项菜单可显示多达5个项。</p> <p><img alt="用 Pinify 将你的网站固定到 Windows 7 的任务栏中" src="https://simg.open-open.com/show/894364e397cbd4697ff951f86f2bdb87.png" width="411" height="325" /> </p> <h2>工具函数 Utility Functions</h2> <p>Pinify 插件包含很多工具函数，这些函数可让你方便的调用 IE9 提供的新功能，让你的网站看起来更像是一个桌面程序。同时，这些函数还可以执行浏览器特定的检查和异常处理。</p> <h3>检查网站是否已经固定到任务栏</h3> <p>如果网站已经是固定到任务栏了，那就没必要再提示用户，我们可以使用 Pinify 提供的 isPinned 方法来判断，如果返回 true 则表示网站已经固定到任务栏了。</p> <pre class="brush:js; toolbar: true; auto-links: false;">$.pinify.isPinned();</pre> <p></p> <h3>检查首次运行状态</h3> <p>在某些时候，需要知道被固定的网站是否是首次点击打开，如果是第一次点击打开的话，就会有方法被触发，而 firstRunState 函数就是用来确定是否首次运行。如果该函数返回0表示网站还没有被固定到任务栏或者是该网站尚未被点击打开过；返回1表示首次从任务栏运行，返回2表示首次从开始菜单中运行。</p> <pre class="brush:js; toolbar: true; auto-links: false;">$.pinify.firstRunState();</pre> <p></p> <h3>添加跳转列表</h3> <p>当右击被固定的网站图标时，会显示一个选项菜单，菜单中是包含一些特定任务的列表。我们刚才提到过的，你可以通过 pinify 函数往这个菜单添加导航链接。</p> <p>同时该插件还提供一个函数用来动态添加导航链接，例如一个购物网站可以再添加一个“我的购物车”、“我的个人中心”等链接：</p> <pre class="brush:js; toolbar: true; auto-links: false;">$.pinify.addJumpList(options);</pre> <p>调用示例：</p> <pre class="brush:js; toolbar: true; auto-links: false;">$.pinify.addJumpList({ title: 'My stuff', items: [ { name: 'Recently viewed books', url: '/recentlyView.html', icon: 'book.ico' }, { name: 'New book releases', url: '/newBookReleases.html', icon: 'recent.ico' } ] });</pre> <p></p> <p>这样，一个包含在类别 My Stuff 的跳转列表就显示在 Tasks 类别之上（如下图），如果用户希望查看最近阅读的小说，那么通过点击这个列表就可以快速进入。开发者还可以添加用户可能会感兴趣的其他链接。</p> <p><img alt="用 Pinify 将你的网站固定到 Windows 7 的任务栏中" src="https://simg.open-open.com/show/2e0d9d6d203769c80f922b8cb75b1071.png" width="197" height="224" /> </p> <p></p> <h3>删除跳转列表</h3> <p>清空跳转列表很简单，直接调用 clearJumpList 方法即可：</p> <pre class="brush:js; toolbar: true; auto-links: false;">$.pinify.clearJumpList();</pre> <p></p> <h3>创建缩略图工具栏</h3> <p>在 Windows 7 中，当鼠标移动任务栏按钮之上，便会显示该程序运行的缩略图，某些应用会显示一些预览图等，例如当鼠标放在媒体播放器之上，便会显示当前专辑的封面。缩略图同时还提供一些常用操作，例如上一个、播放、暂停、下一个等等，用来控制播放器的动作。</p> <p>同样的，当用户将鼠标放到网站图标之上时，也会显示网站的缩略图，而 createThumbbarButtons 方法可以让开发者添加一组按钮到在缩略图显示的下方，用于控制网站的行为，例如可以提供 ‘首页’, ‘搜索’ 以及 ‘联系我们’ 等按钮，当点击这些按钮时就可以打开相应的页面，createThumbbarButtons 方法定义如下：</p> <pre class="brush:js; toolbar: true; auto-links: false;">$.pinify.createThumbbarButtons(options);</pre> <p>示例代码：</p> <pre class="brush:js; toolbar: true; auto-links: false;">$.pinify.createThumbbarButtons({ buttons: [ { name: 'Home', icon: 'Home.ico', click: function() { document.location = "home.html" } }, { name: 'Contact Us', icon: 'email-icon.ico', click: function() { document.location = "contact_us.html" } } ] });</pre> <p></p> <h3>显示提醒</h3> <p>很多 Web 应用检索新数据的时候，需要固定间隔的往服务器发送请求，如果有新的数据时便更新网页或者网页上的某一部分内容。Pinify 插件提供了函数让开发者可以在固定的网站图标上执行闪动和添加提醒图标，当然这个提醒的前提是用户当前已经打开了该网站。</p> <p>通过添加重叠的图标来显示提醒</p> <p>重叠的图标是一些小图标绘制在另外一些小图标之上，Windows 使用这些图标来区分不同的状态，例如在一个文件图标上添加一个小箭头表示这是一个指向某个文件的快捷方式。同样，对一个 Web 应用而言，一个重叠的图标可以只是用户网站有什么新内容或者其他变化。在 Pinify 中，重叠图标会显示在任务栏图标的右下方。</p> <p>可以使用 addOverlay 来添加重叠图标：</p> <pre class="brush:php; toolbar: true; auto-links: false;">$.pinify.addOverlay(options);</pre> <p>示例代码：</p> <pre class="brush:js; toolbar: true; auto-links: false;">$.pinify.addOverlay({ title: 'New Message', icon: 'newmessage.ico' });</pre> <p>一旦用户恢复了浏览器窗口，重叠的图标便会被移除，clearOverlay 方法可以用来清除重叠图标：</p> <pre class="brush:js; toolbar: true; auto-links: false;">$.pinify.clearOverlay();</pre> <p>通过闪动任务栏图标来提醒</p> <p>另外一个提醒的方法是图标闪动，通过 flashTaskbar 方法可以实现闪动，闪动的前提是浏览器窗口已经被最小化了。</p> <p>该函数仅用于非常重要的提醒需要用户立即关注，例如登录会话将失效之类的：</p> <pre class="brush:js; toolbar: true; auto-links: false;">$.pinify.flashTaskbar();</pre> <p></p> <h2>总结</h2> <p>Pinify 插件可以让开发者为网站添加一些 IE9 上才有的特性，开发者可以为网站提供一些类似桌面应用才有的特性。一个字：酷！</p> <p><span style="color:#e53333;font-weight:bold;">最后说明下：Pinify 只支持 Windows 7 下的 IE9！</span></p>