Skip to content

Instantly share code, notes, and snippets.

@aziraphale

aziraphale/example.html

Forked from maxsum-corin/example.html
Created March 10, 2012 11:47
Show Gist options
  • Save aziraphale/2011225 to your computer and use it in GitHub Desktop.
Save aziraphale/2011225 to your computer and use it in GitHub Desktop.
Download ZIP
Short plugin that implements a vertical buttonset for radio buttons, checkboxes and button elements with jQuery UI (this fork also introduces correct plugin behaviour, re: collections/chainability)
Raw
example.html
<html>
<head>
<title>Test</title>
<link rel="stylesheet" media="all" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/start/jquery-ui.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
<script src="jquery.myplugin.js"></script>
<script>
$(document).ready(function(){
//call plugin
$("#radio").buttonsetv();
$("#checkbox").buttonsetv();
});
</script>
<style type="text/css">
body{ font: 70% "Trebuchet MS", sans-serif; margin: 50px;}
</style>
<body>
<h2> Radio Buttonset </h2>
<div id="radio">
<input type="radio" id="radio1" name="radio" value="1"/><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" value="2"/><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" value="3"/><label for="radio3">Choice 3</label>
</div>
<h2> Checkbox Buttonset </h2>
<div id="checkbox">
<input type="checkbox" id="check1" name="check" value="1"/><label for="check1">Choice 1</label>
<input type="checkbox" id="check2" name="check" value="2"/><label for="check2">Choice 2</label>
<input type="checkbox" id="check3" name="check" value="3"/><label for="check3">Choice 3</label>
</div>
</body>
</head>
</html>
Raw
jquery.myplugin.js
(function( $ ){
//plugin buttonset vertical
$.fn.buttonsetv = function() {
return this.each(function(){
$(this).buttonset();
$('.ui-button', this).css({'float': 'left', 'clear': 'left', 'margin-top': '0px', 'margin-bottom': '0px'});
$('.ui-button:first', this).first().removeClass('ui-corner-left').addClass('ui-corner-top');
$('.ui-button:last', this).last().removeClass('ui-corner-right').addClass('ui-corner-bottom');
mw = 0; // max width
$('.ui-button', this).each(function(index){
w = $(this).width();
if (w > mw) mw = w;
});
$('.ui-button', this).each(function(index){
$(this).width(mw);
});
});
};
})( jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment