Jetzt abonnieren!
Xify jQuery-Plugin
[English version below!]
Da ich die Funktion aus der iPhone-Safari Adressleiste schon immer sehr praktisch fand, und mir diese schon oft für Eingabefelder auf Websites gewünscht habe, habe ich mich gestern kurz hingesetzt und ein kleines jQuery-Plugin gebaut, welches mir diese Funktionalität abbildet.
„Xify“ erzeugt einen X-Button zu einem Textfeld wie man ihn aus der Adressleiste des iPhone-Safari kennt. Ein Klick auf das Symbol löscht den kompletten Text des dazugehörigen Textfelds. Benötigt jQuery ab Version 1.2.3.
Die Anwendung
$('input:text').xify();
$('input:password').xify({color: "red"});
Parameter
color- Hintergrundfarbe des Buttons
- Typ: CSS Farbangabe
- Standardwert: #bbb
size- Größe des Buttons
- Typ: integer
- Standardwert: 12
left- Angabe um wieviel Pixel der Button im Eingabefeld nach links gerückt werden soll
- Typ: integer
- Standardwert: 4
callback- Callbackfunktion die aufgerufen wird, wenn das X geklickt wird. Muss true oder false zurückgeben.
- Typ: function
Demo
http://www.manuel-bieh.de/publikationen/scripts/jquery/xify/
Download
http://plugins.jquery.com/project/xify
English description
You can use this plugin to automatically add a small „X“ to each input field to remove the current value by clicking or touching the X. You may know this function from the iPhone Safari URL bar. Requires jQuery 1.2.3+
Usage
$('input:text').xify();
$('input:password').xify({color: "red"});
Parameters
color- Backgroundcolor of the button.
- Type: CSS color value
- Default: #bbb
size- Size of the button.
- Type: integer
- Default: 12
left- Amount of pixels the button is moved to the left within the input field.
- Type: integer
- Default: 4
callback- Callback which is executed when the X is clicked. Must return true or false.
- Type: function
Demo
http://www.manuel-bieh.de/publikationen/scripts/jquery/xify/