Essential jQuery Plugin Patterns - Smashing Coding Advertisement I occasionally write about implementing design patterns1 in JavaScript. They’re an excellent way of building upon proven approaches to solving common development problems, and I think there’s a lot of benefit to using them. But while well-known JavaScript patterns are useful, another side of development could benefit from its own set of design patterns: jQuery plugins. The official jQuery plugin authoring guide2 offers a great starting point for getting into writing plugins and widgets, but let’s take it further. Plugin development has evolved over the past few years. Some developers may wish to use the jQuery UI widget factory3; it’s great for complex, flexible UI components. I began to think about plugin patterns after noticing a number of efforts to create a one-size-fits-all jQuery plugin boilerplate. Let’s assume that you’ve tried your hand at writing your own jQuery plugins at some point and you’re comfortable putting together something that works. Patterns And so on.
jQuery plugin: Treeview Lightwof an unordered list into an expandable and collapsable tree, great for unobtrusive navigation enhancements. Supports both location and cookie based persistence. Note as of April 2010: While the plugin still works as it is, it has some shortcomings, and not maintained anymore. There are now plenty of alternative jQuery tree plugins, like jsTree. Eventually there will be successor as part of jQuery UI. Note October 2010: Despite the above, I’ve moved the plugin to GitHub, fixed a bug when combining persist: “location” and prerendered: true, and released (tagged in Git) 1.4.1. Current version: 1.4.1License: MIT/GPL Files: DownloadChangelogDemosDocumentationGitHub Repository Dependencies Required jQuery 1.2.x+, tested with 1.4.3 Support Please post questions to the official Using jQuery Plugins Forum, tagging your question with (at least) “treeview”. Donate
25 jQuery Plugins to help with Responsive Layouts The most popular topic of discussion at the moment is undoubtedly responsive layouts in web design. Without going into it too much, a responsive layout allows you to offer a specific and optimised screen size based on whatever device (mobile, tablet…) the visitor uses. You would typically use Media Queries to resize the overall layout, but what about all of those individual elements and features that make your page unique? Navigation, forms, images, sliders, carousels… they all need to be optimised as well. That is were this post comes in, by highlighting 25 jQuery plugins that will help you optimise and resize those trickier web elements. Response.js Response JS is a lightweight plugin that gives you the tools for producing performance-optimized, mobile-first responsive websites. Response.js Responsly The Responsly plugin is a set of simple responsive widgets written using CSS3 transformations. Responsly Menu to a Dropdown for Small Screens Menu to a DropdownDemo Responsive Menu Doubletake
Connecting with WebSockets (Windows Store apps using JavaScript and HTML) Send and receive data using WebSockets for low-latency, secure, real-time bi-directional network communication using features in the Windows.Networking.Sockets namespace. What are WebSockets? The WebSocket Protocol defines a mechanism for fast, secure two-way communication between a client and a server over the web. Data is transferred immediately over a full-duplex single socket connection, allowing messages to be sent and received from both endpoints in real time. WebSockets are ideal for use in Windows Runtime apps that include real-time gaming, instant social network notifications, up-to-date displays of stock or weather information, and other apps requiring secure and fast data transfer. To establish a WebSocket connection, a specific, HTTP-based handshake is exchanged between the client and the server. Important A client cannot use WebSockets to transfer data unless the server also uses the WebSocket protocol. Using WebSockets with network isolation Developer audience In this section
IanLunn/jQuery-Parallax jVectorMap jQuery plugin: Autocomplete Note (2010-06-23): This plugin is deprecated and not developed anymore. Its successor is part of jQuery UI, and this migration guide explains how to get from this plugin to the new one. This page will remain as it is for reference, but won’t be updated anymore. If you’re still using the plugin and can’t upgrade to jQuery UI autocomplete: Someone else is maintaining a GitHub repository with the plugin, including some fixes. There’s also an update to the original version of the standalone plugin in a Google Code project. Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering. By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. This can be used to enter previous selected values, eg. for tags, to complete an address, eg. enter a city name and get the zip code, or maybe enter email addresses from an addressbook. Files:
Create a jQuery Plugin For Social Networking So I was thinking about making a jQuery plugin for a while now, and then the opportunity to guest write here showed up, and I thought I would combine the two and write a tutorial on making a jQuery plugin! This is a plugin I actually just made, it will take a few input options that are, for the most part, your usernames to various social networking sites. The plugin handles the rest; creating all the links and building a nice list, complete with matching icons to everywhere you are on the web. I thought this would be helpful to people just starting out with plugins, and make it easy for those who do not want to make sprites and pretty social lists. Feel Free To Jump Around From Here Here is a demo of what we will be making. jSocial Demo Look cool? The first thing I am going to do is create the canvas where I want the icon list to appear. And finally, we need to include the jQuery library of course. That is it for the HTML part, for now. Sweet, now it is time to make some jQuery magic.
BinaryJS - Realtime binary streaming for the web using websockets Nikebetterworld Parallax Effect Demo | Ian Lunn - Web Designer & Developer A couple of months ago, I created a jQuery Vertical Parallax Demo that manipulated CSS to make multiple backgrounds move at different speeds relative to the users movement of the scroll bar. This type of effect is slowly appearing across various websites on the web, achieved using many different techniques. Nikebetterworld took the idea to a new level. In today’s tutorial, we’re going to take the original jQuery Parallax script I wrote and recreate a webpage similar to Nikebetterworld. If you’d like to see what we’ll be creating, go check out the demo or download the files. The HTML Our page will consist of 6 sections: header, footer and 4 articles. To start, at the top of the page, we’ll reference all of the JavaScript files we’ll use to make the effect work. We also need to initiate the localScroll function on the unordered list of article links that are fixed to the right of the page. Inside of our body tag, we begin with the unordered list that provides a quick link to each section.