We have 3 total dropdown plugins for different functions.
2 of them are used by main header navigation.
/*
:: Plugin File
src/js/sow.dropdown.js
src/js/sow.dropdown_click_ignore.js
src/js/sow.dropdown_ajax.js
:: Plugin Init
*/ $.SOW.core.dropdown.init('.dropdown-menu.dropdown-menu-hover');
$.SOW.core.dropdown_click_ignore.init('.dropdown-menu.dropdown-click-ignore');
$.SOW.core.dropdown_ajax.init('a[data-toggle="dropdown"]');
/*
NOTE:
sow.dropdown.js & sow.dropdown_ajax.js
require: sow.dropdown_click_ignore.js
dropdown_click_ignore = do not close dropdown on self click.
*/
<div class="dropdown">
<a href="#" class="btn btn-primary" data-toggle="dropdown">
With .dropdown-click-ignore
</a>
<div class="dropdown-menu dropdown-click-ignore">
<div class="p--15">
Click Me!
</div>
</div>
</div>
<
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-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>
<!--
A callback is also available by adding 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 -->
<div class="dropdown d-inline-block">
<!--
Required Plugins:
SOW : Dropdown
SOW : Dropdown Ajax
SOW : Dropdown Click Ignore
* If SOW : Ajax Navigation used (like right now in the demo),
ajax links will be active inside dropdown. Just add .js-ajax to the valid links.
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-toggle="dropdown"
aria-expanded="false"
aria-haspopup="true"
class="btn btn-sm btn-danger btn-soft btn-pill">
<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 -->
<div class="dropdown d-inline-block">
<!--
1. Ajax Dropdown Content
The dropdown content is loaded on user interaction only:
- on mouse over (if dropdown is opening on mouse over (click on mobile device))
- on mouse click
++ ++ ++
Curently is set by config to work for links: a[data-toggle="dropdown"]
You can add to config for buttons (separated by comma): button[data-toggle="dropdown"]
Or simply by using a class.
Instead of autoinit by config, the plugin can also be called alone like this:
$.SOW.core.dropdown_ajax.init('a[data-toggle="dropdown"]');
-->
<a href="#" id="ddAjax_demo2"
data-dropdown-ajax-source="_ajax/dropdown_ajax.json"
data-dropdown-ajax-mode="json"
data-toggle="dropdown"
aria-expanded="false"
aria-haspopup="true"
class="btn btn-sm btn-danger btn-soft btn-pill">
<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>
<!--
Required Plugins:
SOW : Dropdown
SOW : Dropdown Ajax
SOW : Dropdown Click Ignore
* If SOW : Ajax Navigation used (like right now in the demo),
ajax links will be active inside dropdown. Just add .js-ajax to dropdown links.
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>
<!--
Ajax : Image Switcher
1. Load images from a json (ajax)
(images are loaded ONLY on click)
2. Update on image click (ajax)
GET -or- POST : both supported
++ Cache
data-ddimg-cache="true"
+ Used if possible, to avoid multiple server request
on exact same URL (and params). Set "false" to disable!
++ ++
AJAX UPDATE PARAMS SENT TO SERVER (data-ddimg-ajax-update-url="....")
{ ajax:'true', img_src:img_src, img_id:img_id }
(including custom params from data-ddimg-ajax-update-params="...")
-->
<div class="dropdown"><!-- dropup|dropdown -->
<!-- trigger -->
<label data-toggle="dropdown" class="dropdown-image-list rounded text-center position-relative bg-light d-block cursor-pointer mb-0 w--100 h--100 rounded">
<!-- icon (no image) -->
<span class="absolute-full d-middle z-index-1">
<i class="fi fi-image fs--30 text-muted"></i>
</span>
<!-- image (default image: style="background-image:url(...)" -->
<span class="dropdown-image-container d-block position-relative z-index-2 absolute-full bg-cover rounded overlow-hidden"><!-- image --></span>
</label>
<!-- dropdown container -->
<div class="dropdown-menu dropdown-menu-click-update p-1 w--280"
data-ddimg-ajax-populate-url="_ajax/dropdown_ajax_image_switcher.json"
data-ddimg-ajax-populate-params="['action','image_list']['param2','value2']"
data-ddimg-ajax-populate-method="GET"
data-ddimg-ajax-update-url="../demo.files/php/demo.ajax_request.php"
data-ddimg-ajax-update-params="['action','image_update']['product_id','1']"
data-ddimg-ajax-update-method="GET"
data-ddimg-cache="true"
data-ddimg-toast-success="Successfully Updated!"
data-ddimg-toast-position="top-center"
data-ddimg-noimg-text="No Images">
<h6 class="px-1 pt-1">
Select Image
</h6>
<div class="scrollable-vertical scrollable-styled-dark max-h-300">
<!-- remove button -->
<a href="#!" class="dropdown-image-reset position-relative bg-light float-start w--80 h--80 m-1 p-0 d-middle text-decoration-none rounded overflow-hidden">
<i class="fi fi-close fs--50 text-gray-500"></i>
</a>
<div class="dropdown-ajax-container"><!-- populated by ajax --></div>
</div>
</div>
</div>
<!--
Ajax : Image Switcher
1. Load images from a json (ajax)
(images are loaded ONLY on click)
2. On image click update hidden inputs only
(inpus can also be added to ajax update (above example))
++ Cache
data-ddimg-cache="true"
+ Used if possible, to avoid multiple server request
on exact same URL (and params). Set "false" to disable!
-->
<div class="dropdown"><!-- dropup|dropdown -->
<!-- trigger -->
<label data-toggle="dropdown" class="dropdown-image-list rounded text-center position-relative bg-light d-block cursor-pointer mb-0 w--100 h--100 rounded">
<!-- icon (no image) -->
<span class="absolute-full d-middle z-index-1">
<i class="fi fi-image fs--30 text-muted"></i>
</span>
<!-- image (default image: style="background-image:url(...)" -->
<span class="dropdown-image-container d-block position-relative z-index-2 absolute-full bg-cover rounded overlow-hidden"><!-- image --></span>
<!-- hidden inputs : updated by JS -->
<input type="hidden" class="dropdown-ddimg-img-id" name="img_id[]" value="0"><!-- database image id -->
<input type="hidden" class="dropdown-ddimg-img-src" name="img_src[]" value="">
</label>
<!-- dropdown container -->
<div class="dropdown-menu dropdown-menu-click-update p-1 w--280"
data-ddimg-ajax-populate-url="_ajax/dropdown_ajax_image_switcher.json"
data-ddimg-ajax-populate-params="['action','image_list']['param2','value2']"
data-ddimg-ajax-populate-method="GET"
data-ddimg-cache="true"
data-ddimg-noimg-text="No Images">
<h6 class="px-1 pt-1">
Select Image
</h6>
<div class="scrollable-vertical scrollable-styled-dark max-h-300">
<!-- remove button -->
<a href="#!" class="dropdown-image-reset position-relative bg-light float-start w--80 h--80 m-1 p-0 d-middle text-decoration-none rounded overflow-hidden">
<i class="fi fi-close fs--50 text-gray-500"></i>
</a>
<div class="dropdown-ajax-container"><!-- populated by ajax --></div>
</div>
</div>
</div>