jQuery jQwidgets Example


------------------------------
Project Structure:

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head><title>jQwidget Application.</title>
    <link rel="stylesheet" type="text/css" href="ui/jqwidgets/jqwidgets/styles/jqx.base.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script type="text/javascript" src="ui/jqwidgets/scripts/demos.js"></script>
    <script type="text/javascript" src="ui/jqwidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="ui/jqwidgets/jqwidgets/jqxinput.js"></script>
</head>
<body class='default'>
    <div id='content'><input type="text" id="input"/></div>
    <script type="text/javascript">
            $(document).ready(function () {              
                var countries = new Array("Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin");
                $("#input").jqxInput({placeHolder: "Enter a Country", height: 25, width: 200, minLength: 1,  source: countries });
            });
    </script>
</body>
</html>
-------------------------
Demo 1


Demo 2

Share on Google Plus

About Ram Pukar

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment

0 comments:

Post a Comment