DataTree | Mini super files

DataTree

It's a pure JavaScript framework and it handles large tree types of data. dataTree is used to simple, fast, and lite weight. CRUD (Create, Read, Update, Delete) options available.

singleKoppu - PHP file manager

It is the file manager. It has a single file, this file does all tasks. (PHP File Manager)

MSFmultiSelect | Multiselect | Mini Super Files

MSFmultiSelect

MSFmultiSelect (multiselect) is a pure JavaScript user-friendly multiselect plugin, don't need jQuery. It's very easy to use for developers and fast. (web development tool).

Example Code

<script src="MSFmultiSelect.js"></script>
<link rel="stylesheet" type="text/css" href="MSFmultiSelect.css"/>
<div id='myselect'>
  <select id='multiselect' name='countries[]' multiple='multiple'>
    <option value='1' selected='selected'>Iceland</option>
    <option value='2' selected='selected'>Indonesia</option>
    <option value='3' selected='selected'>India</option>
    <option value='4'>Iran</option>
    <option value='5'>Iraq</option>
    <option value='6'>Ireland</option>
    <option value='7'>Isle of Man</option>
    <option value='8'>Israel</option>
  </select>
</div>
<script>
var select = new MSFmultiSelect(
 document.querySelector('#multiselect'),
 { 
  onChange:function(checked,value,instance){
   console.log(checked,value,instance); 
  },
  selectAll:true,
  appendTo:'#myselect' 
 } 
);
</script>

Syntax (arguments)

new MSFmultiSelect(element)
new MSFmultiSelect(element,settings)

element = document.getElementById('multiselect')
settings = { 
 width:350,
 height:40,
 className:'myclass',
 onChange:function(checked,value,instance){
  console.log(checked,value,instance);
 },
 selectAll:true,
 appendTo:'#myselect',
 readOnly:true
}

element

Give DOM select element, this element posted in your backend.

settings (Optional)

Give the object of settings your multiselect.

1. appendTo : give element selector string, it uses to target place to create multiselect.
2. width : It is control of the mulitiselect width.
3. height : It is control of the mulitiselect height.
4. className : if you need any custom style, give css class name, it will apply to mulitiselect.
5. onChange : when it changed, this callback function, there is three-parameter in this function.
   1. checked : you receive boolean data, selected item checked, or unchecked.
   2. value : you get selected item value.
   3. instance : it's instance variable of mulitiselect, you can access multiselect properties and methods
6. selectAll : if you give true value, select all options to enable.
7. readOnly : if you give true value, the user can not modify multiselect options.

MSFmultiSelect Methods

MSFmultiSelect.setValue(sellectedValues)

This method used to add selected values, this method needs one argument, that argument value has select option values in an array format.

• code : select.setValue(['4','8']); //give select option values in array

MSFmultiSelect.removeValue(removeSellectedValues)

This method used to remove selected values, this method needs one argument, that argument value has select option values in an array format.

• code : select.removeValue(['4','8']); //give select option values in array

MSFmultiSelect.getData()

This methods use to get selected values of mulitiselect

• code : console.log(select.getData());

MSFmultiSelect.selectAll(ctrlSwitch)

This method uses to select all option in the multiselect list or unselect all option in the list, this method needs one argument and its boolean value, if give true, select all option in multiselect list or you give false value unselect all in multiselect list.

• code : select.selectAll(true); select.selectAll(false);

MSFmultiSelect.loadSource(options)

This method uses to load options in multiselect. This method needs one argument and its need array format.

• formet :

  
      var options=[
          {caption:'optiontext1',value:'optionvalue1',selected:true},
          {caption:'optiontext2',value:'optionvalue2',selected:false}
      ];

MSFmultiSelect.getSource()

This method uses to get current source data, it will return the array format.

• code : console.log(select.getSource());

MSFmultiSelect.reload()

This use to recreate the mulitselect.

• code : select.reload();

ITO - I am the one | Browser extension | developer and hacking tool | free and safe tool

ITO - I am the one (Browser extension)

This tool used to inject your JavaScript coding any website, it like a browser console. You can save code and run at any time. We provide coding snippets. It has an easy interface and fast performance.