Tuesday, 15 September 2015

javascript - Can't get jsfiddle example to work on my website -



javascript - Can't get jsfiddle example to work on my website -

i found awesome listbox made in jquery use. cannot working out of fiddle.

example source: http://jsfiddle.net/jqwidgets/ykeu9/

my code:

<!doctype html> <html lang="en"> <head> <title>test</title> <meta charset="utf-8> <link rel="stylesheet" type="text/css" href="test.css"> <script src="jquery.js"></script> <script type='text/javascript'> $(window).load(function(){ var source = [ "affogato", "americano", "bicerin", "breve", "café bombón", "café au lait", "caffé corretto", "café crema", "caffé latte"]; // create jqxlistbox $("#jqxlistbox").jqxlistbox({ source: source, theme: 'energyblue', width: '200px', height: '250px', selectedindex: 3 }); $("#jqxbutton").jqxbutton({ theme:'energyblue' }); $('#jqxbutton').on('click', function () { $("#jqxlistbox").jqxlistbox('additem', 'jquery'); }); }); </script> </head> <div id='jqxlistbox'></div> <div> <input style="margin-top: 20px;" type="button" id='jqxbutton' value="show selected index" /> </div> </body> </html>

what doing wrong? i'm pretty novice @ webcoding in general , javascript , jquery.

jquerywidgets

<html><head> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <link rel="stylesheet" type="text/css" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css"> <link rel="stylesheet" type="text/css" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css"> <script type="text/javascript" src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script> <script type="text/javascript"> $(window).load(function(){ var source = [ "affogato", "americano", "bicerin", "breve", "café bombón", "café au lait", "caffé corretto", "café crema", "caffé latte"]; // create jqxlistbox $("#jqxlistbox").jqxlistbox({ source: source, theme: 'energyblue', width: '200px', height: '250px', selectedindex: 3 }); $("#jqxbutton").jqxbutton({ theme:'energyblue' }); $('#jqxbutton').on('click', function () { $("#jqxlistbox").jqxlistbox('additem', 'jquery'); }); }); </script> </head> <body> <div id='jqxlistbox'></div> <div> <input style="margin-top: 20px;" type="button" id='jqxbutton' value="show selected index" /> </div> </body></html>

javascript jquery html

No comments:

Post a Comment