10 个基于 jQuery 的 Web 交互插件推荐
jopen 12年前
<p> 英文原文：<a href="/misc/goto?guid=4958341962298399589" target="_blank">10 jQuery for Web Interaction Plugins</a></p> <p> “用户交互”在现代的 Web 设计中占据了很大比例，这是互联网产品不可或缺的关键，对 Web 设计师也提出了更高的要求。</p> <p> 本文整理了 10 款基于 jQuery 的 Web 交互插件，可以帮助你提高工作效率，或带给你一些设计灵感。</p> <p> <strong>1. Redactor：奇妙的所见即所得编辑器</strong></p> <p> 该工具有一个非常好的 API，允许你根据需要进行定制。</p> <p style="text-align:center;"><img alt="10 个基于 jQuery 的 Web 交互插件推荐" src="https://simg.open-open.com/show/1b5aa2d04cf1cfed6915cfd7d04e3e9d.jpg" width="580" height="150" /></p> <p> <a href="/misc/goto?guid=4958341963102582745" target="_blank">源码</a> / <a href="/misc/goto?guid=4958341963905383754" target="_blank">演示</a></p> <p> <strong>2. elFinder：基于 web 的文件管理工具</strong></p> <p> 一个开源的、基于 web 的文件管理工具，使用 JavaScript 和 jQuery UI 开发。</p> <p style="text-align:center;"><img alt="10 个基于 jQuery 的 Web 交互插件推荐" src="https://simg.open-open.com/show/ee8c8f8ae045bfb668992470361cd63e.jpg" width="580" height="150" /></p> <p> <a href="/misc/goto?guid=4958341964699177359" target="_blank">源码</a> / <a href="/misc/goto?guid=4958341965491585300" target="_blank">演示</a></p> <p> <strong>3. Experimental Page Layout</strong></p> <p> 该工具的灵感来自于著名的 Flipboard 应用（该应用可以将用户喜欢的 推ter 消息和网站以杂志的形式输出），提供了精彩的翻书效果。</p> <p style="text-align:center;"><img alt="10 个基于 jQuery 的 Web 交互插件推荐" src="https://simg.open-open.com/show/f3ff8ae8d0726d2aa4a7a542a7f3d39f.jpg" width="580" height="150" /></p> <p> <a href="/misc/goto?guid=4958341966292259408" target="_blank">源码</a> / <a href="/misc/goto?guid=4958341967097648460" target="_blank">演示</a></p> <p> <strong>4. 社交媒体标签</strong></p> <p> 集成了大量社交网络和订阅网站的标签，包含 15 个社交网络和 33 个订阅选项。你可以将该插件添加到任何网站中，无需 PHP。</p> <p style="text-align:center;"><img alt="10 个基于 jQuery 的 Web 交互插件推荐" src="https://simg.open-open.com/show/9feb1a2fd7b77142f73c0aeaf421b78e.jpg" width="580" height="150" /></p> <p> <a href="/misc/goto?guid=4958341967892808112" target="_blank">源码</a> / <a href="/misc/goto?guid=4958341968690647462" target="_blank">演示</a></p> <p> <strong>5. 本地全屏 API</strong></p> <p> HTML5视频播放器 MediaElement.js 中的一个全屏 API，可以在 Safari 5.1+、Chrome 15+ 或 Firefox 10+ 中完美运行。</p> <p style="text-align:center;"><img alt="10 个基于 jQuery 的 Web 交互插件推荐" src="https://simg.open-open.com/show/0d994797aebc626dd094c1cd420c6c26.jpg" width="580" height="150" /></p> <p> <a href="/misc/goto?guid=4958328124322140862" target="_blank">源码</a> / <a href="/misc/goto?guid=4958328125133187314" target="_blank">演示</a></p> <p> <strong>6. Revolver</strong></p> <p> 用于创建全屏、平滑网站的 jQuery 插件，可以集成到任何网站模板中。</p> <p style="text-align:center;"><img alt="10 个基于 jQuery 的 Web 交互插件推荐" src="https://simg.open-open.com/show/4c037826ea0fae86ed47992da5783985.jpg" width="580" height="150" /></p> <p> <a href="/misc/goto?guid=4958341970958839108" target="_blank">源码</a> / <a href="/misc/goto?guid=4958341971757233057" target="_blank">演示</a></p> <p> <strong>7. firstImpression.js</strong></p> <p> 这是一个微型库（压缩后 1kb），用来检测当前用户以前是否访问过该网站。</p> <p style="text-align:center;"><img alt="10 个基于 jQuery 的 Web 交互插件推荐" src="https://simg.open-open.com/show/69d93f9c92f4cf73e493fb6b11f8d3e7.jpg" width="580" height="150" /></p> <p> <a href="/misc/goto?guid=4958341972553773955" target="_blank">源码 + 演示</a></p> <p> <strong>8. Joyride</strong></p> <p> 你可以通过该插件，来引导你的网站访问者的下一步操作。</p> <p style="text-align:center;"><img alt="10 个基于 jQuery 的 Web 交互插件推荐" src="https://simg.open-open.com/show/07edb53226bf01895fe7b32bbf539aa5.jpg" width="580" height="150" /></p> <p> <a href="/misc/goto?guid=4958341973339092840" target="_blank">源码</a> / <a href="/misc/goto?guid=4958341974134913563" target="_blank">演示</a></p> <p> <strong>9. jQuery History</strong></p> <p> 通过跟踪 URL Hashes，告知你页面状态的变化。支持通过书签、向后/向前按钮，以及跨浏览器所触发的变化。</p> <p style="text-align:center;"><img alt="10 个基于 jQuery 的 Web 交互插件推荐" src="https://simg.open-open.com/show/174f0007e72527b4fde26386548ceb28.jpg" width="580" height="150" /></p> <p> <a href="/misc/goto?guid=4958341974921402000" target="_blank">源码</a> / <a href="/misc/goto?guid=4958341975714644622" target="_blank">演示</a></p> <p> <strong>10. Biggerlink</strong></p> <p> 一个 jQuery 插件，可以轻松使特定元素呈现出首个链接中的内容。</p> <p style="text-align:center;"><img alt="10 个基于 jQuery 的 Web 交互插件推荐" src="https://simg.open-open.com/show/5ddc4758d1af9fc9bb66f5f775fa0212.jpg" width="580" height="150" /></p> <p> <a href="/misc/goto?guid=4958341976501970715" target="_blank">源码</a> / <a href="/misc/goto?guid=4958341977307207783" target="_blank">演示</a></p> <div id="come_from"> 来自: <a id="link_source2" href="/misc/goto?guid=4958341978099624646" target="_blank">www.iteye.com</a> </div>