Permalink
Browse files

Initial implementation along with demos and readme

  • Loading branch information...
1 parent e1cfdb6 commit 19d03ee2309abe41956536903caaabc44c385d73 unknown committed Mar 28, 2010
Showing with 555 additions and 0 deletions.
  1. +34 −0 README.md
  2. +29 −0 demos/default.html
  3. +7 −0 demos/demos.css
  4. +31 −0 demos/icons.html
  5. +19 −0 demos/index.html
  6. +290 −0 demos/lots.html
  7. +44 −0 demos/sets.html
  8. +101 −0 jquery.buttonlite.js
View
@@ -0,0 +1,34 @@
+[jQuery Button Lite Plugin](http://github.com/jzaefferer/button-lite) - For buttons. Lots of buttons.
+================================
+
+This [jQuery](http://jquery.com) plugin uses the [jQuery UI](http://jqueryui.com) CSS framework
+and their [Button styles](http://jqueryui.com/demos/button) for rendering buttons. It supports only push buttons
+(no radio or checkbox) and requires more initial markup, which would be annoying to write by hand, but can easily
+abstracted in a serverside web framework. All the plugin does is handling the mouse and keyboard events to provide
+the same experience for the user as the jQuery UI Button does.
+
+If you have lots of push buttons on a page, generated by some web framework, this plugin could be a useful replacement
+for the jQuery UI Button widget. On creation, it only adds a bunch of event handlers, but doesn't have to do any other
+DOM manipulation.
+
+The plugin supports all the text-only, text-with-icons and icons-only variations that jQuery UI Button has. You just have
+to provide the right markup. A good way to start is looking that a jQuery UI Button demo, using Firebug to inspect the button
+element that you want, then use "Copy HTML" in the element's contextmenu (on the HTML tab). Paste that on your page and
+you're good to go.
+
+Button Lite is implemented as a jQuery UI widget and supports the disabled-option (set directly or via enable/disable methods)
+and the destroy method. As buttonlite only binds events, calling destroy will only unbind those events.
+
+Usage:
+-------------
+Start with base button markup (can be whatever jQuery UI Button produces):
+`<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">A button element</span></button>`
+
+Then apply the buttonlite method:
+`$("button").buttonlite();`
+
+[A few examples](http://jquery.bassistance.de/button-lite/demos/):
+-------------
+ * [A normal button, a submit button and an anchor](http://jquery.bassistance.de/button-lite/demos/default.html)
+ * [Lots of buttons](http://jquery.bassistance.de/button-lite/demos/lots.html)
+ * [Button with Icons, all four variations](http://jquery.bassistance.de/button-lite/demos/icons.html)
View
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery Button Lite Plugin Demo</title>
+ <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/base/jquery-ui.css" rel="stylesheet" />
+ <link type="text/css" href="demos.css" rel="stylesheet" />
+</head>
+<body>
+
+<div class="demo">
+
+ <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">A button element</span></button>
+
+ <input type="submit" value="A submit button" class="ui-button ui-widget ui-state-default ui-corner-all" role="button">
+
+ <a href="#" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">An anchor</span></a>
+
+</div>
+
+
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js"></script>
+<script type="text/javascript" src="../jquery.buttonlite.js"></script>
+<script type="text/javascript">
+$("button, input:submit, a", ".demo").buttonlite();
+</script>
+</body>
+</html>
View
@@ -0,0 +1,7 @@
+body {
+ font-family: "Trebuchet MS","Helvetica","Arial","Verdana", sans-serif;
+ font-size: 62.5%;
+}
+.demo {
+ margin-bottom: 1em;
+}
View
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery Button Lite Plugin Demo</title>
+ <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/base/jquery-ui.css" rel="stylesheet" />
+ <link type="text/css" href="demos.css" rel="stylesheet" />
+</head>
+<body>
+
+<div class="demo">
+
+ <button title="Button with icon only" role="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only"><span class="ui-button-icon-primary ui-icon ui-icon-locked"></span><span class="ui-button-text">Button with icon only</span></button>
+
+ <button role="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon"><span class="ui-button-icon-primary ui-icon ui-icon-locked"></span><span class="ui-button-text">Button with icon on the left</span></button>
+
+ <button role="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icons"><span class="ui-button-icon-primary ui-icon ui-icon-gear"></span><span class="ui-button-text">Button with two icons</span><span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span></button>
+
+ <button title="Button with two icons and no text" aria-disabled="false" role="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icons-only"><span class="ui-button-icon-primary ui-icon ui-icon-gear"></span><span class="ui-button-text">Button with two icons and no text</span><span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span></button>
+
+</div>
+
+
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js"></script>
+<script type="text/javascript" src="../jquery.buttonlite.js"></script>
+<script type="text/javascript">
+$("button, input:submit, a", ".demo").buttonlite();
+</script>
+</body>
+</html>
View
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>jQuery Button Lite Plugin Demo</title>
+ <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/base/jquery-ui.css" rel="stylesheet" />
+ <link type="text/css" href="demos.css" rel="stylesheet" />
+</head>
+<body>
+
+<ul class="ui-widget ui-widget-content">
+ <li><a href="default.html">Default demo</a></li>
+ <li><a href="lots.html">Lots of buttons</a></li>
+ <li><a href="icons.html">Icons</a></li>
+ <li><a href="sets.html">Sets</a></li>
+</ul>
+
+</body>
+</html>
Oops, something went wrong. Retry.

0 comments on commit 19d03ee

Please sign in to comment.