Permalink
Browse files

adding initial checkbox compatible with 1.6.2

  • Loading branch information...
1 parent b20f4b2 commit 6c0935f8c93a9c6a4bd7c171b70e44abf5bdd601 @addyosmani committed Aug 18, 2011
View
@@ -0,0 +1,39 @@
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<title>Custom checkboxes and radio buttons in jQuery demo</title>
+<meta http-equiv="Content-Language" content="en-us">
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+ <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/base/jquery.ui.checkbox.css" rel="stylesheet" />
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../ui/jquery.ui.checkbox.js"></script>
+
+
+<script type="text/javascript">
+$(function() {
+ $("input").customInput();
+});
+</script>
+</head>
+
+<body>
+
+
+<form style="margin-left:30px">
+<input type="checkbox" id="chk1" checked><label for="chk1">Checkbox 1</label>
+<input type="checkbox" id="chk2"><label for="chk2">Checkbox 2</label>
+<input type="checkbox" id="chk3" disabled><label for="chk3">Checkbox 3 (I'm disabled)</label>
+<input type="checkbox" id="chk4"><label for="chk4">Checkbox 4</label>
+<input type="checkbox" id="chk5" disabled checked><label for="chk5">Checkbox 5 (I'm also disabled)</label>
+<input type="checkbox" id="chk6"><label for="chk6">Checkbox 6</label>
+</form>
+
+
+
+</body>
+</html>
View
6 readme
@@ -2,9 +2,9 @@ Current project status: active, not yet ready for consumption.
This is a semi-fork of jQueryUI with a number of components that I consider are missing from official releases. At present the aim is to include up-to-date versions of the following:
-Select-menu
+Select-menu (included)
+Checkbox (included)
Textbox
-Checkbox
Extended datepicker
-This repo contains work built upon by other developers including the Filament Group and Felix Nagel.
+This repo contains work built upon by other developers including the Filament Group, Felix Nagel and Craig Oshima.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,71 @@
+/* wrapper divs */
+.custom-checkbox, .custom-radio { position: relative; }
+
+/* input, label positioning */
+.custom-checkbox input,
+.custom-radio input {
+ position: absolute;
+ left: 2px;
+ top: 3px;
+ margin: 0;
+ z-index: 0;
+}
+
+.custom-checkbox label,
+.custom-radio label {
+ display: block;
+ position: relative;
+ z-index: 1;
+/* font-size: 1.3em;*/
+ padding-right: 1em;
+ line-height: 1;
+ padding: .5em 0 .5em 30px;
+ margin: 0 0 1px; /* 1px bottom important for outline border */
+ cursor: pointer;
+}
+
+.custom-checkbox label {
+ background: url(../base/images/ui-checkbox.png) no-repeat;
+}
+.custom-radio label {
+ background: url(../base/images/radio.png) no-repeat;
+}
+
+.custom-checkbox label, .custom-radio label {
+ background-position: -10px -14px;
+}
+
+.custom-checkbox label.hover,
+.custom-checkbox label.focus,
+.custom-radio label.hover,
+.custom-radio label.focus {
+ background-position: -10px -114px;
+}
+
+.custom-checkbox label.checked,
+.custom-radio label.checked {
+ background-position: -10px -214px;
+}
+
+.custom-checkbox label.checked.hover,
+.custom-checkbox label.checked.focus,
+.custom-radio label.checked.hover,
+.custom-radio label.checked.focus {
+ background-position: -10px -314px;
+}
+
+.custom-checkbox label.disabled,
+.custom-radio label.disabled {
+ background-position: -10px -414px;
+ color:#CCC;
+}
+
+.custom-checkbox label.checked.disabled,
+.custom-radio label.checked.disabled {
+ background-position: -10px -514px;
+}
+
+.custom-checkbox label.focus,
+.custom-radio label.focus {
+ outline: 1px dotted #CCC;
+}
View
@@ -0,0 +1,71 @@
+/*--------------------------------------------------------------------
+ * jQuery plugin: customInput()
+ * by Maggie Wachs and Scott Jehl, http://www.filamentgroup.com
+ * Copyright (c) 2009 Filament Group
+ * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
+ * Article: http://www.filamentgroup.com/lab/accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/
+ *
+ * Modifications by Craig Oshima, http://www.coshima.com
+ * Explanation: http://www.coshima.com/
+-------------------------------------------------------------------*/
+
+
+jQuery.fn.customInput = function(){
+ $(this).each(function(i){
+ if($(this).is('input:checkbox,input:radio')){
+ var input = $(this);
+
+ // get the associated label using the input's id
+ var label = input.next();
+
+ // wrap the input + label in a div
+ var wrapper = $("<div/>");
+ if (input.is(':checkbox')) {
+ wrapper.addClass("custom-checkbox");
+ }
+ else {
+ wrapper.addClass("custom-radio");
+ }
+ wrapper.insertBefore(input).append(input, label);
+
+ // necessary for browsers that don't support the :hover pseudo class on labels
+ label.hover(
+ function(){
+ if (!this.disabled) {
+ $(this).addClass('hover');
+ }
+ },
+ function(){
+ $(this).removeClass('hover');
+ }
+ );
+
+ //bind custom event and trigger it, then bind click,focus,blur events
+ input.bind('updateState', function(){
+ label.toggleClass("disabled", input.is(":disabled"));
+ if (input.is(':checked')) {
+ if (input.is(':radio')) {
+ $('input[name='+input.attr('name')+']').each(function(){
+ $('label[for='+$(this).attr('id')+']').removeClass('checked');
+ });
+ };
+ label.addClass('checked');
+ }
+ else {
+ label.removeClass('checked');
+ }
+ })
+ .trigger('updateState')
+ .click(function(){
+ $(this).trigger('updateState');
+ })
+ .focus(function(){
+ label.addClass('focus');
+ })
+ .blur(function(){ label.removeClass('focus '); });
+ }
+ });
+};
+
+
+

0 comments on commit 6c0935f

Please sign in to comment.