<div class="powerTools ss-form js-powerTools is-open" style="max-height:none" data-select="#Form_PowerToolsForm_topics, #Form_PowerToolsForm_departments, select.js-powerTools_extraFilter" data-from-date="#Form_PowerToolsForm_fromDate" data-to-date="#Form_PowerToolsForm_toDate">
<div class="powerTools_form">
<form id="Form_PowerToolsForm" action="/en/news/PowerToolsForm" method="post" enctype="application/x-www-form-urlencoded" class="has-filters">
<p id="Form_PowerToolsForm_error" class="message " style="display: none"></p>
<fieldset>
<div id="Form_PowerToolsForm_searchByKeywords_Holder" class="field text">
<label class="left" for="Form_PowerToolsForm_searchByKeywords">Search</label>
<div class="middleColumn">
<input type="text" name="searchByKeywords" class="text" id="Form_PowerToolsForm_searchByKeywords" placeholder="Type keywords" />
</div>
</div>
<div id="Form_PowerToolsForm_topics_Holder" class="field listbox">
<label class="left" for="Form_PowerToolsForm_topics">Categories</label>
<div class="middleColumn">
<select name="topics[]" class="listbox" id="Form_PowerToolsForm_topics" data-placeholder="Filter by category" multiple="multiple">
<option value="40">Alumni News</option>
<option value="35">Competence Centre Language Studies News</option>
<option value="34">Competence Centre Regional History News</option>
<option value="24">Faculty of Computer Science News</option>
<option value="51">Faculty of Design and Art News</option>
<option value="31">Faculty of Economics News</option>
<option value="441">Faculty of Education News</option>
<option value="381">Faculty of Science and Technology News</option>
<option value="33">Library News</option>
<option value="70">Press Releases Archive</option>
<option value="420">Research News</option>
<option value="422">Students News</option>
<option value="56">Tourism Management News</option>
<option value="2" selected="selected">UniNews</option>
</select>
</div>
</div>
<div class="fieldWrap fieldWrap-2col">
<div id="Form_PowerToolsForm_fromDate_Holder" class="field date text">
<label class="left" for="Form_PowerToolsForm_fromDate">From Date</label>
<div class="middleColumn">
<input type="text" name="fromDate" class="date text" id="Form_PowerToolsForm_fromDate" data-maxdate="0 days" data-isoDateformat="yyyy-MM-dd" data-jquerydateformat="yy-mm-dd" />
</div>
</div>
<div id="Form_PowerToolsForm_toDate_Holder" class="field date text">
<label class="left" for="Form_PowerToolsForm_toDate">To Date</label>
<div class="middleColumn">
<input type="text" name="toDate" class="date text" id="Form_PowerToolsForm_toDate" data-isoDateformat="yyyy-MM-dd" data-jquerydateformat="yy-mm-dd" />
</div>
</div>
</div>
<input type="hidden" name="SecurityID" value="194e413b750a233577c28138b6ee52ed2fe82f39" class="hidden" id="Form_PowerToolsForm_SecurityID" />
<div class="clear">
<!-- -->
</div>
</fieldset>
<div class="Actions">
<button type="submit" name="action_applyFilters" value="Search" class="action is-submitBtn" id="Form_PowerToolsForm_action_applyFilters">
Search
</button>
<button type="submit" name="action_clearFilters" value="Clear search" class="action is-clearBtn" id="Form_PowerToolsForm_action_clearFilters">
Clear search
</button>
</div>
</form>
</div>
</div>
<div
class="powerTools ss-form js-powerTools is-open"
style="max-height:none"
data-select="#Form_PowerToolsForm_topics, #Form_PowerToolsForm_departments, select.js-powerTools_extraFilter"
data-from-date="#Form_PowerToolsForm_fromDate"
data-to-date="#Form_PowerToolsForm_toDate"
>
<div class="powerTools_form">
<form id="Form_PowerToolsForm" action="/en/news/PowerToolsForm" method="post" enctype="application/x-www-form-urlencoded" class="has-filters">
<p id="Form_PowerToolsForm_error" class="message " style="display: none"></p>
<fieldset>
<div id="Form_PowerToolsForm_searchByKeywords_Holder" class="field text">
<label class="left" for="Form_PowerToolsForm_searchByKeywords">Search</label>
<div class="middleColumn">
<input type="text" name="searchByKeywords" class="text" id="Form_PowerToolsForm_searchByKeywords" placeholder="Type keywords" />
</div>
</div>
<div id="Form_PowerToolsForm_topics_Holder" class="field listbox">
<label class="left" for="Form_PowerToolsForm_topics">Categories</label>
<div class="middleColumn">
<select name="topics[]" class="listbox" id="Form_PowerToolsForm_topics" data-placeholder="Filter by category" multiple="multiple">
<option value="40">Alumni News</option>
<option value="35">Competence Centre Language Studies News</option>
<option value="34">Competence Centre Regional History News</option>
<option value="24">Faculty of Computer Science News</option>
<option value="51">Faculty of Design and Art News</option>
<option value="31">Faculty of Economics News</option>
<option value="441">Faculty of Education News</option>
<option value="381">Faculty of Science and Technology News</option>
<option value="33">Library News</option>
<option value="70">Press Releases Archive</option>
<option value="420">Research News</option>
<option value="422">Students News</option>
<option value="56">Tourism Management News</option>
<option value="2" selected="selected">UniNews</option>
</select>
</div>
</div>
<div class="fieldWrap fieldWrap-2col">
<div id="Form_PowerToolsForm_fromDate_Holder" class="field date text">
<label class="left" for="Form_PowerToolsForm_fromDate">From Date</label>
<div class="middleColumn">
<input type="text" name="fromDate" class="date text" id="Form_PowerToolsForm_fromDate" data-maxdate="0 days" data-isoDateformat="yyyy-MM-dd" data-jquerydateformat="yy-mm-dd" />
</div>
</div>
<div id="Form_PowerToolsForm_toDate_Holder" class="field date text">
<label class="left" for="Form_PowerToolsForm_toDate">To Date</label>
<div class="middleColumn">
<input type="text" name="toDate" class="date text" id="Form_PowerToolsForm_toDate" data-isoDateformat="yyyy-MM-dd" data-jquerydateformat="yy-mm-dd" />
</div>
</div>
</div>
<input type="hidden" name="SecurityID" value="194e413b750a233577c28138b6ee52ed2fe82f39" class="hidden" id="Form_PowerToolsForm_SecurityID" />
<div class="clear"><!-- --></div>
</fieldset>
<div class="Actions">
<button type="submit" name="action_applyFilters" value="Search" class="action is-submitBtn" id="Form_PowerToolsForm_action_applyFilters">
Search
</button>
<button type="submit" name="action_clearFilters" value="Clear search" class="action is-clearBtn" id="Form_PowerToolsForm_action_clearFilters">
Clear search
</button>
</div>
</form>
</div>
</div>
{
"label": "Lorem ipsum",
"labelLong": "Lorem ipsum dolor sit amet",
"htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
"htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
"htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
"url": "#",
"videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
"search": {
"id": "Search",
"label": "Search",
"placeholder": "Type keywords"
},
"keywords": {
"id": "Categories",
"label": "Categories",
"attr": "data-placeholder=\"Filter by category\" multiple",
"options": [
{
"value": "option-1",
"label": "Option 1",
"selected": true
},
{
"value": "option-2",
"label": "Option 2"
},
{
"value": "option-3",
"label": "Option 3"
}
]
},
"fromDate": {
"id": "From",
"label": "From date",
"placeholder": null
},
"toDate": {
"id": "To",
"label": "To date",
"placeholder": null
},
"submit": {
"label": "Search",
"class": "js-comForm_submit",
"el": "button",
"attr": "type=\"submit\""
},
"cancel": {
"label": "Cancel search",
"class": "btn-close js-comForm_close",
"el": "button",
"attr": "type=\"submit\""
},
"class": "is-open"
}
By default the form is hidden on small / mobile devices and toggled via a button (added the .is-open
class to the module, the button is not displayed here).
For demonstration purposes the .is-open
class is added in this example.
To see a working implementation visit https://www.unibz.it/en/news/?topics=2