working on it ...

Filters

Explore Public Snippets

Sort by

Found 223 snippets matching: jquery-ui

    public by sTiLL-iLL @ SniPitz-KND modified Nov 8, 2014  3690  2  7  19

    Kewel KloCK widGEt exAmple

    pretty cool, simple, fun.... Like It or Else.
    <!-- Kewel Klock yEr WidGEt -->
    
    <!DOCTYPE html>
    <html>
     
        <head runat="server">
            <meta charset="utf-8">
            <title></title>
            <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
            <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
            <script>
                $(document).ready(function() {
                    $(ptmr).click(function() {
                        $("#dmo").css("background-color", "gray")
                            .css("border-radius", "6px")
                            .css("border", "solid 1px black")
                            .css("height", "110px")
                            .css("width", "135px")
                            .css("padding", "6px")
                            .css("padding-top", 1);
                    });
                });
     
                var ptmr = function() {
                  var ivl = -1;
                    $('button').click(function(event) {
                        $('#demo').toggle(this, function() {
                            $("#demo").hide();
                        });
                        return false;
                    });
                    $(window).bind('unload', function() {
                        clearInterval(ivl);
                    });
                    return ivl = setInterval(function() {
                        var d = new Date(),
                        t = d.toLocaleTimeString();
                        $("#demo").html(t);
                    }, 1000);
                }
            </script>
        </head>
        <body style="">
            <div style="position: fixed; top: 0px; left: 0px; height: 0px; width: 0px; z-index: 9999999;">
                <div style="position: fixed; top: 100%; height: 0px;">
                    <div style="position: relative;"></div>
                </div>
            </div>
            <div id="dmo" style="background-color: gray; border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; border: 1px solid black; height: 110px; width: 125px; padding: 1px 8px 8px;">
                 <h2 id="demo" style="display: none;">11:59:04 AM</h2>
                <button id="show">tHe tiMe?</button>
            </div>
        </body>
    </html>
    </html>

    external by chokuryu modified Jan 2, 2015  68  0  1  0

    autocomplete by jquery-ui

    autocomplete by jquery-ui: autocomplete.txt
    <!doctype html>
    <html lang="jp">
    	<head>
    		<meta charset="utf-8">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    		<title>実験アプリケーション</title>
    		<!-- <link rel="stylesheet" href="main.css"> -->
    		<link href="./jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
    		 <style>
    			/* autocomplete */
    			.ui-autocomplete {
    				max-height: 200px;
    				overflow-y: auto;
    				/* prevent horizontal scrollbar */
    				overflow-x: hidden;
    			}
    			/* IE 6 doesn't support max-height
    			* we use height instead, but this forces the menu to always be this tall
    			*/
    			* html .ui-autocomplete {
    				height: 200px;
    			}
    		</style>
    		<script src="./js/lib/jquery-1.10.2.js"></script>
    		<script src="./jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>
    	</head>
    	
    	<body>
    		<div>AutocompleteTest</div>
    		<input type="text" id="autocomplete" />
    
    		<script src="./js/main.js"></script>
    	</body>
    </html>
    
    
    
    
    $(function(){
    	var availableTags = [
    		"ActionScript",
    		"AppleScript",
    		"Asp",
    		"BASIC",
    		"C",
    		"C++",
    		"Clojure",
    		"COBOL",
    		"ColdFusion",
    		"Erlang",
    		"Fortran",
    		"Groovy",
    		"Haskell",
    		"Java",
    		"JavaScript",
    		"Lisp",
    		"Perl",
    		"PHP",
    		"Python",
    		"Ruby",
    		"Scala",
    		"Scheme"
    	];
    	// jquery-uiのautocompleteウィジェットについて
    	// ・文字列の変更が連続する場合sourceメソッドの連続呼び出し防止がかかっている。ラグは300~500ms程度
    	// ・検索結果0件の場合はsourceメソッドは実行されていない。
    	var getListByUserInput = function( data, callback ) {
    		
    		// input要素の入力値を取得
    		var str = data.term;
    		//console.log( 'in: ' + str );
    
    		// 候補データの取得結果を配列として第2引数のコールバック関数にわたすとオートコンプリートに反映される。
    		setTimeout( function() {
    			callback(availableTags/*[
    			str + "あ",
    			str + "い",
    			str + "う",
    			str + "え",
    			str + "お",
    			str + "か",
    			str + "き",
    			str + "く"
    			]*/);
    		}, 200 );
    	};
    	$( "#autocomplete" ).autocomplete({
    		source: getListByUserInput,
    		delay: 200
    	});
    	// リストブロックの最大高さなどはCSSにて指定(.ui-autocomplete)
    });
    
    
    
    

    external by Sean Dawson modified Jan 7, 2015  22  0  1  0

    Directive to bind jQuery-UI slider to Angular js and ngChange support

    Directive to bind jQuery-UI slider to Angular js and ngChange support: gistfile1.js
    // Modified from http://stackoverflow.com/a/25585402/1153203
    // to support ngModel attributes that are getterSetter functions
    // see "Binding to a getter/setter" in
    //      https://docs.angularjs.org/api/ng/directive/ngModel
    
    (function (module, require) {
      'use strict';
    
        var Utils = require('../../shared/utils.js');
    
        module.exports = ['$parse', '$timeout', function($parse, $timeout) {
            return {
                restrict: 'AE',
                require: 'ngModel',
                link: function(scope, element, attrs, ngModel) {
    
                    var slider = element.slider({
                        value: ngModel.$viewValue,
                        min: parseFloat($parse(attrs.min)(scope)),
                        max: parseFloat($parse(attrs.max)(scope)),
                        step: parseFloat($parse(attrs.step)(scope)),
                        slide: function(event, ui) {
                            scope.$apply(function() {
                                ngModel.$setViewValue(ui.value);
                            });
                        }
                    });
    
                    ngModel.$render = function () {
                        var newValue = ngModel.$viewValue;
                        element.slider('value', newValue);
                    };
    
                }
            };
        }];
    
    })(module, require);
    
    
    

    external by Sean Dawson modified Jan 7, 2015  22  0  1  0

    Directive to bind jQuery-UI slider to Angular js

    Directive to bind jQuery-UI slider to Angular js: gistfile1.js
    // Modified from http://stackoverflow.com/a/25585402/1153203
    // to support ngModel attributes that are getterSetter functions
    // see "Binding to a getter/setter" in
    //      https://docs.angularjs.org/api/ng/directive/ngModel
    
    (function (module, require) {
      'use strict';
    
        module.exports = ['$parse', function($parse) {
            return {
                restrict: 'AE',
                link: function(scope, element, attrs) {
                    var getModel = function() {
                        var getter = $parse(attrs.ngModel);
                        var value = getter(scope);
                        if (typeof(value) === 'function') {
                            return value();
                        } else {
                            return value;
                        }
                    };
    
                    var setModel = function(newValue) {
                        var getter = $parse(attrs.ngModel);
                        var setter = getter.assign;
                        var value = getter(scope);
                        if (typeof(value) === 'function') {
                            value(newValue);
                        } else {
                            setter(scope, newValue);
                        }
                    };
    
                    element.slider({
                        value: getModel(),
                        min: parseFloat($parse(attrs.min)(scope)),
                        max: parseFloat($parse(attrs.max)(scope)),
                        step: parseFloat($parse(attrs.step)(scope)),
                        slide: function(event, ui) {
                            scope.$apply(function() {
                                setModel(ui.value);
                            });
                        }
                    });
                }
            };
        }];
    
    })(module, require);
    
    
    

    external by acidsound modified Feb 4, 2014  908  1  3  0

    jquery-UI datepicker 한글화

    jquery-UI datepicker 한글화: datepicker-ko-KR.js
    /* Chinese initialisation for the jQuery UI date picker plugin. */
    /* Written by jhlee (jhlee@appsoulute.com). */
    (function( factory ) {
        if ( typeof define === "function" && define.amd ) {
    
            // AMD. Register as an anonymous module.
            define([ "../jquery.ui.datepicker" ], factory );
        } else {
    
            // Browser globals
            factory( jQuery.datepicker );
        }
    }(function( datepicker ) {
        datepicker.regional['ko-KR'] = {
            closeText: '닫기',
            prevText: '&#x3C;이전 월',
            nextText: '다음 월&#x3E;',
            currentText: '오늘',
            monthNames: ['1월','2월','3월','4월','5월','6월',
                '7월','8월','9월','10월','11월','12월'],
            monthNamesShort: ['1월','2월','3월','4월','5월','6월',
                '7月','8月','9月','10月','11月','12月'],
            dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'],
            dayNamesShort: ['일주일','월요일','화요일','수요일','목요일','금요일','토요일'],
            dayNamesMin: ['일','월','화','수','목','금','토'],
            weekHeader: '주',
            dateFormat: 'yymmdd',
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: true,
            yearSuffix: '년'};
        datepicker.setDefaults(datepicker.regional['ko-KR']);
    
        return datepicker.regional['ko-KR'];
    
    }));
    
    

    external by Siphion modified Jun 5, 2015  748  0  3  0

    Sharepoint Autocomplete - autocomplete input using list data + setting other dom values at selection + dynamic caml extension (requirements: jquery, jquery-ui, spservices) (compatibility: IE8+ and modern browsers)

    Sharepoint Autocomplete - autocomplete input using list data + setting other dom values at selection + dynamic caml extension (requirements: jquery, jquery-ui, spservices) (compatibility: IE8+ and modern browsers): autocompletesp.js
    'use strict';
    
    var AutocompleteSP = function (selector, site, list, field, viewFields, minLength, dynQuery) {
    
        var fieldsMapping = {};
        $().SPServices({
            operation : 'GetList',
            async:true,
            webURL: site,
            listName : list,
            completefunc : function (xData, Status) {
                if(Status === 'success') {
                    $(xData.responseXML).find('Field').each(function (i, e) {
                        fieldsMapping[$(e).attr('Name')] = $(e).attr('DisplayName');
                    });
                }
            }
        });
    
        var search = function (value, site, list, field, callback) {  
    
            var CAMLQuery = '';
    
            if(dynQuery !== undefined) {
                CAMLQuery = '<Query><And><Where><Contains><FieldRef Name="' + field + '"/>' +
                            '<Value Type="Text">'+ value +'</Value></Contains>' +
                            dynQuery() + '</And></Where></Query>';
            } else {
                CAMLQuery = '<Query><Where><Contains><FieldRef Name="' + field + '"/>' +
                            '<Value Type="Text">'+ value +'</Value></Contains></Where></Query>';
            }
    
    
            $().SPServices({
                operation: 'GetListItems',
                async: true,
                webURL: site,
                listName: list,
                CAMLQuery : CAMLQuery,
                completefunc: function(xData, Status) {
                    if(Status === 'success') {
                        callback($(xData.responseXML).find('z\\:row,row').map(function (i, e) {
                            var item = {};
                            $.each([{ show: false, field: field }].concat(viewFields), function (i, elem) {
                                var val = {
                                    original : $(e).attr('ows_' + elem.field)
                                };
                                
                                if(val.original !== undefined) {
                                    if(val.original.indexOf(';#') > 0) {
                                        val.id = $.map(val.original.split(';#'), function (e, i) {
                                            if(i % 2 === 0)
                                                return e;
                                        }).join(';#;#');
                                    }
        
                                    if(val.original.indexOf(';#') !== -1) {
                                        if(val.original.indexOf(';#') === 0) { //choice
                                            val.output = val.original.split(';#').join(';');
                                        } else {
                                            val.output = $.map(val.original.split(';#'), function (e, i) {
                                                if(i % 2 !== 0)
                                                    return e;
                                            }).join(';');
                                        }
                                    } else {
                                        val.output = val.original;
                                    }
                                } else {
                                    val.output = '';
                                }
                                
                                if(elem.customValue) {
                                    elem.customValue(val);
                                }
    
                                item[elem.field] = val;
                            });
                            return item;
                        }));
                    }
                }
            });
        };
    
        var renderViewFields = function (item) {
            return  $.map(viewFields, function (e) {
                        if(e.show === true)
                            return fieldsMapping[e.field] + ': ' + item[e.field].output;
                    }).join(' - ');
        };
    
        $(selector).autocomplete({    
            minLength : minLength,
            source: function (req, add) {  
                search(req.term, site, list, field, add);  
            },/*
            focus: function (event, ui) {
                $(selector).val(ui.item[field].output);
                return false;
            },*/
            select: function (event, ui) {
                $(selector).val(ui.item[field].output);
                $.each(viewFields, function (i, e) {
                    if(e.associate)
                        e.associate.val(ui.item[e.field][e.associateValue]);
                });
                return false;
            }, 
            change : function (event, ui) {
                if(!ui.item) {
                    $(selector).val('');
                    $.each(viewFields, function (i, e) {
                        if(e.associate)
                            e.associate.val('');
                    });
                }
            }
        }).autocomplete('instance')._renderItem = function (ul, item) {
            return $('<li>').append('<a><b>' + item[field].output + '</b><br>' + renderViewFields(item) + '</a>').appendTo(ul);
        };
    };
    
    /*
     * usage
     * associateValue: 
     *      original : valore originale non lavorato del field( con tanto di ;# )
     *      output : valore prettamente grafico del field (rimozione di ;# ed id) (viene utilizzato nella grafica)
     *      id : valore id del field (se sono tanti vengono forniti con il separatore ;# esempio: 1;#;#2;#;#3)
     */
    
    /*
    AutocompleteSP('[title="ToSearch"]', '/', 'listName', 'internalNameToSearch', [
        { show : true, field : 'internalNameSomething1', associate : $('input[title="something1"]'), associateValue : 'original' }, 
        { show : true, field : 'internalNameSomething2'}, 
        { show : false, field : 'internalNameSomething3', associate : $('input[title="something3"]'), associateValue : 'output'}
    ], 3, function () {
        return '<Eq><FieldRef Name="internalNameSomething4"/><Value Type="LookupMulti">' + 
                    $('input[title="something4"]').val() + '</Value></Eq>';
    });
    */
    
    

    external by Adam George modified Aug 3, 2014  520  0  3  0

    Stylesheet which corrects several issues with RefineryCMS when the jquery-ui stylesheet is included

    Stylesheet which corrects several issues with RefineryCMS when the jquery-ui stylesheet is included: refinery-jquery-ui-compatibility.css.scss
    /*
     * Styles so Refinery admin is compatible with jquery-ui
     */
    
    .refinery-ui-corner-all {
      border: none;
    }
    
    #menu {
      &.ui-corner-all {
        border: none;
      }
    
      &.ui-widget {
        font-family: inherit;
        color: inherit;
      }
    }
    
    #page-tabs {
      &.ui-widget {
        font-family: inherit;
        font-size: inherit;
        color: inherit;
      }
    
      &.ui-corner-all {
        border: none;
      }
    
      &.ui-tabs {
        padding: 0;
    
        .ui-tabs-panel {
          padding: 0;
        }
    
        .ui-tabs-nav li {
          &.ui-state-default a {
            padding: 8px 13px;
          }
    
          &.ui-state-active a {
            padding: 11px 13px;
          }
        }
      }
    
      #page_parts {
        &.ui-corner-all {
          border: none;
        }
    
        &.ui-widget-header {
          background: none;
    
          .ui-state-default {
            border: none;
            background: none;
            padding-bottom: 0;
            margin: 0 2px 0 0;
          }
        }
    
        &.ui-helper-reset {
          line-height: inherit;
        }
    
        .ui-tabs-anchor {
          color: white;
        }
      }
    
      #page_part_editors {
        .ui-corner-bottom {
          border: none;
        }
      }
    }
    
    

    external by Jinyu Zhang modified Aug 13, 2015  359  0  3  0

    Adding jquery-ui datepicker to rails view

    Adding jquery-ui datepicker to rails view: jquery-ui-datepicker-rails-part1.html.haml
    # in your application layout (using HAML)
    = javascript_include_tag '//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js'
    = stylesheet_link_tag "//ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css"
    
    # in your view (HAML + simple_form, simplified for easier reading)
    = simple_form_for @bp_reading do |f|
      = f.input :recorded_at, :as => :string, :input_html => { :class => 'jquery-ui-date'}
      = f.button :submit, :disable_with => "Saving...", :value => "Save"
    
    # in your javascript (coffeescript)
    $ ->
      $(".jquery-ui-date").datepicker()
    
    

    external by nborko modified Mar 28, 2016  242  0  3  0

    Like jquery-ui scrollParent function except it works on jQuery objects containing multiple elements

    Like jquery-ui scrollParent function except it works on jQuery objects containing multiple elements: jquery.scrollparent.js
    /* like jquery-ui scrollParent function except it works on jQuery objects containing multiple elements */
    (function ($) {
        $.fn.scrollParent = (function (overflowRegex) {
            return function () {
                return $($.unique(this.map(function () {
                    var position = $(this).css('position'),
                        excludeStaticParent = position === 'absolute',
                        scrollParent = $(this).parents().filter(function() {
                            var parent = $(this);
                            if (excludeStaticParent && parent.css('position') === 'static') {
                                return false;
                            }
                            return (overflowRegex).test(parent.css('overflow') + parent.css('overflow-y') + parent.css('overflow-x'));
                        }).eq(0);
                    return position === 'fixed' || !scrollParent.length ? $(this.ownerDocument || document) : scrollParent.get();
                }).get()));
            };
        })(/(auto|scroll)/);
    })(jQuery);
    
    

    external by sakuraya modified Sep 20, 2015  164  0  2  0

    Fallback for Failure of CDN: Bootstrap, jQuery, jQuery-ui

    Fallback for Failure of CDN: Bootstrap, jQuery, jQuery-ui: add_to_app.blade.php
    <!-- JQueryの読み込み -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="venders/jquery/2_1_1/jquery-2.1.1.min.js"><\/script>');</script>
     
    <!-- JQuery UI(.css)の読み込み -->
    <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <div class="ui-helper-hidden"></div>
    <script>
        // jQuery UI CSS Fallback
        $(function () {
            if ($('.ui-helper-hidden:first').is(':visible') === true) {
                $('<link rel="stylesheet" type="text/css" href="venders/jquery_ui/1_11_2/jquery-ui.min.css" />').appendTo('head');
            }
        });
    </script>
     
    <!-- JQuery UI(.js)の読み込み -->
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script>window.jQuery.ui || document.write('<script src="venders/jquery_ui/1_11_2/jquery-ui.min.js"><\/script>')</script>
     
    <!-- Bootstrap(.css)の読み込み -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script>
        // Bootstrap CSS Fallback
        $(function () {
            if ($('body').css('color') !== 'rgb(51, 51, 51)') {
                $('<link rel="stylesheet" type="text/css" href="venders/bootstrap/3_3_0/css/bootstrap.min.css" />').appendTo('head');
            }
        });
    </script>
     
    <!-- Bootstrap(.js)の読み込み -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script>$.fn.modal || document.write('<script src="venders/bootstrap/3_3_0/js/bootstrap.min.js"><\/script>')</script>
    
    
    • Public Snippets
    • Channels Snippets