Support - jQuery CDN | Zoya Pasha | 2017-11-13 00:23 |
Status: Closed | ||
<script> LABKEY.Utils.requiresScript("https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"); LABKEY.Utils.requiresScript("https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"); LABKEY.Utils.requiresCSS("https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"); //code.stephenmorley.org var CollapsibleLists=function(){function e(b,c){[].forEach.call(b.getElementsByTagName("li"),function(a){c&&b!==a.parentNode||(a.style.userSelect="none",a.style.MozUserSelect="none",a.style.msUserSelect="none",a.style.WebkitUserSelect="none",a.addEventListener("click",g.bind(null,a)),f(a))})}function g(b,c){for(var a=c.target;"LI"!==a.nodeName;)a=a.parentNode;a===b&&f(b)}function f(b){var c=b.classList.contains("collapsibleListClosed"),a=b.getElementsByTagName("ul");[].forEach.call(a,function(a){for(var d=a;"LI"!==d.nodeName;)d=d.parentNode;d===b&&(a.style.display=c?"block":"none")});b.classList.remove("collapsibleListOpen");b.classList.remove("collapsibleListClosed");0<a.length&&b.classList.add("collapsibleList"+(c?"Open":"Closed"))}return{apply:function(b){[].forEach.call(document.getElementsByTagName("ul"),function(c){c.classList.contains("collapsibleList")&&(e(c,!0),b||[].forEach.call(c.getElementsByTagName("ul"),function(a){a.classList.add("collapsibleList")}))})},applyTo:e}}(); //code.stephenmorley.org var runOnLoad=function(c,o,d,e){function x(){for(e=1;c.length;)c.shift()()}o[d]?(document[d]('DOMContentLoaded',x,0),o[d]('load',x,0)):o.attachEvent('onload',x);return function(t){e?o.setTimeout(t,0):c.push(t)}}([],window,'addEventListener'); </script> <div data-role="main" class="ui-content"> <a href="#myPopup" data-rel="popup" id='pButton'>Select Option</a> <div data-role="popup" id="myPopup" class="ui-content" style='min-width:250px'> <form> <div> <ul class="collapsibleList"> <li class='li'> 1 <ul> <li class='li'>1.1 <ul> <li><a class='col'>1.1.1</a></li> <li><a class='col'>1.1.2</a></li> </ul> </li> <li class='li'>1.2 <ul> <li><a class='col'>1.2.1</a></li> <li><a class='col'>1.2.2</a></li> </ul> </li> </ul> </li> <li class='li'> 2 <ul> <li class='li'>2.1 <ul> <li><a class='col'>2.1.1</a></li> <li><a class='col'>2.1.2</a></li> </ul> </li> <li class='li'>2.2 <ul> <li><a class='col'>2.2.1</a></li> <li><a class='col'>2.2.2</a></li> </ul> </li> </ul> </li> </ul> </div> </form> </div> <div id='OntSelected'></div> </div> <script> runOnLoad(function(){ CollapsibleLists.apply(); }); $('.col').click(function(){ $('#OntSelected').text($(this).text()); alert('HI'); }); </script> <style> .collapsibleList li{ list-style-image : url('add.png'); cursor : auto; } li.collapsibleListOpen{ list-style-image : url('minus.png'); cursor : pointer; } li.collapsibleListClosed{ list-style-image : url('add.png'); cursor : pointer; } .col{ color:#1A5276; margin: 1px 1px; } .col:hover{ color:#1A5276; font-weight:bold; margin: 1px 1px; } </style> |
||