Dynamic buttons in jQuery Mobile footer? -
Dynamic buttons in jQuery Mobile footer? -
dynamically injecting buttons jqm footers seems exercise in frustration. have clue how apply proper formatting this? here several anomalies found trying this:
multi-column button grids not formatted in footer
data-corners="false" attribute (to flush buttons) not apply first , lastly buttons in footer
with data-role="controlgroup" data-type="horizontal" footer buttons, if there many buttons fit in 1 row styling looks weird (since buttons have rounded corners, others not)
if data-role="controlgroup" data-type="horizontal" omitted footer buttons, buttons may rendered partially off screen...
in general - argh!!!! have success dynamically injecting buttons footer? if so, much appreciate hear how achieved. thanks!
would work:
http://jsfiddle.net/eznh8/7/js
$('#addbuttonname').click(function() { var thefooter = $('#addmorebuttons'); var buttonname= $('#newbuttonname'); if(buttonname.val() != '') { thefooter.append('<a href="#" data-role="button" data-icon="delete">'+buttonname.val()+'</a>'); buttonname.val(''); $('#thehomepage').trigger('create'); } });
html
<div data-role="page" id="thehomepage"> <label for="basic">button name:</label> <input type="text" name="newbuttonname" id="newbuttonname" value="" /> <a href="#" data-role="button" id="addbuttonname">add new button</a> <div data-role="footer" class="ui-bar" id="addmorebuttons"> </div> </div>
jquery-mobile
Comments
Post a Comment