javascript - Open JQuery Popup after Button click -
i have problem jquery mobile.
here teh jsfiddle: http://jsfiddle.net/gc7mr/3/
first have panel buttons, importan button button id=define)!
<div data-role=header data-position=fixed> <div data-role=navbar> <ul> <li><a href=#define data-role=button data-icon=edit data-inline="true" data-rel="popup" id="define" data-position-to="#map_canvas">define</a></li> <li><a href=#compose data-role=button data-icon=gear data-inline="true" data-rel="popup" data-transition="slidedown" data-position-to="#map_canvas">compose</a></li> <li><a href=#search data-role=button data-icon=search data-inline="true" id="search">search</a></li> </ul> </div> </div> now created 3 popups(one of them shown below). further have variable called scenario, can change states between restaurants,landmarks, , movies. goal if button id 'define' clicked, corresponding popup actual state of teh scenario variable should opened(e.g. if scenario="landmarks" popup id landmarks should open).
<div data-role="popup" id="definelandmarks" style="width: 600px; height: 750px;"> <div style="padding: 20px;"> <div align="center"> <b>please define options landmark scenario</b> </div> <div data-role="controlgroup" data-type="horizontal"> <table> <tr> <td style="width: 20%;">wiki abstract</td> <td style="width: 450px;; float: right"><input type="text" name="wiki_abstract" id="wiki_abstract" value="" data-clear-btn="false"></td> </tr> <tr> <td style="width: 20%;">wiki text</td> <td style="width: 450px; float: right"><input type="text" name="wiki_text" id="wiki_text" value="" data-clear-btn="false"> </td> </tr> <tr> <td style="width: 20%;">keywords 1</td> <td style="width: 450px; float: right"><input type="text" name="keywords1" id="keywords1" value="" data-clear-btn="false"> </td> </tr> <tr> <td style="width: 20%;">keywords 2</td> <td style="width: 450px; float: right"><input type="text" name="keywords2" id="keywords2" value="" data-clear-btn="false"> </td> </tr> <tr> <td style="width: 20%;">keywords 3</td> <td style="width: 450px; float: right"><input type="text" name="keywords3" id="keywords3" value="" data-clear-btn="false"> </td> </tr> <tr> <td style="width: 20%;">keywords 4</td> <td style="width: 450px; float: right"><input type="text" name="keywords4" id="keywords4" value="" data-clear-btn="false"> </td> </tr> </table> <form> <div data-role="controlgroup" data-type="horizontal" align="center"> <a href="#" data-role="button" id="resetlandmarks">reset</a> <a href="#" data-role="button" id="applylandmarks">apply</a> </div> </form> </div> </div> </div> i try open poup not work:
$("#define").click(function() { var s= getscenario(); if(s=='restaurant'){ $('#definerestaurants').popup('open'); } else if(s=='movies'){ $('#definemovies').popup('open'); } else if(s=='landmarks'){ $('#definelandmarks').popup('open'); }else{ alert("please choose scenario"); } });
look @ like
$(createtogglehandler("#check", "#most", "#most")); function createtogglehandler(id, target, scroll){ return function(){ $(id).click(createtoggleclickhandler(target, scroll)); } } function createtoggleclickhandler(target, scroll){ return function(){ var x = $(target); x.toggle(500); $("html, body").animate({ scrolltop: $(scroll).offset().top }, 1000); } }
Comments
Post a Comment