jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
88 lines (84 loc) • 4.63 kB
HTML
<html lang="en">
<head>
<meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<meta name="msapplication-tap-highlight" content="no" />
<title id='Description'>JavaScript DropDown Button - Mobile Example </title>
<link rel="stylesheet" href="../styles/demo.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.windowsphone.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.blackberry.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.android.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.mobile.css" type="text/css" />
<script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxdropdownbutton.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxtree.js"></script>
<script type="text/javascript" src="../simulator.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var theme = prepareSimulator("dropDownButton");
$("#dropDownButton").jqxDropDownButton({
initContent: function()
{
$("#tree").jqxTree({ theme: theme, width: '100%', height: 220 });
$('#tree').on('select', function (event) {
var args = event.args;
var item = $('#tree').jqxTree('getItem', args.element);
var dropDownContent = '<div style="margin-left: 3px; line-height: 40px; font-size: 16px; vertical-align: middle;"><span>' + item.label + '</span></div>';
$("#dropDownButton").jqxDropDownButton('setContent', dropDownContent);
});
$('#tree').jqxTree('selectItem', $("#home")[0]);
initSimulator("dropDownButton");
$("#tree").css('visibility', 'visible');
},
width: '80%', height: 40,
theme: theme
});
var dropDownContent = '<div style="margin-left: 3px; line-height: 40px; font-size: 16px; vertical-align: middle;"><span>Home</span></div>';
$("#dropDownButton").jqxDropDownButton('setContent', dropDownContent);
});
</script>
</head>
<body class='default'>
<div id="demoContainer" class="device-mobile">
<div id="container" class="device-mobile-container">
<h3 style="margin-left: 10%; margin-top: 20px;">Select an item:</h3>
<div style='margin-left: 10%;' id="dropDownButton">
<div style="height: 220px; visibility: hidden; border: none;" id='tree'>
<ul>
<li id="home">Home</li>
<li item-expanded='true'>Solutions
<ul>
<li>Education</li>
<li>Financial services</li>
<li>Government</li>
<li>Manufacturing</li>
<li>Solutions
<ul>
<li>eLearning</li>
<li>Mobile</li>
<li>RIA</li>
<li>Training</li>
</ul>
</li>
</ul>
</li>
<li>Products
<ul>
<li>PC products</li>
<li>Mobile products</li>
<li>All products</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>