Mini Collection for Prefix & Postfix Input FormPosted on July 9, 2012 and got 11 shouts so far
On developing an application sometimes I need an instant library for prefixing and postfixing an input field on a form, I don’t have one so I decided to make it to be used on future project. This library using Font Awesome for the icons of the prefix and postfix, go through the post to see the sets.
This library contains twenty four different icons, they are : email, link, external-link, attach, tag, home, key, credit-card, cart, user, trash, folder, save, marker, setting, edit, bookmark, calendar, gplus, twitter, github, pinterest, linkedin and facebook.
Each of them has seven different colors, they are : orange, magenta, dark grey, green, blue, red and grey as default color. Here’s the shot from some of them :
Technology & Usage
I’m using jQuery for adding prefix and postfix beside the input form and CSS for styling, for the background color I’m using
linear-gradient with support up to four different vendor prefixes (
-moz, -webkit, -o & -ms) and also the standard code. For the icons, like I describe before I’m using Font Awesome. I also add support for
placeholder attribut on the input for old browser.
To use this set, include
minippfix.js along with
font/ folder to the right place. After all set, you can already use this library by describing like following markup :
As you can see above there are three to four class name we need to put on class attribute, first is
ppfix, this class name needed to as default class name,
post class name is for the position (prefix or postfix), the third is icon name it can be
home or other icon name (see demo) and the last class name is color. Here are the result from above markup :
That’s it. Please enjoy and spread to the world!