r2594 - plugins from Filament Group's lab.

Author: scottjehl
Date: Thu May 21 13:26:08 2009
New Revision: 2594
Added:
branches/labs/projects/button/
branches/labs/projects/button/index.html (contents, props changed)
branches/labs/projects/button/ui_demos.js (contents, props changed)
branches/labs/projects/daterangepicker/
branches/labs/projects/daterangepicker/css/
branches/labs/projects/daterangepicker/css/ui.daterangepicker.css
(contents, props changed)
branches/labs/projects/daterangepicker/index.html (contents, props
changed)
branches/labs/projects/daterangepicker/js/
branches/labs/projects/daterangepicker/js/daterangepicker.jQuery.js
(contents, props changed)
branches/labs/projects/menu/
branches/labs/projects/menu/fg.menu.css (contents, props changed)
branches/labs/projects/menu/fg.menu.js (contents, props changed)
branches/labs/projects/menu/index.html (contents, props changed)
branches/labs/projects/menu/jquery.hotkeys-0.7.8.js (contents, props
changed)
branches/labs/projects/menu/menuContent.html (contents, props changed)
branches/labs/projects/menu/spinner_bar.gif (contents, props changed)
branches/labs/projects/pxem/
branches/labs/projects/pxem/arrow.gif (contents, props changed)
branches/labs/projects/pxem/index.html (contents, props changed)
branches/labs/projects/pxem/pxem.jQuery.js (contents, props changed)
branches/labs/projects/selecttoslider/
branches/labs/projects/selecttoslider/css/
branches/labs/projects/selecttoslider/css/ui.slider.extras.css
(contents, props changed)
branches/labs/projects/selecttoslider/index.html (contents, props
changed)
branches/labs/projects/selecttoslider/js/
branches/labs/projects/selecttoslider/js/selectToUISlider.jQuery.js
(contents, props changed)
Log:
plugins from Filament Group's lab.
Added: branches/labs/projects/button/index.html
==============================================================================
--- (empty file)
+++ branches/labs/projects/button/index.html    Thu May 21 13:26:08 2009
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
+        <title>UI Buttons Demo</title>
+                <link type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/ui-darkness/ui.all.css"
rel="Stylesheet" />
+        <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+        <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
+
+        <script type="text/javascript" src="ui_demos.js"></script>
+
+        <style type="text/css">
+            .fg-button { display:-moz-inline-box; outline: 0; margin:0 4px 0 0;
padding: .4em 1em; text-decoration:none !important; cursor:pointer;
position: relative; text-align: center; zoom: 1; }
+            .fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px;
left: 50%; margin-left: -8px; }
+
+            a.fg-button { float:left; }
+
+            /* remove extra button width in IE */
+            button.fg-button { width:auto; overflow:visible; }
+
+            .fg-button-icon-left { padding-left: 2.1em; }
+            .fg-button-icon-right { padding-right: 2.1em; }
+            .fg-button-icon-left .ui-icon { right: auto; left: .2em; margin-left:
0; }
+            .fg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left:
0; }
+
+            .fg-button-icon-solo { display:block; width:8px; text-indent: -9999px;
}     /* solo icon buttons must have block properties for the text-indent to
work */
+
+            .fg-buttonset { float:left; }
+            .fg-buttonset .fg-button { float: left; }
+            .fg-buttonset-single .fg-button,
+            .fg-buttonset-multi .fg-button { margin-right: -1px;}
+
+            .fg-toolbar { padding: .5em; margin: 0; }
+            .fg-toolbar .fg-buttonset { margin-right:1.5em; padding-left: 1px; }
+            .fg-toolbar .fg-button { font-size: 1em; }
+
+            .fg-buttonset .fg-button.ui-state-hover { z-index: 1; }
+            .fg-buttonset .fg-button.ui-state-active { z-index: 2; }
+
+            /*demo page css*/
+            body { font: 62.5% Verdana, sans-serif; padding:30px 10px 20px; }
+            h2 { clear: both; margin:0; padding:2em 0 .5em; font-size:1.5em; }
+            .strike { text-decoration: line-through; }
+        </style>
+
+        <script type="text/javascript">
+            $(function(){
+                //all hover and click logic for buttons
+                $(".fg-button:not(.ui-state-disabled)")
+                .bind('mouseover', function(){
+                    $(this).addClass("ui-state-hover");
+                })
+                .bind('mousedown', function(){
+
$(this).parents('.fg-buttonset-single:first').find(".fg-button.ui-state-active").removeClass("ui-state-active");
+                        if(
$(this).is('.ui-state-active.fg-button-toggleable, .fg-buttonset-multi .ui-state-active')
){ $(this).removeClass("ui-state-active"); }
+                        else { $(this).addClass("ui-state-active"); }
+                })
+                .bind('mouseout mouseup', function(){
+                    $(this).removeClass("ui-state-hover");
+                    if(!
$(this).is('.fg-button-toggleable, .fg-buttonset-single .fg-button, .fg-buttonset-multi .fg-button')
){
+                        $(this).removeClass("ui-state-active");
+                    }
+                });
+            });
+        </script>
+
+        
+        <script type="text/javascript"
src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script>
+        <script>$(function(){ $('<div style="position: absolute; right: 10px;
top: 10px;" />').prependTo('body').themeswitcher(); });</script>
+
+    </head>
+    <body>
+
+

+
+
+<h2>Basic button from different types of markup</h2>
+<a href="#" class="fg-button ui-state-default ui-corner-all">Link</a>
+<button class="fg-button ui-state-default ui-corner-all"
type="button">Button element</button>
+<span href="#" class="fg-button ui-state-default ui-corner-all">Span</span>
+
+<h2>Buttons with priority & disabled</h2>
+<button class="fg-button ui-state-default ui-priority-primary
ui-corner-all">Primary</button>
+<button class="fg-button ui-state-default ui-priority-secondary
ui-corner-all">Secondary</button>
+<button class="fg-button ui-state-default ui-state-disabled
ui-corner-all">Disabled</button>
+
+<h2>Toggle buttons</h2>
+<button class="fg-button ui-state-default fg-button-toggleable
ui-corner-all">Toggle</button>
+<button class="fg-button ui-state-default fg-button-toggleable
ui-corner-all">Toggle</button>
+<button class="fg-button ui-state-default fg-button-toggleable
ui-corner-all">Toggle</button>
+
+<h2>Icons in buttons</h2>
+<a href="#" class="fg-button ui-state-default fg-button-icon-left
ui-corner-all"><span class="ui-icon ui-icon-circle-plus"></span>Previous</a>
+<a href="#" class="fg-button ui-state-default fg-button-icon-right
ui-corner-all"><span class="ui-icon ui-icon-circle-plus"></span>Next</a>
+
+<h2>Radio button style toggle buttons set</h2>
+<div class="fg-buttonset fg-buttonset-single">
+    <button class="fg-button ui-state-default ui-priority-primary
ui-corner-left">Visual</button>
+    <button class="fg-button ui-state-default
ui-priority-primary">Code</button>
+    <button class="fg-button ui-state-default
ui-priority-primary">Split</button>
+    <button class="fg-button ui-state-default ui-priority-primary
ui-corner-right">Preview</button>
+</div>
+
+<h2>Multiple select buttons set</h2>
+<div class="fg-buttonset fg-buttonset-multi">
+    <button class="fg-button ui-state-default
ui-corner-left"><b>B</b></button>
+    <button class="fg-button ui-state-default"><i>I</i></button>
+    <button class="fg-button ui-state-default"><u>U</u></button>
+    <button class="fg-button ui-state-default ui-corner-right"><span
class="strike">S</span></button>
+</div>
+
+<h2>Buttons in a Toolbar</h2>
+<div class="fg-toolbar ui-widget-header ui-corner-all ui-helper-clearfix">
+    <div class="fg-buttonset ui-helper-clearfix">
+        <a href="#" class="fg-button ui-state-default fg-button-icon-solo
ui-corner-all" title="Open"><span class="ui-icon
ui-icon-folder-open"></span> Open</a>
+        <a href="#" class="fg-button ui-state-default fg-button-icon-solo
ui-corner-all" title="Save"><span class="ui-icon ui-icon-disk"></span>
Save</a>
+        <a href="#" class="fg-button ui-state-default fg-button-icon-solo
ui-corner-all" title="Delete"><span class="ui-icon ui-icon-trash"></span>
Delete</a>
+    </div>
+    <div class="fg-buttonset fg-buttonset-multi">
+        <button class="fg-button ui-state-default
ui-corner-left"><b>B</b></button>
+        <button class="fg-button ui-state-default"><i>I</i></button>
+        <button class="fg-button ui-state-default
ui-corner-right"><u>U</u></button>
+    </div>
+    <div class="fg-buttonset ui-helper-clearfix">
+        <a href="#" class="fg-button ui-state-default fg-button-icon-solo
ui-corner-all" title="Print"><span class="ui-icon ui-icon-print"></span>
Print</a>
+        <a href="#" class="fg-button ui-state-default fg-button-icon-solo
ui-corner-all" title="Email"><span class="ui-icon
ui-icon-mail-closed"></span> Email</a>
+    </div>
+    <div class="fg-buttonset fg-buttonset-single ui-helper-clearfix">
+        <button class="fg-button ui-state-default ui-state-active
ui-priority-primary ui-corner-left">Edit</button>
+        <button class="fg-button ui-state-default ui-priority-primary
ui-corner-right">View</button>
+    </div>
+</div>
+
+    </body>
+</html>
+
+
Added: branches/labs/projects/button/ui_demos.js
==============================================================================
--- (empty file)
+++ branches/labs/projects/button/ui_demos.js    Thu May 21 13:26:08 2009
@@ -0,0 +1,42 @@
+$(function(){
+    // Accordion
+    $("#accordion").accordion({ header: "h3" });
+    // Tabs
+    $('#tabs').tabs();
+    // Dialog
+    $('#dialog').dialog({
+        autoOpen: false,
+        width: 600,
+        buttons: {
+            "Ok": function() {
+                $(this).dialog("close");
+            },
+            "Cancel": function() {
+                $(this).dialog("close");
+            }
+        }
+    });
+    // Dialog Link
+    $('#dialog_link').click(function(){
+        $('#dialog').dialog('open');
+        return false;
+    });
+    // Datepicker
+    $('#datepicker').datepicker({
+        inline: true
+    });
+    // Slider
+    $('#slider').slider({
+        range: true,
+        values: [17, 67]
+    });
+    // Progressbar
+    $("#progressbar").progressbar({
+        value: 20
+    });
+    //hover states on the static widgets
+    $('#dialog_link, ul#icons li').hover(
+        function() { $(this).addClass('ui-state-hover'); },
+        function() { $(this).removeClass('ui-state-hover'); }
+    );
+});
\ No newline at end of file
Added: branches/labs/projects/daterangepicker/css/ui.daterangepicker.css
==============================================================================
--- (empty file)
+++ branches/labs/projects/daterangepicker/css/ui.daterangepicker.css    Thu
May 21 13:26:08 2009
@@ -0,0 +1,103 @@
+/*styles for jquery ui daterangepicker plugin */
+
+.ui-daterangepickercontain {
+    position: absolute;
+    z-index: 999;
+}
+.ui-daterangepickercontain .ui-daterangepicker {
+    float: left;
+    padding: 5px !important;
+    width: auto;
+    display: inline;
+    background-image: none !important;
+    clear: left;
+}
+.ui-daterangepicker
ul, .ui-daterangepicker .ranges, .ui-daterangepicker .range-start, .ui-daterangepicker .range-end
{
+    float: left;
+    padding: 0;
+    margin: 0;
+}
+.ui-daterangepicker .ranges {
+    width: auto;
+    position: relative;
+    padding: 5px 5px 40px 0;
+    margin-left: 10px;
+}
+.ui-daterangepicker .range-start, .ui-daterangepicker .range-end {
+    margin-left: 5px;
+}
+.ui-daterangepicker button.btnDone {
+    margin: 0 5px 5px 0;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    clear: both;
+    cursor: pointer;
+    font-size: 1.1em;
+}
+.ui-daterangepicker ul {
+    width: 17.6em;
+    background: none;
+    border: 0;
+}
+.ui-daterangepicker li {
+    list-style: none;
+    padding: 1px;
+    cursor: pointer;
+    margin: 1px 0;
+}
+.ui-daterangepicker li.ui-state-hover, .ui-daterangepicker
li.ui-state-active {
+    padding: 0;
+}
+.ui-daterangepicker li.preset_0 {
+    margin-top: 1.5em !important;
+}
+.ui-daterangepicker .ui-widget-content a {
+    text-decoration: none !important;
+}
+.ui-daterangepicker li a {
+    font-weight: normal;
+    margin: .3em .5em;
+    display: block;
+}
+.ui-daterangepicker li span {
+    float: right;
+    margin: .3em .2em;
+}
+.ui-daterangepicker .title-start, .ui-daterangepicker .title-end {
+    display: block;
+    margin: 0 0 .2em;
+    font-size: 1em;
+    padding: 0 4px 2px;
+}
+.ui-daterangepicker .ui-datepicker-inline {
+    font-size: 1em;
+}
+.ui-daterangepicker-arrows {
+    padding: 2px;
+    width: 204px;
+    position: relative;
+}
+.ui-daterangepicker-arrows input.ui-rangepicker-input {
+    width: 158px;
+    margin: 0 2px 0 20px;
+    padding: 2px;
+    height: 1.1em;
+}
+.ui-daterangepicker-arrows .ui-daterangepicker-prev, .ui-daterangepicker-arrows .ui-daterangepicker-next
{
+    position: absolute;
+    top: 2px;
+    padding: 1px;
+}
+.ui-daterangepicker-arrows .ui-daterangepicker-prev {
+    left: 2px;
+}
+.ui-daterangepicker-arrows .ui-daterangepicker-next {
+    right: 2px;
+}
+.ui-daterangepicker-arrows .ui-daterangepicker-prev:hover,
+.ui-daterangepicker-arrows .ui-daterangepicker-next:hover,
+.ui-daterangepicker-arrows .ui-daterangepicker-prev:focus,
+.ui-daterangepicker-arrows .ui-daterangepicker-next:focus {
+    padding: 0;
+}
Added: branches/labs/projects/daterangepicker/index.html
==============================================================================
--- (empty file)
+++ branches/labs/projects/daterangepicker/index.html    Thu May 21 13:26:08
2009
@@ -0,0 +1,32 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
+        <title>Themeroller-Ready jQuery UI Range Picker</title>
+        <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
+        <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
+        <script type="text/javascript"
src="js/daterangepicker.jQuery.js"></script>
+        <link rel="stylesheet" href="css/ui.daterangepicker.css" type="text/css"
/>
+        <link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/ui-lightness/ui.all.css"
type="text/css" title="ui-theme" />
+        <script type="text/javascript">
+            $(function(){
+                 $('input').daterangepicker({arrows:true});
+             });
+        </script>
+
+        
+        <style type="text/css">
+            body { font-size: 62.5%; }
+            input {width: 196px; height: 1.1em; display:block;}
+        </style>
+    </head>
+    <body>
+

+
+        <input type="text" value="4/23/99" id="rangeA" />
+
+
+    </body>
+</html>
+
+
Added: branches/labs/projects/daterangepicker/js/daterangepicker.jQuery.js
==============================================================================
--- (empty file)
+++ branches/labs/projects/daterangepicker/js/daterangepicker.jQuery.js    Thu
May 21 13:26:08 2009
@@ -0,0 +1,715 @@
+/**
+ * --------------------------------------------------------------------
+ * jQuery-Plugin "daterangepicker.jQuery.js"
+ * by Scott Jehl, scott@filamentgroup.com
+ * http://www.filamentgroup.com
+ * reference article:
http://www.filamentgroup.com/lab/update_date_range_picker_with_jquery_ui/
+ * demo page: http://www.filamentgroup.com/examples/daterangepicker/
+ *
+ * Copyright (c) 2008 Filament Group, Inc
+ * Dual licensed under the MIT
(filamentgroup.com/examples/mit-license.txt) and GPL
(filamentgroup.com/examples/gpl-license.txt) licenses.
+ *
+ * Dependencies: jquery, jquery UI datepicker, date.js library (included
at bottom), jQuery UI CSS Framework
+ * Changelog:
+ *     10.23.2008 initial Version
+ * 11.12.2008 changed dateFormat option to allow custom date formatting
(credit: http://alexgoldstone.com/)
+ * 01.04.09 updated markup to new jQuery UI CSS Framework
+ * 01.19.2008 changed presets hash to support different text
+ * --------------------------------------------------------------------
+ */
+jQuery.fn.daterangepicker = function(settings){
+    var rangeInput = jQuery(this);
+
+    //defaults
+    var options = jQuery.extend({
+        presetRanges: [
+            {text: 'Today', dateStart: 'today', dateEnd: 'today' },
+            {text: 'Last 7 days', dateStart: 'today-7days', dateEnd: 'today' },
+            {text: 'Month to date', dateStart: function(){ return
Date.parse('today').moveToFirstDayOfMonth(); }, dateEnd: 'today' },
+            {text: 'Year to date', dateStart: function(){ var x=
Date.parse('today'); x.setMonth(0); x.setDate(1); return x; },
dateEnd: 'today' },
+            //extras:
+            {text: 'The previous Month', dateStart: function(){ return
Date.parse('1 month ago').moveToFirstDayOfMonth(); }, dateEnd: function(){
return Date.parse('1 month ago').moveToLastDayOfMonth(); } }
+            //{text: 'Tomorrow', dateStart: 'Tomorrow', dateEnd: 'Tomorrow' },
+            //{text: 'Ad Campaign', dateStart: '03/07/08', dateEnd: 'Today' },
+            //{text: 'Last 30 Days', dateStart: 'Today-30', dateEnd: 'Today' },
+            //{text: 'Next 30 Days', dateStart: 'Today', dateEnd: 'Today+30' },
+            //{text: 'Our Ad Campaign', dateStart: '03/07/08', dateEnd: '07/08/08' }
+        ],
+        //presetRanges: array of objects for each menu preset.
+        //Each obj must have text, dateStart, dateEnd. dateStart, dateEnd accept
date.js string or a function which returns a date object
+        presets: {
+            specificDate: 'Specific Date',
+            allDatesBefore: 'All Dates Before',
+            allDatesAfter: 'All Dates After',
+            dateRange: 'Date Range'
+        },
+        rangeStartTitle: 'Start date',
+        rangeEndTitle: 'End date',
+        nextLinkText: 'Next',
+        prevLinkText: 'Prev',
+        doneButtonText: 'Done',
+        earliestDate: Date.parse('-15years'), //earliest date allowed
+        latestDate: Date.parse('+15years'), //latest date allowed
+        rangeSplitter: '-', //string to use between dates in single input
+        dateFormat: 'm/d/yy', // date formatting. Available formats:
http://docs.jquery.com/UI/Datepicker/%24.datepicker.formatDate
+        closeOnSelect: true, //if a complete selection is made, close the menu
+        arrows: false,
+        posX: rangeInput.offset().left, // x position
+        posY: rangeInput.offset().top + rangeInput.outerHeight(), // y position
+        appendTo: 'body',
+        onClose: function(){},
+        onOpen: function(){},
+        onChange: function(){},
+        datepickerOptions: null //object containing native UI datepicker API
options
+    }, settings);
+
+
+    //custom datepicker options, extended by options
+    var datepickerOptions = {
+        onSelect: function() {
+                if(rp.find('.ui-daterangepicker-specificDate').is('.ui-state-active')){
+                    rp.find('.range-end').datepicker('setDate',
rp.find('.range-start').datepicker('getDate') );
+                }
+                var rangeA = fDate( rp.find('.range-start').datepicker('getDate') );
+                var rangeB = fDate( rp.find('.range-end').datepicker('getDate') );
+
+                //send back to input or inputs
+                if(rangeInput.length == 2){
+                    rangeInput.eq(0).val(rangeA);
+                    rangeInput.eq(1).val(rangeB);
+                }
+                else{
+                    rangeInput.val((rangeA != rangeB) ? rangeA+' '+ options.rangeSplitter
+' '+rangeB : rangeA);
+                }
+                //if closeOnSelect is true
+                if(options.closeOnSelect){
+                    if(!rp.find('li.ui-state-active').is('.ui-daterangepicker-dateRange')
&& !rp.is(':animated') ){
+                        hideRP();
+                    }
+                }
+                options.onChange();
+            },
+            defaultDate: +0
+    };
+
+    //change event fires both when a calendar is updated or a change event on
the input is triggered
+    rangeInput.change(options.onChange);
+
+
+    //datepicker options from options
+    options.datepickerOptions = (settings) ? jQuery.extend(datepickerOptions,
settings.datepickerOptions) : datepickerOptions;
+
+    //Capture D

Topic Participants
Richard Worth

r2594 - plugins from Filament Group's lab.

r2594 - plugins from Filament Group's lab.

Topic Participants

Richard Worth