عکس 4xmen
Tree Select jQuery pluginJavaScript
موضوع‌ها
۱
فورک‌ها
۴
ستاره‌ها
۸
تاریخ ایجاد
۵ بهمن ۱۳۹۷
آخرین بروزرسانی
۴ ماه قبل
لایسنس
GNU General Public License v3.0

Jquery Tree Select

Tree select plugin for jquery

installation

  • npm:
    • npm i x-tree-select
  • yarn:
    • yarn add x-tree-select

Usage

  • Include css file:

    •   <link rel="stylesheet" href="../dist/x-tree-select.css">
      
  • Include js file:

    •   <script src="../dist/x-tree-select.js"></script>
      
  • Add to input: ```html

    
    ## how use in webpack
    + import the module: 
    
    ``import xtreeselec from 'x-tree-select';``
    + add your element:
    
    ``<input type="text" name="test" class="treeSelect" placeholder="plz select"/>``
    
    + initialze the element with js:
    ```javascript
    $(".treeSelect").treeSelect({
            datatree: [
                // your json here
            ]
          });
    
    • for example in webpack vuejs ```html

      
      ## Options
      The tree select options you can customize your plugine usagae
      
      | Option | Default | Description |
      | ------ | ------ | ------ | 
      | `direction`| ltr | you can use rtl too for your project|
      | `searchable`| false | searchable element |
      | `datatree`| []| The data need navigate in tree select watch abow example to how bind this value|
      |`mainTitle`| "Main category"| The title of back button to main category list |
      |`transition`| "fade"| The change page animation transition effect |
      |`json`| `{title: 'title',value: 'value',child: 'child'}`| The json for your data tree key names you can change keys|
      | `selectablePrernt`| false | Is the parent selectable |
      
      ## events
      The event you can use for tree select
      
      ### onOpen
       Triggered when opening select input
       sample:
       ```javascript
       $("#tree-select").treeSelect({
           onOpen: function(){
               alert('opened');
           }
       });
      

      onClose

      Triggered when closing select input sample:

      $("#tree-select").treeSelect({
          onClose: function(){
              alert('closed');
          }
      });
      

      onSelect

      Triggered when selecting select input sample:

      $("#tree-select").treeSelect({
          onSelect: function(selected){
              console.log(selected);
          }
      });
      

      onChange

      Triggered when change select input value sample:

      $("#tree-select").treeSelect({
          onChange: function(oldVal,newVal){
              console.log(oldVal,newVal);
          }
      });
      

      Browser compatibility

      • ie IE >= 9
      • edge Edge all version
      • firefox Firefox >= 16
      • safari Safari >=11
      • chrom/chromium chrome / chromium >= 26
      • opera Opera >=15
      • android Android browser >= 4.4
      • Blackberry Browser >= 10
      • ios safari iOS Safari >= 7

      Support

      If you found a bug or have a feature suggestion, please submit it in the Issues tracker.

      Demo

      See demo/index.html for demo.

      you can see online demo (example) here:

      http://4xmen.ir/github_example/tree-select/demo/