jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
107 lines • 5.09 kB
HTML
<html lang="en">
<head>
<title id='Description'>In this sample is demonstrated how to submit a Form with jqxTree. You can choose to submit the selected item or all checked items.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<style type="text/css">
.demo-iframe {
border: none;
width: 600px;
height: 400px;
clear: both;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
// create jqxTree
$('#jqxTree').jqxTree({ height: '400px', submitCheckedItems: true, checkboxes: true, width: '330px'});
$('#checkedItemsBtn').jqxRadioButton({ width: '200px', height: '25px', checked: true});
$('#selectedItemBtn').jqxRadioButton({ width: '200px', height: '25px', checked: false});
$('#checkedItemsBtn').bind('checked', function (event) {
$('#jqxTree').jqxTree({ submitCheckedItems: true });
});
$('#selectedItemBtn').bind('checked', function (event) {
$('#jqxTree').jqxTree({ submitCheckedItems: false });
});
$('#sendButton').jqxButton({ width: 70});
$('#jqxTree').jqxTree('expandAll');
});
</script>
</head>
<body class='default'>
<form class="form" id="form" target="form-iframe" method="post" action="tree.php" style="font-size: 13px; font-family: Verdana; width: 650px;">
<div style='float: left;'>
<div name="tree" id='jqxTree' style='float: left; margin-left: 20px;'>
<ul>
<li id='home'>Home</li>
<li item-checked='true' item-expanded='true'>Solutions
<ul>
<li>Education</li>
<li>Financial services</li>
<li>Government</li>
<li item-checked='false'>Manufacturing</li>
<li>All industries and solutions</li>
</ul>
</li>
<li>Products
<ul>
<li>PC products</li>
<li>Mobile products</li>
<li>All products</li>
</ul>
</li>
<li>Support
<ul>
<li>Support home</li>
<li>Customer Service</li>
<li>Knowledge base</li>
<li>Books</li>
<li>Training and certification</li>
<li>Support programs</li>
<li>Forums</li>
<li>Documentation</li>
<li>Updates</li>
</ul>
</li>
<li>Company
<ul>
<li>About Us</li>
<li>Press</li>
<li>Investor Relations</li>
<li>Corporate Affairs</li>
<li>Careers</li>
<li>Showcase</li>
<li>Events</li>
<li>Contact Us</li>
<li>Become an affiliate</li>
</ul>
</li>
</ul>
</div>
<div style='margin-left: 60px; float: left;'>
<div style='margin-top: 10px;'>
<div id='checkedItemsBtn'>Submit Checked Items</div>
<div id='selectedItemBtn'>Submit Selected Item</div>
</div>
</div>
</div>
<div style="clear: both;" />
<input style="margin-top: 10px;" type="submit" value="Submit" id="sendButton" />
</form>
<div style="font-size: 13px; font-family: Verdana;">
<iframe id="form-iframe" name="form-iframe" class="demo-iframe" frameborder="0"></iframe>
</div>
</body>
</html>
<!--tree.php
echo $_POST["tree"];
-->