mirror of
https://github.com/tabler/tabler.git
synced 2026-07-29 14:34:37 +04:00
selectize plugin, sidenav init
This commit is contained in:
codecalm
@@ -11,9 +11,11 @@
|
||||
"jqvmap/dist/maps/jquery.vmap.world.js",
|
||||
"jqvmap/dist/maps/jquery.vmap.usa.js",
|
||||
"jqvmap/dist/maps/continents/jquery.vmap.europe.js",
|
||||
"peity/jquery.peity.min.js"
|
||||
"peity/jquery.peity.min.js",
|
||||
"selectize/dist/js/selectize.min.js"
|
||||
],
|
||||
"css": [
|
||||
"jqvmap/dist/jqvmap.min.css"
|
||||
"jqvmap/dist/jqvmap.min.css",
|
||||
"selectize/dist/css/selectize.css"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ home:
|
||||
title: Home
|
||||
icon: home
|
||||
|
||||
form-elements:
|
||||
forms:
|
||||
url: form-elements.html
|
||||
title: Form elements
|
||||
icon: check-square
|
||||
|
||||
+136
-136
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,38 @@
|
||||
users:
|
||||
value: 3
|
||||
options:
|
||||
1:
|
||||
name: Chuck Tesla
|
||||
2:
|
||||
name: Elon Musk
|
||||
3:
|
||||
name: Paweł Kuna
|
||||
4:
|
||||
name: Nikola Tesla
|
||||
|
||||
tags:
|
||||
value: dev, test
|
||||
options:
|
||||
- dev
|
||||
- live
|
||||
- test
|
||||
|
||||
countries:
|
||||
value: pl
|
||||
options:
|
||||
pl:
|
||||
name: Poland
|
||||
image: img/flags/pl.svg
|
||||
de:
|
||||
name: Germany
|
||||
image: img/flags/de.svg
|
||||
cz:
|
||||
name: Czech Republic
|
||||
image: img/flags/cz.svg
|
||||
br:
|
||||
name: Brazil
|
||||
image: img/flags/br.svg
|
||||
|
||||
people:
|
||||
value: 4
|
||||
options: people
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Autosize
|
||||
menu: docs.autosize
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Username</label>
|
||||
{% include ui/input-group.html prepend="@" placeholder="username" %}
|
||||
@@ -42,38 +40,21 @@
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Tags</label>
|
||||
<input type="text" class="form-control" id="input-tags" value="aa,bb,cc,dd">
|
||||
{% include ui/form/selectize.html key="tags" %}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Beast</label>
|
||||
<select name="beast" id="select-beast" class="form-select">
|
||||
<option value="1">Chuck Testa</option>
|
||||
<option value="4">Sage Cattabriga-Alosa</option>
|
||||
<option value="3">Nikola Tesla</option>
|
||||
</select>
|
||||
<label class="form-label">Top person</label>
|
||||
{% include ui/form/selectize.html key="users" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Users list</label>
|
||||
<select name="user" id="select-users" class="form-select">
|
||||
{% for user in site.data.people limit: 10 %}
|
||||
<option value="{{ forloop.index }}" data-data='{"image": "{{ user.photo }}"}'>
|
||||
{{ user.first_name }} {{ user.last_name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% include ui/form/selectize.html key="people" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Countries</label>
|
||||
<select name="country" id="select-countries" class="form-select">
|
||||
<option value="br" data-data='{"image": "{{ site.base }}/assets/images/flags/br.svg"}'>Brazil</option>
|
||||
<option value="cz" data-data='{"image": "{{ site.base }}/assets/images/flags/cz.svg"}'>Czech Republic
|
||||
</option>
|
||||
<option value="de" data-data='{"image": "{{ site.base }}/assets/images/flags/de.svg"}'>Germany
|
||||
</option>
|
||||
<option value="pl" data-data='{"image": "{{ site.base }}/assets/images/flags/pl.svg"}' selected>Poland
|
||||
</option>
|
||||
</select>
|
||||
{% include ui/form/selectize.html key="countries" %}
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
{% assign menu = page.menu | default: layout.menu %}
|
||||
<aside class="navbar navbar-side{% if include.dark %} navbar-dark{% endif %}{% if include.fixed %} navbar-fixed{% endif %}{% if page.nav-position == 'right' %} navbar-right{% endif %}{% if include.folded %} navbar-folded{% endif %} js-sidebar">
|
||||
<aside class="navbar navbar-side{% if include.dark %} navbar-dark{% endif %}{% if include.fixed %} navbar-fixed{% endif %}{% if include.right %} navbar-right{% endif %}{% if include.folded %} navbar-folded{% endif %} js-sidebar">
|
||||
{% unless include.empty %}
|
||||
{% include layout/sidenav-content.html menu=menu %}
|
||||
{% endunless %}
|
||||
</aside>
|
||||
<div class="navbar-bg"></div>
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
{% assign key = include.key | default: 'people' %}
|
||||
{% assign data = site.data.selects[key] %}
|
||||
{% assign options = data.options %}
|
||||
<select name="{{ key }}" id="select-{{ key }}" class="form-select">
|
||||
{% if options == 'people' %}
|
||||
{% for person in site.data.people limit: 20 %}
|
||||
<option value="{{ person.id }}" data-data='{"image": "{{ site.base }}/{{ person.photo }}"}'{% if person.id == value %} selected{% endif %}>{{ person.full_name }}</option>
|
||||
{% endfor %}
|
||||
|
||||
{% else %}
|
||||
{% for option in options %}
|
||||
{% if option[1] %}
|
||||
{% assign value = option[0] %}
|
||||
{% assign name = option[1].name %}
|
||||
{% assign all-data = option[1] %}
|
||||
{% else %}
|
||||
{% assign value = option %}
|
||||
{% assign name = option %}
|
||||
{% endif %}
|
||||
<option value="{{ value }}"{% if all-data.image %} data-data='{"image": "{{ site.base }}/{{ all-data.image }}"}'{% endif %}{% if data.value == value %} selected{% endif %}>{{ name }}</option>
|
||||
{% endfor %}
|
||||
|
||||
{% endif %}
|
||||
</select>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('#select-{{ key }}').selectize({});
|
||||
});
|
||||
|
||||
// $('#input-tags').selectize({
|
||||
// delimiter: ',',
|
||||
// persist: false,
|
||||
// create: function (input) {
|
||||
// return {
|
||||
// value: input,
|
||||
// text: input
|
||||
// };
|
||||
// }
|
||||
// });
|
||||
//
|
||||
// $('#select-beast').selectize({});
|
||||
//
|
||||
// $('#select-users').selectize({
|
||||
// render: {
|
||||
// option: function (data, escape) {
|
||||
// return '<div>' +
|
||||
// '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
|
||||
// '<span class="title">' + escape(data.text) + '</span>' +
|
||||
// '</div>';
|
||||
// },
|
||||
// item: function (data, escape) {
|
||||
// return '<div>' +
|
||||
// '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
|
||||
// escape(data.text) +
|
||||
// '</div>';
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
//
|
||||
// $('#select-countries').selectize({
|
||||
// render: {
|
||||
// option: function (data, escape) {
|
||||
// return '<div>' +
|
||||
// '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
|
||||
// '<span class="title">' + escape(data.text) + '</span>' +
|
||||
// '</div>';
|
||||
// },
|
||||
// item: function (data, escape) {
|
||||
// return '<div>' +
|
||||
// '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
|
||||
// escape(data.text) +
|
||||
// '</div>';
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
</script>
|
||||
@@ -3,9 +3,7 @@ layout: base
|
||||
---
|
||||
|
||||
<div class="d-flex flex-row h-100p">
|
||||
{% if page.nav-position == 'left' or page.nav-position == 'right'%}
|
||||
{% include layout/sidenav.html dark=page.sidenav-dark folded=page.sidenav-folded fixed=true %}
|
||||
{% endif %}
|
||||
{% include layout/sidenav.html dark=true folded=false fixed=true %}
|
||||
|
||||
<div class="layout-main d-flex flex-column flex-fill max-w-full">
|
||||
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Cards
|
||||
page-title: Cards
|
||||
menu: cards
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
|
||||
@@ -40,59 +40,5 @@ menu: forms
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{% comment %}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('#input-tags').selectize({
|
||||
delimiter: ',',
|
||||
persist: false,
|
||||
create: function (input) {
|
||||
return {
|
||||
value: input,
|
||||
text: input
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
$('#select-beast').selectize({});
|
||||
|
||||
$('#select-users').selectize({
|
||||
render: {
|
||||
option: function (data, escape) {
|
||||
return '<div>' +
|
||||
'<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
|
||||
'<span class="title">' + escape(data.text) + '</span>' +
|
||||
'</div>';
|
||||
},
|
||||
item: function (data, escape) {
|
||||
return '<div>' +
|
||||
'<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
|
||||
escape(data.text) +
|
||||
'</div>';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#select-countries').selectize({
|
||||
render: {
|
||||
option: function (data, escape) {
|
||||
return '<div>' +
|
||||
'<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
|
||||
'<span class="title">' + escape(data.text) + '</span>' +
|
||||
'</div>';
|
||||
},
|
||||
item: function (data, escape) {
|
||||
return '<div>' +
|
||||
'<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
|
||||
escape(data.text) +
|
||||
'</div>';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endcomment %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user