SOW : Dropdowns
SOW plugins are part of Smarty Core, written from scratch!
src/js/sow.core/sow.sow.dropdown.js
src/js/sow.core/sow.dropdown_ajax.js
Dropdown Click update
<!--
Note: .js-trigger-text is required for both:
- dropdown trigger button
- dropdown link
.dropdown-menu-click-update
is the key class on activating this function!
-->
<div class="dropdown d-inline-block mb-3">
<a href="#" class="btn btn-warning" data-bs-toggle="dropdown">
<span class="js-trigger-text">Item #1</span>
</a>
<div class="dropdown-menu dropdown-menu-click-update">
<a href="#" class="dropdown-item active">
<span class="js-trigger-text">Item #1</span>
</a>
<a href="#" class="dropdown-item">
<span class="js-trigger-text">Item #2</span>
</a>
<a href="#" class="dropdown-item">
<span class="js-trigger-text">Item #3</span>
</a>
</div>
</div>
<!--
Optional callback - add to .dropdown-menu div:
data-dropdown-callback="myCallbackFunction"
And your function is called by passing also the href of the clicked link:
var myCallbackFunction = function(href) {
// your code
}
-->
Ajax HTML
Populate dropdown via ajax, when on interraction - HTML markup
<!-- Ajax : html -->
<div class="dropdown d-inline-block">
<!--
Optional:
data-dropdown-ajax-reload-always="true"
Each time a dropdown is clicked, an ajax request is sent to reload the dropdown content.
If .dropdown-menu has .dropdown-menu-hover class (dropdown is open on mouse over), is ignored (except on mobile)
Refresh cache interval - dropdown content refreshed on hover after specified time
(60000 = 1 min. (formula: 1000 * 60)). Default is set to 1 min.
data-dropdown-ajax-refresh-interval="60000"
Using localstorage cache - useful for header main menu (auto repopulate on page load)
Cache lifetime is 30 min! Cache is set by URL so by adding to URL: ?v=xxx will invalidate cache!
data-dropdown-ajax-cache="true"
More optional params if needed:
data-dropdown-ajax-method="GET|POST" (default is "GET")
data-dropdown-ajax-contentType="" (jQuery default)
data-dropdown-ajax-dataType="" (jQuery default)
data-dropdown-ajax-loadicon="" (default: "fi fi-circle-spin fi-spin")
-->
<a href="#" id="ddAjax_demo1"
data-dropdown-ajax-source="_ajax/dropdown_ajax.html"
data-bs-toggle="dropdown"
aria-expanded="false"
aria-haspopup="true"
class="btn btn-primary">
<span class="group-icon">
<i class="fi fi-arrow-end-slim"></i>
<i class="fi fi-arrow-down"></i>
</span>
<span>Ajax : Html</span>
</a>
<!--
Required:
.dropdown-menu-block-md added to .dropdown-menu (mobile, if dropdown has multilevel)
Optional:
.dropdown-menu-hover
-->
<div aria-labelledby="ddAjax_demo1" class="dropdown-menu dropdown-menu-clean dropdown-menu-block-md max-w-200">
<!-- ajax content -->
</div>
</div>
Ajax JSON
Populate dropdown via ajax, when on interraction - JSON
<!-- Ajax : json -->
<div class="dropdown d-inline-block">
<a href="#" id="ddAjax_demo2"
data-dropdown-ajax-source="_ajax/dropdown_ajax.json"
data-dropdown-ajax-mode="json"
data-bs-toggle="dropdown"
aria-expanded="false"
aria-haspopup="true"
class="btn btn-primary">
<span class="group-icon">
<i class="fi fi-arrow-end-slim"></i>
<i class="fi fi-arrow-down"></i>
</span>
<span>Ajax : Json</span>
</a>
<!--
Optional:
data-dropdown-ajax-reload-always="true"
Each time a dropdown is clicked, an ajax request is sent to reload the dropdown content.
If .dropdown-menu has .dropdown-menu-hover class (dropdown is open on mouse over), is ignored (except on mobile)
Refresh cache interval - dropdown content refreshed on hover after specified time
(60000 = 1 min. (formula: 1000 * 60)). Default is set to 1 min.
data-dropdown-ajax-refresh-interval="60000"
Using localstorage cache - useful for header main menu (auto repopulate on page load)
Cache lifetime is 30 min! Cache is set by URL so by adding to URL: ?v=xxx will invalidate cache!
data-dropdown-ajax-cache="true"
More optional params if needed:
data-dropdown-ajax-method="GET|POST" (default is "GET")
data-dropdown-ajax-contentType="" (jQuery|config default)
data-dropdown-ajax-dataType="" (jQuery|config default)
data-dropdown-ajax-loadicon="" (default: "fi fi-circle-spin fi-spin")
data-dropdown-ajax-mode="html|json" html|json ; json = Build dropdown from json data
html structure: _ajax/dropdown_ajax.html
json structure: _ajax/dropdown_ajax.json
see also _ajax/dropdown_ajax.php (for a php example)
Working examples
data-dropdown-ajax-source="_ajax/dropdown_ajax.html"
data-dropdown-ajax-mode="html"
data-dropdown-ajax-source="_ajax/dropdown_ajax.json"
data-dropdown-ajax-mode="json"
data-dropdown-ajax-source="_ajax/dropdown_ajax.php"
data-dropdown-ajax-mode="json"
-->
<div aria-labelledby="ddAjax_demo2" class="dropdown-menu dropdown-menu-clean dropdown-menu-block-md max-w-200">
<!-- ajax content -->
</div>
</div>