opening multiple windows

[elessarParticipant]

Hello, I was struggling for several hours with one problem – how to open several windows, instead of reopening one with different content. In my code I open new window after clicking on special dates in calendar. Then I click again on another special date and the content is rewritten in the same window. Instead of that I want to open another window :

$(document).ready(function () {

var theme = getTheme();

var dates = new Array();

          basicDemo.config.theme = 'summer';

var date1 = new Date();

var date2 = new Date();

var date3 = new Date();

date1.setDate(5);

date2.setDate(15);

date3.setDate(16);

          name1 = "X";

          name2 = "Y";

          name3 = "Z";

          text1 = "text1";

          text2 = "text2";

          text3 = "text3";

dates.push([date1, name1, text1, 1]);

dates.push([date2, name2, text2, 2]);

dates.push([date3, name3, text3, 3]);

// Create calendar.

          $("#jqxWidget").jqxCalendar({ width: '350px', height: '350px', theme: "summer", culture: 'cs-CZ'});

          $("#jqxWidget").jqxDragDrop();

          $("#jqxWidget").jqxCalendar({ firstDayOfWeek: 1 });

          $("#jqxWidget").jqxCalendar('addSpecialDate', date1, '', name1);

          $("#jqxWidget").jqxCalendar('addSpecialDate', date2, '', name2);

          $("#jqxWidget").jqxCalendar('addSpecialDate', date3, '', name3);

          $('#jqxWidget').bind('cellSelected', function () {

              $('#window').jqxWindow('open');

basicDemo.init();

              var getDate = $('#jqxWidget').jqxCalendar('getDate');

toggle(dates, getDate); //fill the DIVs with data

});

});

var basicDemo = (function () {

//Adding event listeners

function _addEventListeners() {

              $('#window').bind('resizing', function (event) {

                  $('#tab').jqxTabs('height', $('#windowContent').height() - 3);

});

};

//Creating all page elements which are jqxWidgets

function _createElements() {

              //$('#restrictParentCheckBox').jqxCheckBox({ theme: basicDemo.config.theme, height: '45px', width: '185px', checked: true });

              $('#tab').jqxTabs({ height: 258, theme: basicDemo.config.theme });

};

//Creating the demo window

function _createWindow() {

              $('#window').jqxWindow({ showCollapseButton: true, maxHeight: 400, maxWidth: 700, minHeight: 200, minWidth: 200, height: 300, width: 500, theme: basicDemo.config.theme });

};

return {

config: {

dragArea: null,

theme: null

},

init: function () {

//Creating all jqxWindgets except the window

_createElements();

//Attaching event listeners

_addEventListeners();

//Adding jqxWindow

_createWindow();

}

};

} ());

<div id="Div1">

        <div style="width: 100%; height: 650px; margin-top: 50px; margin-bottom:50px" id="mainDemoContainer">

            <div id="window">

                <div id="windowHeader">Overview

                </div>

                <div style="overflow: hidden;" id="windowContent">

                    <div id="tab" >

                        <ul style="margin-left: 30px; margin-top:200px">

                            <li id='firstName'>T</li>

                            <li id='secondName'></li>

                            <li id='thirdName'></li>

                        </ul>

                        <div id="first" ></div><div id="second"></div><div id="third"></div>

                    </div>

                </div>

            </div>

        </div>

    </div>

Anyone has any hint how to do that?

Plus I have one another unrelated question. If I want to change background color in jqx.summer (for example the background color of calendar), which line shoud I edit? I tried adding this line

.jqx-calendar {border-color: #555; border-width:2px;background: #feeebd url(images/sunny/ui-bg_highlight-soft_100_feeebd_1x100.png) 50% top repeat-x; }

to jqx.summer.css , but it doesn’t seem to work.

Thank You!

[Peter StoevKeymaster]

Hi elessar,

There is already such example with multiple windows and you can take a look at its implementation here: multiple-windows.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[elessarParticipant]

gosh, I’m even using that example Thank you.
(Btw. fantastic framework!)

[chandrika.sharmaParticipant]

Hello,

I wanted to implement the multiple windows feature on a single page. I saw the example of multiple-windows in jquery but i want to implement this in Angular2 using <angularWindow> directive. I am unable to implement this in angular2. Please provide me a direction to implement this in angular2 as well.

Thanks

[Author]

Posts