Browse Source

add search input & property to plugin

pull/11/head
A1Gard 3 years ago
parent
commit
00dd2f838a
5 changed files with 39 additions and 10 deletions
  1. +1
    -0
      README.md
  2. +1
    -0
      demo/assets/demo.js
  3. +2
    -1
      demo/index.html
  4. +16
    -1
      src/x-tree-select.css
  5. +19
    -8
      src/x-tree-select.js

+ 1
- 0
README.md View File

@ -118,6 +118,7 @@ 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 |

+ 1
- 0
demo/assets/demo.js View File

@ -81,6 +81,7 @@ $(function () {
$("#demo4").treeSelect({
datatree: defJson,
transition: 'none',
searchable: true,
onOpen: function () {
console.log('onOpen event triggered');
}, onClose: function () {

+ 2
- 1
demo/index.html View File

@ -205,7 +205,7 @@ $("#demo3").treeSelect({
<section>
<h2>
Events demo without transtion
Events demo without transtion & searchable
</h2>
<br>
<div>
@ -234,6 +234,7 @@ $("#demo3").treeSelect({
$("#demo4").treeSelect({
datatree: defJson,
transition: 'none',
searchable: true,
onOpen: function () {
console.log('onOpen event triggered');
}, onClose: function () {

+ 16
- 1
src/x-tree-select.css View File

@ -123,4 +123,19 @@
float: right;
margin-left: .7em;
margin-right: 0;
}
}
.trsel .search{
display: none;
padding: 0 !important;
}
.trsel.trs-searcable .search{
display: block;
}
.trsel .search input{
background: white;
padding: 8px;
border: 0;
display: block;
width: 100%;
}

+ 19
- 8
src/x-tree-select.js View File

@ -37,7 +37,8 @@
title: 'title',
value: 'value',
child: 'child'
}
},
searchable: false,
}, options);
// store navigation for trace where are we?
@ -75,14 +76,19 @@
placeholder = $(self).attr('placeholder');
}
var elCls = '';
// set rtl class if is rtl
var rtlClass = '';
if ($.trsStore[$.scbCounter].direction === 'rtl') {
rtlClass = 'trs-rtl';
elCls = 'trs-rtl';
}
// check is searchable
if ($.trsStore[$.scbCounter].searchable === true) {
elCls += ' trs-searcable';
}
// init element for click for choose
$(self).parent().append('<div class="trsel ' + rtlClass + '" data-trcounter="' +
$(self).parent().append('<div class="trsel ' + elCls + '" data-trcounter="' +
$.scbCounter + '" >' + placeholder + '</div>');
@ -128,7 +134,7 @@
// slide down list
$("#trsel-list").slideDown(function () {
$(document).bind('click.handvarrsl', function (e) {
if (!$(e.target).is(".trsel-childer, .trsel-back")) {
if (!$(e.target).is(".trsel-childer, .trsel-back, .search, .srch")) {
$.trs.resetClose();
$("#trsel-list").slideUp(200, function () {
$(this).remove();
@ -210,7 +216,8 @@
}
$("#trsel-list").removeClass($.treeselect_animation[$.trsStore[$.currentCounter].transition]);
}, 600);
}else if( $(e.target).hasClass('search') || $(e.target).hasClass('srch') ){
// console.log('x');
} else { // choose|select value
// onChange event
$.trsStore[$.currentCounter].onChange({
@ -294,13 +301,18 @@
var content = '';
// clear li list
$("#trsel-list li").remove();
// back button handle
// has parent need back button
if ($.navigatex.length !== 0) {
// if navigation is empity not need back button
var back = $.navigatex[$.navigatex.length - 1];
content += '<li class="trsel-back" data-id="' + back.id + '"> &nbsp;' + back.title + '</li>';
} else {
// if has no parent
// search element
content += '<li class="search"> <input type="search" class="srch" placeholder="search..." value=""> </li>'
}
// show list passed to function
for (var ix in list) {
@ -400,7 +412,6 @@
return back;
}
}
// console.log($.trsStore[c].json.child);
}
$.navigatex.pop();

Loading…
Cancel
Save