From 8e696c48a016a5e50d3d45ab93e9028b36170a72 Mon Sep 17 00:00:00 2001 From: Igor Vaynberg Date: Mon, 28 May 2012 14:41:59 -0700 Subject: [PATCH] site reworked with jekyll. added 2.0 and latest pages --- .gitignore | 1 + _config.yml | 0 _includes/pages_list | 36 ++ _layouts/main.html | 146 +++++++ index.html | 166 +------- js/html5shim.js | 3 + select2-1.0.html | 138 +------ select2-latest.html | 883 +++++++++++++++++++++++++++++++++++++++++++ 8 files changed, 1089 insertions(+), 284 deletions(-) create mode 100755 _config.yml create mode 100755 _includes/pages_list create mode 100755 _layouts/main.html create mode 100755 js/html5shim.js create mode 100755 select2-latest.html diff --git a/.gitignore b/.gitignore index 579d4341..dbdcdbb3 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ .idea select2wip +_site diff --git a/_config.yml b/_config.yml new file mode 100755 index 00000000..e69de29b diff --git a/_includes/pages_list b/_includes/pages_list new file mode 100755 index 00000000..d8d3eb96 --- /dev/null +++ b/_includes/pages_list @@ -0,0 +1,36 @@ +{% comment %}{% endcomment %} + + {% for node in pages_list %} + {% if node.title != null %} + {% if group == null or group == node.group %} + {% if page.url == node.url %} +
  • {{node.title}}
    • + {% else %} +
  • {{node.title}}
    • + {% endif %} + {% endif %} + {% endif %} + {% endfor %} + +{% assign pages_list = nil %} +{% assign group = nil %} \ No newline at end of file diff --git a/_layouts/main.html b/_layouts/main.html new file mode 100755 index 00000000..b8de97d8 --- /dev/null +++ b/_layouts/main.html @@ -0,0 +1,146 @@ + + + + + {{ page.title }} + + + + + + + + + + + + + + + + + + + + + + + + + Fork me on GitHub +
    +
    +
    + {{ site.title }} +
      + {% assign pages_list = site.pages %} + {% assign group = 'navigation' %} + {% include pages_list %} +
    +
    +
    +
    + +
    + +
    +

    Select2

    +

    Select2 is a jQuery based replacement for select boxes. + It supports searching, remote data sets, and infinite scrolling of results. + Look and feel of Select2 is based on the excellent + Chosen library.

    +

    + Learn more on GitHub» + Download» +

    +
    + + + + {{ content }} + + +
    +
    +

    About

    +
    +
    +
    + + +
    +
    + +
    +
    + + +
    + + diff --git a/index.html b/index.html index fbe5070d..32fd00ed 100755 --- a/index.html +++ b/index.html @@ -1,44 +1,10 @@ - - - - - Select2 - - - +--- +layout: main +title: Select2 2.0 +group: navigation +--- - - - - - - - - - - - - - - - - - - - - -
    -
    -
    - - - - - -
    - -
    +
    +
    +
    + For latest version see the Select2 Latest link in the top menu.
    -
    - - Fork me on GitHub +
    -
    -
    -

    Select2

    -

    Select2 is a jQuery based replacement for select boxes. - It supports searching, remote data sets, and infinite scrolling of results. - Look and feel of Select2 is based on the excellent - Chosen library.

    -

    - Learn more on GitHub» - Download» -

    -
    - - - -
    +
    • Changelog
      • @@ -350,7 +236,7 @@ $("#e10_3").select2({

    Example Code

    -
    +
     <head>
     <link href="select2.css" rel="stylesheet"/>
     <script src="select2.js"></script>
@@ -992,31 +878,3 @@ $("#tags").select2({
       
 
       
-        
    
-      
    
-           
    About
    
-      
    
-      
    
-          
    
-
-              
-          
    
-      
    
-
-        
    
-
-        
    
-        
-
-
-
-
-
    - - diff --git a/js/html5shim.js b/js/html5shim.js new file mode 100755 index 00000000..e4704324 --- /dev/null +++ b/js/html5shim.js @@ -0,0 +1,3 @@ +/*! HTML5 Shiv vpre3.6 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed + Uncompressed source: https://github.com/aFarkas/html5shiv */ +(function(a,b){function h(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function i(){var a=l.elements;return typeof a=="string"?a.split(" "):a}function j(a){var b={},c=a.createElement,f=a.createDocumentFragment,g=f();a.createElement=function(a){if(!l.shivMethods)return c(a);var f;return b[a]?f=b[a].cloneNode():e.test(a)?f=(b[a]=c(a)).cloneNode():f=c(a),f.canHaveChildren&&!d.test(a)?g.appendChild(f):f},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+i().join().replace(/\w+/g,function(a){return c(a),g.createElement(a),'c("'+a+'")'})+");return n}")(l,g)}function k(a){var b;return a.documentShived?a:(l.shivCSS&&!f&&(b=!!h(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio{display:none}canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}mark{background:#FF0;color:#000}")),g||(b=!j(a)),b&&(a.documentShived=b),a)}var c=a.html5||{},d=/^<|^(?:button|form|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^<|^(?:a|b|button|code|div|fieldset|form|h1|h2|h3|h4|h5|h6|i|iframe|img|input|label|li|link|ol|option|p|param|q|script|select|span|strong|style|table|tbody|td|textarea|tfoot|th|thead|tr|ul)$/i,f,g;(function(){var c=b.createElement("a");c.innerHTML="",f="hidden"in c,f&&typeof injectElementWithStyles=="function"&&injectElementWithStyles("#modernizr{}",function(b){b.hidden=!0,f=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle).display=="none"}),g=c.childNodes.length==1||function(){try{b.createElement("a")}catch(a){return!0}var c=b.createDocumentFragment();return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}()})();var l={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:k};a.html5=l,k(b)})(this,document) \ No newline at end of file diff --git a/select2-1.0.html b/select2-1.0.html index 0f182bb0..f345a349 100755 --- a/select2-1.0.html +++ b/select2-1.0.html @@ -1,45 +1,10 @@ - - - - - Select2 - - - - - - - - - - - - - - - - +--- +layout: main +title: Select2 1.0 +group: navigation +--- + + - - - - - - -
    -
    -
    - - - - - -
    - -
    -
    -
    -
    - - Fork me on GitHub - -
    - -
    -

    Select2

    -

    Select2 is a jQuery based replacement for select boxes. - It supports searching, remote data sets, and infinite scrolling of results. - Look and feel of Select2 is based on the excellent - Chosen library.

    -

    - Learn more on GitHub» - Download» -

    -
    @@ -556,32 +462,4 @@ $("#e8_set").click(

    selected

    -

    Signals a selection has been made

    - - -
    -

    Community

    -
    -
    -
    - - -
    -
    - - -
    - - - - - -
    - - +

    Signals a selection has been made

    \ No newline at end of file diff --git a/select2-latest.html b/select2-latest.html new file mode 100755 index 00000000..be21f1e8 --- /dev/null +++ b/select2-latest.html @@ -0,0 +1,883 @@ +--- +layout: main +title: Select2 Latest +group: navigation +--- + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +

    Warning!

    + This page refers to an unreleased version of Select2 which may be unstable. For the latest stable + and previous versions please see links at the top. The code for this version is only available in the master branch. +
    +
    +
    + + +
    +
    + +
    +
    + + + +
    +
    +
    +

    Examples

    +
    +
    +
    + + +
    +
    +

    The Basics

    +

    Select2 can take a regular select box like this:

    +

    +

    and turns it into:

    +

    +
    +

    +

    with support for quick option filtering via a search box

    +
    +
    +

    Example Code

    +
    +<head>
+    <link href="select2.css" rel="stylesheet"/>
+    <script src="select2.js"></script>
+    <script>
+        $(document).ready(function() { $("#e1").select2(); });
+    </script>
+</head>
+<body>
+    <select id="e1">
+        <option value="AL">Alabama</option>
+        ...
+        <option value="WY">Wyoming</option>
+    </select>
+</body>
+
    +
    +
    + +
    +
    +

    Multi-Value Select Boxes

    +

    Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute. Select2 automatially picks up on this:

    +

    +
    +

    +
    +
    +

    Example Code

    + 
    +
    +
    +
    + + +
    + +
    +

    Placeholders

    +

    A placeholder value can be defined and will be displayed until a selection is made:

    +

    +
    +

    +

    +
    +

    +

    The placeholder can be declared via a data-placeholder attribute attached to the select, or via the placeholder configuration element as seen in the example code

    +

    Optionally, a clear button (visible once a selection is made) is available to reset the select box back to the placeholder value.

    + +
    +
    +

    Example Code

    + 
    +
    +
    +
    + +
    +
    +

    Minimum Input

    +

    Select2 supports a minimum input setting which is useful for large remote datasets where short search terms are not very useful:

    +

    +
    +

    +
    +
    +

    Example Code

    + 
    
+         
    
+        
    
+
+        
    
+          
    
+            
    Templating
    
+             
    Various display options of the Select2 component can be changed:
    
+             
    
+                 
    
+             
    
+          
    
+          
    
+            
    Example Code
    
+            
    
+         
    
+        
    
+
+       
    
+          
    
+            
    Loading Data
    
+             
    Select2 uses a function to load result data. Here is a trivial example that creates choices that consist of user's input repeated a number of times:
    
+             
    
+                 
+             
    
+             
    In order to take advantage of custom data loading Select2 should be attached to an input type='hidden' tag, otherwise data is parsed from select's option tags.
    
+          
    
+          
    
+            
    Example Code
    
+            
    +            
    
+         
    
+        
    
+
+      
    
+         
    
+           
    Loading Array Data
    
+            
    Select2 provides some shortcuts that make it easy to access local data stored in an array instead of having to write a query function mentioned in the example above.
    
+            
    Example below inlines the data by specifying an array in the data element. Items in such an array must have id and text keys.
    
+            
    
+                
+            
    
+            
    If your data does not have a text key, an alternative key can be specified as a string:
    
+             
    
+                 
+             
    
+             
    or as a function:
    
+             
    
+                 
+             
    
+         
    
+         
    
+           
    Example Code
    
+           
    +           
    
+        
    
+       
    
+          
+        
    
+           
    
+             
    Loading Remote Data
    
+              
    Select2 comes with AJAX/JSONP support built in. In this example we will search for a movie using Rotten Tomatoes API:
    
+              
    
+                  
+              
    
+              
    Example Code
    
+              
    
+              
    Select2 uses jQuery's $.ajax function to execute the remote call by default. An alternative transport function can be specified in the ajax settings, or an entirely custom implementation can be built by providing a custom query function instead of using the ajax helper
    
+           
    
+        
    
+        
    
+            
    
+              
    Infinite Scroll with Remote Data
    
+               
    Select2 supports lazy-appending of results when the result list is scrolled to the end.
+                   In order to enable the remote service must support some sort of a paging mechanism and
+                   the query function given to Select2 must take advantage of it. The following example demonstrates
+                   how this can be set up. Search for some keyword and then scroll the result list to the end to
+                   see more results load:
    
+               
    
+                   
+               
    
+              
    Example Code
    
+              
    
+            
    
+         
    
+
+        
    
+
+            
    
+            
    Pragmatic Access
    
+             
    Select2 supports methods that allow pragmatic control of the componentL
    
+                
    
+                  
+                  
+                  
+                  
+                
    
+             
    
+                 
    
+             
    
+                
    
+                  
+                  
+                  
+                  
+                
    
+              
    
+                  
    
+              
    
+          
    
+          
    
+            
    Example Code
    
+            
    
+         
    
+        
    
+
+      
    
+
+          
    
+              
    Change Event
    
+
+              
    Select2 triggers the change event on the original element whenever its value is changed by
+                  the user
    
+
+              
    
+
+              
    
+
+              
    
+          
    
+          
    
+              
    Example Code
    
+           
    +           
    
+          
    
+      
    
+      
    
+
+          
    
+              
    Tagging Support
    
+
+              
    Select2 can be used to quickly set up fields used for tagging
    
+
+              
    
+              
    Note that when tagging is enabled the user can select from pre-existing tags or create a new tag by
+                  picking the first choice which is what the user has typed into the search box so far.
    
+          
    
+          
    
+              
    Example Code
    
+           
    +           
    
+          
    
+      
    
+
+      
    
+
+          
    
+              
    Reacting to external value changes
    
+
+              
    Select2 can react to external value changes and keep its selection in-sync. This feature allows
+                  Select2 to work seamlessly with front-end frameworks that use data binding between ui components
+                  and model values.
    
+              

    
+              
     
    
+              
    This feature is only available when initSelection() function is provided in
+                  the options. This function is needed to map the choice ids set on the element to objects used by
+                  Select2. This function is set by default when Select2 is attached to a select or when
+                  the tags helper function is used.
    
+          
    
+          
    
+              
    Example Code
    
+           
    +           
    
+          
    
+      
    
+
+      
    
+
+          
    
+              
    Select2 Lifecycle
    
+
+              
    
+
+              
    
+              

    
+              
     
    
+          
    
+          
    
+              
    Example Code
    
+           
    +           
    
+          
    
+      
    
+
+      
+      
    
+      
+      
+      
+      
+      
+      
+      
+      
    
+
+        
    
+            
    Documentation
    
+        
    
+
+        
    
+            
    Constructor
    
+        
    
+        
+            
+                
+            
+            
+            
+            
+            
+            
+                
+                
+                
+            
+            
+                
+                
+                
+            
+            
+                
+                
+                
+            
+            
+            
+            
+            
+            
+            
+            
+            
+                
+                
+                
+            
+            
+            
+            
+        
    ParameterTypeDescription
    minimumInputLengthintNumber of characters necessary to start a search
    minimumResultsForSearchint
+                
    
+                    The minimum number of results that must be initially (after opening the dropdown for the first time)
+                    populated in order to keep the search field. This
+                    is useful for cases where local data is used with just a few results, in which case the search box
+                    is not very useful and wastes screen space.
+                
    
+                
    Only applies to single-value select boxes
    
+            
    placeholderobject/string
+                
    Initial value that is selected if no other selection is made.
    
+                
    
+                    The value can be specified either as an object or as a string. If
+                    specified as a string any custom formatSelection function will be
+                    bypassed and the string value will be rendered directly.
+                
    
+                
    The placeholder can also be specified as a data-placeholder attribute on the select
+                    or input element that Select2 is attached to. In this case only string
+                    values are supported
+                
    
+
+                
    Note that because browsers assume the first option element
+                    is selected in
+                    non-multi-value select boxes an empty first option element must be provided (<option></option>)
+                    for the placeholder to work.
+                
    
+                
+                
    When Select2 is used in multi-select mode the placeholder must be a string.
    
+            
    allowClearboolean
+                    
    
+                        Whether or not a clear button is displayed when the select box has a selection. The
+                        button,
+                        when clicked, resets the value of the select box back to the placeholder, thus this option is
+                        only
+                        available when the placeholder is specified.
+                    
    
+
+                    
    
+                        Also, note that this option only works with
+                        non-multi-value based selects because multi-value selects always provide such a button for every
+                        selected option.
+                    
    
+                
    multipleboolean
+                    
    
+                        Whether or not Select2 allows selection of multiple values.
+                    
    
+                    
    When Select2 is attached to a select element this value will be ignored and select's
+                        multiple attribute will be used instead.
+                    
    
+                
    closeOnSelectboolean
+                    
    
+                       If set to true the dropdown is not closed after a selection is made, allowing for rapid selection of multiple items. By default this option is disabled.
+                    
    
+
+                    
    
+                        Only applies when configured in multi-select mode.
+                    
    
+                
    idfunction
+                   Function used to get the id from the choice object or a string representing the key under which the id is stored.
+                   
    id(object)
    
+                   
+                       
+                       
+                       
+                   
    ParameterTypeDescription
    objectobjectA choice object
    <returns>stringthe id of the object
    
+                   The default implementation expects the object to have a id property that is returned.
+            
    formatSelectionfunction
+                Function used to render the current selection.
+                
    formatSelection(object)
    
+                
+                    
+                    
+                    
+                
    ParameterTypeDescription
    objectobjectThe selected result object returned from the query function
    <returns>stringHtml that represents the selection
    
+                The default implementation expects the object to have a text property that is returned.
+            
    formatResultfunction
+                Function used to render a result that the user can select.
+                
    formatResult(object)
    
+                
+                    
+                    
+                    
+                
    ParameterTypeDescription
    objectobjectOne of the result objects returned from the query function
    <returns>stringHtml that represents the result
    
+                The default implementation expects the object to have a text property that is returned.
+            
    formatNoMatchesfunction
+                Function used to render the "No matches" message
+                
    formatNoMatches(term)
    
+                
+                    
+                    
+                    
+                
    ParameterTypeDescription
    termstringSearch string entered by user
    <returns>stringMessage html
    
+            
    formatInputTooShortfunction
+                Function used to render the "Search input too short" message
+                
    formatInputTooShort(term, minLength)
    
+                
+                    
+                    
+                    
+                    
+                
    ParameterTypeDescription
    termstringSearch string entered by user
    minLengthintMinimum required term length
    <returns>stringMessage html
    
+            
    createSearchChoicefunction
+                Creates a new selectable choice from user's search term. Allows creation of choices not available via the query
+                function. Useful when the user can create choices on the fly, eg for the 'tagging' usecase.
+                
    createSearchChoice(term)
    
+                
+                    
+                    
+                    
+                
    ParameterTypeDescription
    termstringSearch string entered by user
    <returns>object (optional)Object representing the new choice.
+                        Must at least contain an id attribute.
    
+                If the function returns undefined or null no choice will be created. If a new
+                choice is created it is displayed first in the selection list so that user may select it by simply pressing
+                enter.
+                
+                
    When used in combination with input[type=hidden] tag care
+                must be taken to sanitize the id attribute of the choice object, especially stripping
+                , as it is used as a value separator
    
+            
    initSelectionfunction
+                Called when Select2 is created to allow the user to initialize the selection based on the value of the
+                element select2 is attached to.
+                
    
+                Essentially this is an id->object mapping function.
+                
    
+                
    initSelection(element)
    
+                
+                    
+                    
+                    
+                
    ParameterTypeDescription
    elementjQuery arrayelement Select2 is attached to
    <returns>object or array of objectsObject representing the choice
+                        to be selected, or an array of such objects in case Select2 is in multi mode.
    
+                
    This function will only be called when there is initial input to be processed.
    
+                Here is an example implementation used for tags. Tags are the simplest form of data where the id is also
+                the text:
+
    +$("#tags").select2({
+    initSelection : function (element) {
+        var data = [];
+        $(element.val().split(",")).each(function () {
+            data.push({id: this, text: this});
+        });
+        return data;
+    }
+});
+
    
+            
    queryfunction
+                    Function used to query results for the search term.
+                    
    query(options)
    
+                    
+                        
+                        
+                        
+                        
+                            
+                    
    ParameterTypeDescription
    options.termstringSearch string entered by user
    options.pageint1-based page number tracked by Select2 for use with infinite scrolling of results
    options.callbackfunctionCallback function that should be called with the result object. The result object:
+                                
+                                    
+                                    
+                                    
+                                
    ParameterTypeDescription
    result.results[object]Array of result objects. The default renderers expect objects with id and text keys. The id attribute is required, even if custom renderers are used.
    result.morebooleantrueif more results are available for the current search term
    
+                            
    
+                    
    In order for this function to work Select2 should be attached to a input type='hidden' tag instead of a select.
    
+                
    ajaxobject
+                Options for the built in ajax query function. This object acts as a shortcut for having to manually write a function that performs ajax requests. The built-in function supports more advanced features such as throttling and dropping out-of-order responses.
+
+                
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                
    ParameterTypeDescription
    transportfunctionFunction that will be used to perform the ajax request. Must be parameter-compatible with $.ajax. Defaults to $.ajax if not specified.
+                        Allows the use of various ajax wrapper libraries such as: AjaxManager. 
    urlstringAjax url
    dataTypestringtData type for the request. ajax, jsonp, other formats supported by jquery
    quietMillisintNumber of milliseconds to wait for the user to stop typing before issuing the ajax request
    datafunction
+                        Function to generate query parameters for the ajax request.
+                        
    data(term, page)
    
+                        
+                            
+                            
+                            
+                            
+                        
    ParameterTypeDescription
    termstringSearch term
    pageint1-based page number tracked by Select2 for use with infinite scrolling of results
    <returns>objectObject containing url paramters
    
+                    
    resultsfunction
+                        Function used to build the query results object from the ajax response
+                        
    results(data, page)
    
+                        
+                            
+                            
+                            
+                            
+                        
    ParameterTypeDescription
    dataobjectRetrieved data
    pageintPage number that was passed into the data function above
    <returns>objectResults object. See "options.callback" in the "query" function for format.
    
+                    
    
+                
    In order for this function to work Select2 should be attached to a input type='hidden' tag instead of a select.
    
+            
    dataarray/object
+                Options for the built in query function that works with arrays.
+                
    If this element contains an array, each element in the array must contain id and text keys
    
+                
    Alternatively, this element can be specified as an object in which results key must contain the data as an array and a text key can either be the name of the key in data items that contains text or a function that retrieves the text given a data element from the array
    
+            
    tagsarray/function
+                Puts Select2 into 'tagging'mode where the user can add new choices and pre-existing tags are provided via
+                this options attribute which is either an array or a function that returns an
+                array of objects or strings. If strings are used instead of objects
+                they will be converted into an object that has an id and text attribute equal
+                to the value of the string.
+            
    
+
+      
    
+          
    val
    
+      
    
+      
    Gets or sets the selection. If the value parameter is not specified, the id attribute of the currently selected element is returned. If the value parameter is specified it will become the current selection.
    
+      
+          
+              
+          
+          
+      
    ParameterTypeDescription
    value (optional)object
+
+              
+                    
+                        
+                    
+                    
+                        
+                        
+                        
+                    
+                  
+                      
+                      
+                      
+                  
+
+              
    Single-ValuedMulti-Valued
    Attached to selectValue of the value attribute of the option that should be selectedArray of values specified to the left. null for empty.
    Attached to input[type=hidden]An object representing the selection. Should at least contain an id key. The rest of the keys should be determined by the custom rendering function, the default rendering function only needs an additional text keyArray of objects specified to the left. null for empty.
    
+
+
+          
    
+      Example: 
    alert("Selected value is: "+$("#e8").select2("val")); $("#e8").select2("val", {id:"CA", text:"Califoria"});
    
+
+    
    
+        
    destroy
    
+    
    
+    
    Reverts changes to DOM done by Select2. Any selection done via Select2 will be preserved.
    
+
+    
    
+        
    open
    
+    
    
+    
    Opens the dropdown
    
+    
    
+        
    close
    
+    
    
+    
    Closes the dropdown
    
+
+
+      
    
+          
    Events
    
+      
    
+
+      
    
+          
    
+              
    change
    
+              
    Fired when selection is changed.
    
+              
    This event is not fired when the selection is changed using Select2's val() method.
    
+          
    
+      
    
+      
+
+