Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Committing initial funkySelect files

  • Loading branch information...
commit 0bf425dbd9251c1ee75307861d0fc9159ef194d1 0 parents
@jjenzz jjenzz authored
Showing with 312 additions and 0 deletions.
  1. +57 −0 index.html
  2. +105 −0 jquery.funkySelect.css
  3. +150 −0 jquery.funkySelect.js
57 index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8" />
+ <title>funkySelect</title>
+ <meta name="robots" content="noindex, nofollow" />
+
+ <link rel="stylesheet" type="text/css" href="jquery.funkySelect.css" />
+
+ <style type="text/css">
+ body {
+ font-family: arial, helvetica, sans-serif;
+ font-size: 16px;}
+ </style>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+ <script type="text/javascript" src="jquery.funkySelect.js"></script>
+
+ <script type="text/javascript">
+ $(function() {
+ //console.time('test');
+ $('select').funkySelect();
+ //console.timeEnd('test');
+ });
+ </script>
+</head>
+<body>
+ <h1>CSS3 + jQuery funkySelect Select Boxes</h1>
+ <p>Here is an example of the funkySelect being applied:</p>
+
+ <form method="get" action="">
+ <select name="fruit">
+ <option>Please select a fruit...</option>
+ <optgroup label="Group1">
+ <option value="apple">Green Apple</option>
+ <option value="pear">Pear</option>
+ </optgroup>
+ <optgroup label="Group2">
+ <option value="orange">Large Orange</option>
+ <option value="banana">Ripe Banana</option>
+ </optgroup>
+ </select>
+
+ <select name="quantity">
+ <option>Please choose quantity...</option>
+ <option value="3">Three</option>
+ <option value="5">Five</option>
+ <option value="25">Twenty-five</option>
+ <option value="101">One-hundred-and-one</option>
+ </select>
+
+ <input type="submit" value="go" />
+ </form>
+
+ <p>Colours and general styling can be modified easily via CSS.</p>
+</body>
+</html>
105 jquery.funkySelect.css
@@ -0,0 +1,105 @@
+.jquery-funkyselect-container {
+display: inline-block;
+vertical-align: middle;}
+
+.jquery-funkyselect-container select {
+display: none;}
+
+.jquery-funkyselect a,
+.jquery-funkyselect-options a {
+text-decoration: none;
+color: #000;}
+
+.jquery-funkyselect-header {
+border: 1px solid #ccc;
+position: relative;
+min-height: 19px;
+padding: 2px;
+cursor: pointer;
+background-color: #fff;
+white-space: nowrap;}
+
+.jquery-funkyselect-open .jquery-funkyselect-header {
+background-color: #ffd;}
+
+.jquery-funkyselect-selected {
+overflow: hidden;
+display: block;}
+
+.jquery-funkyselect-arrow {
+background-color: #ccc;
+width: 20px;
+position: absolute;
+right: 2px;
+top: 2px;
+bottom: 2px;
+margin-left: 5px;}
+
+.jquery-funkyselect-header:hover .jquery-funkyselect-arrow {
+background-color: #ddd;}
+
+.jquery-funkyselect-arrow span {
+position: absolute;
+top: 50%;
+left: 50%;
+margin-top: -2px;
+margin-left: -5px;
+font-size: 0;
+line-height: 0;
+width: 0;
+border-top: 5px solid #666;
+border-left: 5px solid #ccc;
+border-right: 5px solid #ccc;}
+
+.jquery-funkyselect-header:hover .jquery-funkyselect-arrow span {
+border-left-color: #ddd;
+border-right-color: #ddd;}
+
+.jquery-funkyselect-options {
+border: 1px solid #ddd;
+background-color: #fff;
+-moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
+-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
+box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
+margin-top: 2px;
+display: none;
+position: absolute;}
+
+.jquery-funkyselect-open .jquery-funkyselect-options {
+display: block;}
+
+.jquery-funkyselect-options ul {
+margin: 2px;
+padding: 0;
+list-style-type: none;}
+
+.jquery-funkyselect-options li {
+padding: 2px 4px;
+white-space: nowrap;
+overflow: hidden;}
+
+.jquery-funkyselect-options li:hover {
+background-color: #eee;
+cursor: pointer;}
+
+.jquery-funkyselect-optiongroup {
+font-weight: bold;}
+
+li.jquery-funkyselect-optiongroup:hover {
+background-color: transparent;
+cursor: default;}
+
+.jquery-funkyselect-optiongroup ul {
+font-weight: normal;
+margin: 0;
+padding: 0;}
+
+.jquery-funkyselect-optiongroup li {
+padding-left: 15px;
+margin-left: -4px;
+margin-right: -4px;}
+
+.jquery-funkyselect-corners {
+-moz-border-radius: 4px;
+-webkit-border-radius: 4px;
+border-radius: 4px;}
150 jquery.funkySelect.js
@@ -0,0 +1,150 @@
+/*
+ * jQuery funkySelect
+*/
+
+// $('select').funkySelect();
+
+(function($) {
+
+ $.fn.funkySelect = function() {
+
+ var $s, $fs, header, sOptions, selected;
+ var funkySelect = [
+ '<div class="jquery-funkyselect">',
+ '<div class="jquery-funkyselect-header jquery-funkyselect-corners">',
+ '<span class="jquery-funkyselect-selected"></span>',
+ '<span class="jquery-funkyselect-arrow jquery-funkyselect-corners"><span></span></span>',
+ '</div>',
+ '<div class="jquery-funkyselect-options jquery-funkyselect-corners">',
+ '<ul></ul>',
+ '</div>',
+ '</div>'
+ ];
+
+
+ bindEvents();
+
+ function bindEvents() {
+ var parentClass = 'jquery-funkyselect-container';
+ var headerClass = 'jquery-funkyselect-header';
+ var optionClass = 'jquery-funkyselect-option';
+ var openClass = 'jquery-funkyselect-open';
+
+ $('html').bind('click', function(e) {
+ var target = $(e.target);
+
+ // on click outside of funkySelect boxes
+ if (target.parents('.' + parentClass).length === 0) {
+ $('.' + parentClass).removeClass(openClass);
+ }
+
+ // on funkySelect header click
+ if (target.hasClass(headerClass) || target.parents('.' + headerClass).length) {
+ $cont = target.parents('.' + parentClass);
+
+ if($cont.hasClass(openClass)) {
+ $cont.removeClass(openClass);
+ } else {
+ $('.' + parentClass).removeClass(openClass);
+ $cont.addClass(openClass);
+ }
+ }
+
+ // on funkySelect option click
+ if (target.hasClass(optionClass) || target.parents('.' + optionClass).length) {
+ $this = target.hasClass(optionClass) ? target : target.parents('.' + optionClass);
+ $cont = target.parents('.' + parentClass);
+
+ $cont.find('.jquery-funkyselect-selected').text(target.text());
+ $cont.find('.' + headerClass).trigger('click');
+
+ $cont.find('option').removeAttr('selected');
+ $cont.find('.' + $this.attr('rel')).attr('selected', 'selected');
+ }
+
+ });
+
+ }
+
+
+ function prepareMe() {
+
+ // prepend select options to funkySelect
+ var html = [];
+
+ $s.children().each(function(i, val) {
+ $this = $(this);
+
+ var addOption = function(el, i) {
+ el.addClass('opt' + i);
+
+ html.push('<li class="jquery-funkyselect-option jquery-funkyselect-corners" rel="opt' + i + '">');
+ html.push(el.text());
+ html.push('</li>');
+ }
+
+ if(this.tagName.toLowerCase() === 'optgroup') {
+ html.push('<li class="jquery-funkyselect-optiongroup jquery-funkyselect-corners">');
+ html.push($this.attr('label'));
+ html.push('<ul>');
+
+ $this.children().each(function(i, val) {
+ addOption($(this), i);
+ });
+
+ html.push('</ul></li>');
+ } else {
+ addOption($this, i);
+ }
+ });
+
+ sOptions.children().append(html.join(''));
+ selected.text($s.find('option').eq(0).text());
+
+ // fix floating
+ $fs.css('float', $s.css('float'));
+
+ adjustDimensions();
+
+ }
+
+
+ function adjustDimensions() {
+
+ // adjust height
+ selected.css('line-height', header.height() + 'px');
+
+ // adjust width
+ var optsWidth = sOptions.outerWidth();
+ var arrowWidth = header.find('.jquery-funkyselect-arrow').eq(0).outerWidth(true);
+ var width = optsWidth + arrowWidth;
+
+ sOptions.css('width', width + 'px');
+
+ if(parseInt($s.css('width'), 10) > 0) {
+ width = parseInt($s.css('width'), 10);
+ }
+
+ $fs.css('width', width + 'px');
+
+ }
+
+
+ return this.each(function() {
+
+ $s = $(this);
+ $s.wrap('<div class="jquery-funkyselect-container"></div>');
+
+ $fs = $s.parent();
+ $fs.prepend(funkySelect.join(''));
+
+ sOptions = $fs.find('.jquery-funkyselect-options').eq(0);
+ header = $fs.find('.jquery-funkyselect-header').eq(0);
+ selected = $fs.find('.jquery-funkyselect-selected').eq(0);
+
+ prepareMe();
+
+ });
+ };
+
+})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.