Hi I have this docking with a button to “Add Windows” and after the add it creat
ID: 3890695 • Letter: H
Question
Hi I have this docking with a button to “Add Windows” and after the add it creates a window and inside it has a dropdown to select a certain widget that can be added to this created window. I have been trying to figure this one out but I cant get the add window to work. I have already looked at the knockout example and not sure how to implement that in jquery.
References:
My output of the code below: http://jsfiddle.net/YA9Kt/116/
Here is the knockout version: https://www.jqwidgets.com/using-jqxdocking-with-knockout/
JQWIDGETS API: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdocking/jquery-docking-api.htm?search=
Screenshot:
Html:
<button>Add Window</button>
<div id='jqxWidget'>
<div id="docking">
<div>
<div id="window0">
<div>
New Widget
</div>
<div>
<div id="jqxdropdown">
</div>
<button>
Submit
</button>
</div>
</div>
<div id="window1">
<div>
Date and Time
</div>
<div>
<div id="calendar">
</div>
<h3>Sunny</h3>
<div>
<img src="../../images/sun-icon.png" alt="Sunny" />
</div>
<div>
Mo: 23 °C<br />
To 25 °C<br />
We: 27 °C
</div>
</div>
</div>
</div>
<div>
<div id="window2">
<div>
News
</div>
<div>
<div id="newsTbs">
<ul>
<li>World</li>
<li>Local</li>
<li>Sports</li>
</ul>
<div>
<div>
<img src="../../images/news_ie6.jpg" alt="IE6" title="IE6" />
</div>
<span>Microsoft is set to get a little more pushy ensuring
you have an up-to-date browser and will automatically update Internet Explorer...
<span>(BBC)</span> </span>
</div>
<div>
<div>
<img src="../../images/local.jpg" alt="Tennis" title="Tennis" />
</div>
<span>The High Court has dismissed a challenge to laws that
require immigrant spouses to be able to speak English in order to live in the UK...
<span>(BBC)</span> </span>
</div>
<div>
<div>
<img src="../../images/tennis.jpg" alt="Tennis" title="Tennis" />
</div>
<span>British number one Elena Baltacha says Judy Murray is
a "fantastic" appointment as Great Britain's new Fed Cup captain... <span>(BBC)</span> </span>
</div>
</div>
</div>
</div>
<div id="window4">
<div>
E-mail
</div>
<div>
<div id="listbox">
</div>
</div>
</div>
</div>
</div>
</div>
Javascript
$(document).ready(function () {
var source = [
'JavaScript Certification - Welcome to our network',
'Business Challenges via Web take a part',
'jQWidgets better web, less time. Take a tour',
'Facebook - you have 7 new notifications',
'Twitter - John Doe is following you. Look at his profile',
'New videos, take a look at YouTube.com'
];
$('#docking').jqxDocking({ orientation: 'horizontal', width: '100%', mode: 'docked' });
$('#calendar').jqxCalendar({ width: 180, height: 180 });
$('#newsTbs').jqxTabs({ width: 375, height: 181, selectedItem: 1 });
$('#listbox').jqxListBox({ source: source, width: 375, height: 181 });
var source2 = [
"Date and Time",
"Email",
"News",
];
// Create a jqxDropDownList
$("#jqxdropdown").jqxDropDownList({ source: source2, selectedIndex: 1, width: '200', height: '25'});
});
Add Window New Widget Date and Time X News | | Submit WorldSports The High Court has d challenge to laws tha mmigrant spouses speak English in orde UK... (BEC) Tennis Date and Time E-mail September 2017 Su Mo Tu We Th Fr Sa 27 28 29 30 31 12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 1 2 3 45 6 7 JavaScript Certification Welcome to our n Business Challenges via Web take a part jQWidgets better web, less time. Take a to Facebook you have 7 new notifications Twitter John Doe is following you. Look at New videos, take a look at YouTube.com Sunny Sunny To 25C We: 27 CExplanation / Answer
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("div").hide();
});
});
$(document).ready(function(){
$("#show").click(function(){
$("div").show();
var source = [
'JavaScript Certification - Welcome to our network',
'Business Challenges via Web take a part',
'jQWidgets better web, less time. Take a tour',
'Facebook - you have 7 new notifications',
'Twitter - John Doe is following you. Look at his profile',
'New videos, take a look at YouTube.com'
];
$('#docking').jqxDocking({ orientation: 'horizontal', width: '100%', mode: 'docked' });
$('#calendar').jqxCalendar({ width: 180, height: 180 });
$('#newsTbs').jqxTabs({ width: 375, height: 181, selectedItem: 1 });
$('#listbox').jqxListBox({ source: source, width: 375, height: 181 });
var source2 = [
"Date and Time",
"Email",
"News",
];
// Create a jqxDropDownList
$("#jqxdropdown").jqxDropDownList({ source: source2, selectedIndex: 1, width: '200', height: '25'});
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="show">Add Window</button>
<div id='jqxWidget' hidden="true">
<div id="docking">
<div>
<div id="window0">
<div>New Widget</div>
<div>
<div id="jqxdropdown">
</div>
<button>Submit</button>
</div>
</div>
<div id="window1">
<div>Date and Time</div>
<div>
<div id="calendar">
</div>
<h3>Sunny</h3>
<div>
<img src="../../images/sun-icon.png" alt="Sunny" />
</div>
<div
style="text-align: left; margin-left: 5px; margin-top: 10px; font-size: 10px; float: right; margin-right: 20px;">
Mo: 23 °C<br /> To 25 °C<br /> We: 27 °C
</div>
</div>
</div>
</div>
<div>
<div id="window2">
<div>News</div>
<div>
<div id="newsTbs">
<ul>
<li>World</li>
<li>Local</li>
<li>Sports</li>
</ul>
<div>
<div
style="padding: 3px; margin: 10px; width: 150px; height: 84px; float: left;">
<img src="../../images/news_ie6.jpg" alt="IE6" title="IE6" />
</div>
<span>Microsoft is set to get a
little more pushy ensuring you have an up-to-date browser and
will automatically update Internet Explorer... <span
style="font-size: 8px;">(BBC)</span>
</span>
</div>
<div>
<div
style="padding: 3px; margin: 10px; width: 144px; height: 81px; float: left;">
<img src="../../images/local.jpg" alt="Tennis" title="Tennis" />
</div>
<span>The High Court has
dismissed a challenge to laws that require immigrant spouses to
be able to speak English in order to live in the UK... <span
style="font-size: 8px;">(BBC)</span>
</span>
</div>
<div>
<div
style="padding: 3px; margin: 10px; width: 130px; height: 73px; float: left;">
<img src="../../images/tennis.jpg" alt="Tennis" title="Tennis" />
</div>
<span>British number one Elena
Baltacha says Judy Murray is a "fantastic" appointment as Great
Britain's new Fed Cup captain... <span>(BBC)</span>
</span>
</div>
</div>
</div>
</div>
<div id="window4">
<div>E-mail</div>
<div>
<div id="listbox"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>