Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: michelled/jquery-ui
...
head fork: michelled/jquery-ui
Checking mergeability… Don't worry, you can still create the pull request.
  • 8 commits
  • 5 files changed
  • 0 commit comments
  • 2 contributors
Commits on Apr 08, 2010
@rdworth rdworth Minimal implementation and scaffolding for the checkbox widget. Marku…
…p and CSS based on Filament Group's awesome book 'Designing with Progressive Enhancement' Ch. 15
1f0710d
@rdworth rdworth checkbox: fixed create to account for checkbox possibly being inside …
…the label. Thanks to Steven Black for reminding me of this case.
55dc0bb
@rdworth rdworth checkbox: fixed to not require a label for=id attribute if the label …
…contains the checkbox. An id is generated if the checkbox doesn't have one since we move the checkbox out of the label in this case for consistent markup.
93c3e89
Commits on Apr 10, 2010
@rdworth rdworth checkbox visual test: renamed default.html to checkbox.html e46e041
Commits on Apr 21, 2010
@rdworth rdworth Merge commit '1.8.1' into formcontrols 4a4b5f1
Commits on Apr 29, 2010
@rdworth rdworth Checkbox: Added checkbox icon element
Added wrapper element to overflow hide input so it doesn't appear through semi-transparent disabled icon element
Set correct disabled and checked state on init
Update state on focus, hover, and click
3a3bebc
Commits on Jul 10, 2011
@jzaefferer jzaefferer Merge branch 'master' into formcontrols b8d15a2
@jzaefferer jzaefferer Checkbox: Update visual test to current jQuery version; update impl t…
…o set version and options defaults, and to set aria-checked attribute to correct value.
c1d2ead
View
63 tests/static/checkbox/default.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>Checkbox Static Test : Default</title>
+ <link rel="stylesheet" href="../static.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.base.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.theme.css" type="text/css" title="ui-theme" />
+ <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
+ <script type="text/javascript" src="../static.js"></script>
+</head>
+<body>
+
+<div class="ui-checkbox">
+ <div class="ui-checkbox-inputwrapper">
+ <input type="checkbox" id="check1">
+ </div>
+ <label for="check1">Unchecked</label>
+ <div class="ui-checkbox-box ui-widget ui-state-active ui-corner-all">
+ <span class="ui-checkbox-icon"></span>
+ </div>
+</div>
+
+<div class="ui-checkbox">
+ <div class="ui-checkbox-inputwrapper">
+ <input type="checkbox" id="check2" checked="checked">
+ </div>
+ <label for="check2">Checked</label>
+ <div class="ui-checkbox-box ui-widget ui-state-active ui-corner-all">
+ <span class="ui-checkbox-icon ui-icon ui-icon-check"></span>
+ </div>
+</div>
+
+<div class="ui-checkbox ui-state-disabled">
+ <div class="ui-checkbox-inputwrapper">
+ <input type="checkbox" id="check3" disabled="disabled">
+ </div>
+ <label for="check3">Disabled</label>
+ <div class="ui-checkbox-box ui-widget ui-state-active ui-corner-all">
+ <span class="ui-checkbox-icon"></span>
+ </div>
+</div>
+
+<div class="ui-checkbox ui-state-disabled">
+ <div class="ui-checkbox-inputwrapper">
+ <input type="checkbox" id="check4" checked="checked" disabled="disabled">
+ </div>
+ <label for="check4">Checked and disabled</label>
+ <div class="ui-checkbox-box ui-widget ui-state-active ui-corner-all">
+ <span class="ui-checkbox-icon ui-icon ui-icon-check"></span>
+ </div>
+</div>
+
+<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
+<script>
+ $('<div/>').css({
+ position: "absolute",
+ right: 10,
+ top: 10
+ }).appendTo(document.body).themeswitcher();
+</script>
+</body>
+</html>
View
40 tests/visual/checkbox/checkbox.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <title>Checkbox Visual Test : Default</title>
+ <link rel="stylesheet" href="../visual.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" />
+ <script type="text/javascript" src="../../../jquery-1.5.1.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() {
+ $(":checkbox").checkbox();
+ });
+ </script>
+</head>
+<body>
+
+<form>
+
+<label><input type="checkbox" />Check 1</label>
+
+<label><input type="checkbox" id="check2" />Check 2</label>
+
+<input type="checkbox" id="check3" /><label for="check3">Check 3</label>
+
+<input type="checkbox" id="check4" /><span><label for="check4">Check 4</label></span>
+
+<table>
+<tr>
+<td><input type="checkbox" id="check5" /></td>
+<td><label for="check5">Check 5</label></td>
+</tr>
+</table>
+
+</form>
+
+</body>
+</html>
View
1  themes/base/jquery.ui.base.css
@@ -12,6 +12,7 @@
@import url("jquery.ui.accordion.css");
@import url("jquery.ui.autocomplete.css");
@import url("jquery.ui.button.css");
+@import url("jquery.ui.checkbox.css");
@import url("jquery.ui.datepicker.css");
@import url("jquery.ui.dialog.css");
@import url("jquery.ui.menu.css");
View
6 themes/base/jquery.ui.checkbox.css
@@ -0,0 +1,6 @@
+/* Checkbox
+----------------------------------*/
+.ui-checkbox { position: relative; }
+.ui-checkbox .ui-checkbox-inputwrapper { width: 0; height: 0; overflow: hidden; }
+.ui-checkbox label { display: block; position: relative; padding-right: 1em; line-height: 1; padding: .5em 0 .5em 30px; margin: 0 0 .3em; cursor: pointer; z-index: 1; }
+.ui-checkbox .ui-checkbox-box { position: absolute; top: 0; left: 0; width: 1.5em; height: 1.6em; }
View
139 ui/jquery.ui.checkbox.js
@@ -0,0 +1,139 @@
+/*
+ * jQuery UI Checkbox @VERSION
+ *
+ * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * {{TODO replace with docs link once plugin is released}}
+ * http://wiki.jqueryui.com/Checkbox
+ * {{/TODO}}
+ *
+ * Depends:
+ * jquery.ui.core.js
+ * jquery.ui.widget.js
+ */
+(function( $ ) {
+
+var checkboxId = 0;
+
+$.widget( "ui.checkbox", {
+ version: "@VERSION",
+ options: {
+ disabled : null
+ },
+ _create: function() {
+
+ var that = this;
+
+ // look for label as container of checkbox
+ this.labelElement = this.element.closest( "label" );
+ if ( this.labelElement.length ) {
+ // move the checkbox outside (before) the label
+ this.element.insertBefore( this.labelElement );
+
+ // the checkbox needs an id since it's no longer inside the label
+ if ( !this.element.attr( "id" ) ) {
+ this.element.attr( "id", "ui-checkbox-" + checkboxId );
+ checkboxId += 1;
+ }
+
+ // associate label by for=id of checkbox
+ this.labelElement.attr( "for", this.element.attr("id") );
+ } else {
+ // look for label by for=id of checkbox
+ this.labelElement = $( this.element[0].ownerDocument ).find( "label[for=" + this.element.attr("id") + "]" );
+ }
+
+ // wrap the checkbox in two new divs
+ // move the checkbox's label inside the outer new div
+ this.checkboxElement = this.element.wrap( "<div class='ui-checkbox-inputwrapper'></div>" ).parent().wrap( "<div></div>" ).parent()
+ .addClass("ui-checkbox")
+ .append(this.labelElement);
+
+ this.boxElement = $("<div class='ui-checkbox-box ui-widget ui-state-active ui-corner-all'><span class='ui-checkbox-icon'></span></div>");
+ this.iconElement = this.boxElement.children( ".ui-checkbox-icon" );
+ this.checkboxElement.append(this.boxElement);
+
+ this.element.bind("click.checkbox", function() {
+ that._refresh();
+ });
+
+ this.element.bind("focus.checkbox", function() {
+ if ( that.options.disabled ) {
+ return;
+ }
+ that.boxElement
+ .removeClass( "ui-state-active" )
+ .addClass( "ui-state-focus" );
+ });
+
+ this.element.bind("blur.checkbox", function() {
+ if ( that.options.disabled ) {
+ return;
+ }
+ that.boxElement
+ .removeClass( "ui-state-focus" )
+ .not(".ui-state-hover")
+ .addClass( "ui-state-active" );
+ });
+
+ this.checkboxElement.bind("mouseover.checkbox", function() {
+ if ( that.options.disabled ) {
+ return;
+ }
+ that.boxElement
+ .removeClass( "ui-state-active" )
+ .addClass( "ui-state-hover" );
+ });
+
+ this.checkboxElement.bind("mouseout.checkbox", function() {
+ if ( that.options.disabled ) {
+ return;
+ }
+ that.boxElement
+ .removeClass( "ui-state-hover" )
+ .not(".ui-state-focus")
+ .addClass( "ui-state-active" );
+ });
+
+ if ( this.element.is(":disabled") ) {
+ this._setOption( "disabled", true );
+ }
+ this._refresh();
+ },
+
+ _refresh: function() {
+ var checked = this.element.is(":checked");
+ this.iconElement.toggleClass( "ui-icon ui-icon-check", checked ).attr( "aria-checked", checked );
+ },
+
+ widget: function() {
+ return this.checkboxElement;
+ },
+
+ destroy: function() {
+ this.boxElement.remove();
+ this.checkboxElement
+ .after( this.labelElement ).end();
+ this.element
+ .unwrap( "<div></div>" )
+ .unwrap( "<div></div>" );
+
+ $.Widget.prototype.destroy.apply( this, arguments );
+ },
+
+ _setOption: function( key, value ) {
+ if ( key === "disabled" ) {
+ this.element
+ .attr( "disabled", value );
+ this.checkboxElement
+ [ value ? "addClass" : "removeClass" ]( "ui-checkbox-disabled" );
+ }
+
+ $.Widget.prototype._setOption.apply( this, arguments );
+ },
+
+});
+
+}( jQuery ));

No commit comments for this range

Something went wrong with that request. Please try again.