JavaScript: WinSlice – showing windows in a web page

Window Slice is jQuery based UI widget to show small multiple windows in a web page. Its function is to create a layer on the web page to show user contents like a small window. It can display inline, iframe contents. WinSlice is the class for creating the small the DOM windows.[ download ]

Key features of WinSlice:

  • showing several small DOM windows – many WinSlices at a time in a web page
  • showing child iframe content (WinSlice) with larger size than parent iframe web page
  • handling close event of WinSlice
  • handling finish event, that is on finishing task children WinSlices can notify result to parent handler
  • finding own WinSlice  in a iframe web page if it has been opened by WinSlice
  • finding WinSlice by child elements using id
  • parent WinSlice closes all the children WinSlices when parent is closed, given that parent reference passed to children
  • easy to use JSON notation for WinSlice instances
  • easily modifiable Styles for each WinSlice instance

Ins and outs of WinSlice

WinSlice class resides in  winslice.js. It uses latest jquery library for its functionality. You can control window properties using WinSlice. You can customize styles of the small window changing css in winslice.css.

Properties of WinSlice

  • iframeUrl : “iframe src url”, set the iframe src to show other web contents in iframe
  • inlineId: “inline content Id”, to set inline container id, the contents/children  from this wrapper will be shown in WinSlice
  • center: true/false, default is true, set to whether WinSlice position itself in center of the web page. If top, left are assigned then center is set to false.
  • top: n, defalut is 0. set percentage to position from top to open the WinSlice i. e top:20 means top:20% for positioning WinSlice. Do not use top, left from css styles.
  • left: m, defalut is 0. set percentage to position from left to open the WinSlice i. e left:20 means left:20% for positioning WinSlice. Do not use top, left from css styles.
  • width: w, set content width of the WinSlice. It has more precedence over wslice_window class.
  • height: h, set content height of the WinSlice. It has more precedence over wslice_window class.
  • overlay: true/false, default is true. It is used whether display overlay or not.
  • draggable: false/true, default is false. It is dependent on jQuery UI plugins. If UI plugins are not available it will not work.
  • winStyle: “styles”, to set each WinSlice styles, it overrides winslice.css styles. Do not use top, left in css styles.
  • headerStyle: “styles”, to set css for header section of each WinSlice.

Methods of WinSlice

  • show(propsObj) – it is the main method to show WinSlice in a web page.  After instantiating the winslice object you must call .show(propsObj)  mehtod to display WinSlice. Its only parameter propsObj  is the required properties for making DOM window using the WinSlice. You can use JSON notation to pass properties object. i.e .show({inlineId:”inlinedivId”,width:300,height:300})
  • enableClose(enable) – enable/disable close x icon
  • reload(propsObj) – refresh current winslice contents
  • contains(element) – returns true if the WinSlice contains the element with id. Otherwise returns false.
  • finish(result) – notify result to event handler of onfinish
  • close(result) – raises onclose event and then close the current WinSlice, remove from DOM elements.

Events of WinSlice

  • onclose: oncloseEventHandler, if set on calling show method then it will be raised on close of the WinSlice with parameters such as oncloseEventHandler(sender, result). After call event handler it closes itself.
  • onfinish: onfinishEventHandler, if set on calling show method then it will be raised on finishing task of winslice child web page such as onfinishEventHandler(sender,result). It just notify result to its parent/caller, does not close winslice itself.

Utility/Static Methods of WinSlice

  • WinSlice.callbackResultIf(result) –  callback result from child winslice to parent/caller raising onclose event handler and then close itself. It is useful only in iframe content winslice.
  • WinSlice.notifyResultIf(result) – notify result to caller raising onfinish event handler. It is useful only in iframe content winslice.
  • WinSlice.getWinSliceIf() – if the current web page is opened in iframe using WinSlice, then it can find and return its opener WinSlice. Otherwise return null.
  • WinSlice.findWinSliceIn(element) – find the WinSlice instance that contains this element, it can be any element with Id in inline contents which is opened using winslice. otherwise it returns null.
  • WinSlice.setLoadingImage(imgSrc) – set default loading image that is shown while WinSlice loading contents for its window.

Styles of WinSlice

You can change default styles using classes in winslice.css. There are css classes that are used in WinSlice. To customize look and feel of WinSlice modify css as required.  White boxes in the diagram below are container for user contents. All the css classes consist WinSlice window are given in following diagram:

WinSlice Styles

 

Examples of WinSlice: You can download demos from here.

For example, there are three html files created to demonstrate the WinSlice usage in various scenario. pages are  such as winslice1.htm, winslice2.htm, winslice3.htm

Screenshots of WinSlice

  • Iframe contents window with WinSlice
winslice_iframe_examples

WinSlice - examples for iframe contents

  • Inline contents with WinSlice
winslice_inline_examples

WinSlice - examples for inline contents

It is tested on : IE-8, IE-8 Compatibility mode, FireFox – 5.0.1, Safari 5.0.4

Feel free to ask any clarifications and let me know any errors of the winslice, It is beta version of WinSlice.

I am open to listen from you as user and inform me if need any further help from me.  Wishing happy experience with WinSlice. 🙂

Code Samples of usage of WinSlice in javascript and html are given below

1. winslice1.htm – javascript

//usage of WinSlice instances
//javascript block that is used in winslice1.htm
<script type="text/javascript">
var ws;
function openwinslice1() {
ws = new WinSlice();
ws.show({ title: "WinSlice Title 1 - Iframe", iframeUrl: "http://yahoo.com", width: 400, height: 300 });
}

function openwinslicereload() {
ws.reload({ title: "WinSlice Title 1 - reload", iframeUrl: "http://yahoo.com" });
}

var ws2;
function openwinslice2() {
ws2 = new WinSlice();
ws2.show({ title: "WinSlice Title 2 - Iframe", iframeUrl: "winslice2.htm",
headerStyle: "background-color:#003300;", top: 25, left: 25, onclose: sliceClosed
});
}

var ws3;
function openwinslice3() {
ws3 = new WinSlice();
ws3.show({ title: "WinSlice Title 3 - inline", inlineId: "testInline", height: 200, width: 350 });
}

var ws7;
function openinnerInline() {
ws7 = new WinSlice();
ws7.show({ title: "WinSlice Title 4", inlineId: "innerInlince", headerStyle: "background-color:#900000;", top: 35, left: 35, height: 300, width: 300 });
}

function sliceClosed(sender) {
alert("Close button clicked on: " + sender.title);
}

function closewinslice() {
ws.close();
}

function closewinslice2() {
ws2.close();
}

function closewinslice3() {
ws3.close();
}

function clickinner(sender) {
var tws = WinSlice.findWinSliceIn(sender);
if (tws != null)
{ alert("This element is in Window Slice: " + tws.title); }
}
</script>

1. winslice1.htm – html


<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">

&nbsp;   WinSlice - jQuery DOM Window

&nbsp;  <script type="text/<span class=">// <![CDATA[


// <![<span class="hiddenSpellError" pre="">CDATA</span>[
javascript</span>" src="jquery-latest.js">
// ]]><script type="text/<span class=">// <![<span class="hiddenSpellError" pre="">CDATA</span>[
// <![<span class="hiddenSpellError" pre="">CDATA</span>[
javascript</span>" src="jquery-ui-1.8.14.custom.min.js">
// ]]><script type="text/<span class=">// <![<span class="hiddenSpellError" pre="">CDATA</span>[
hiddenspellerror</span>"="" pre="">javascript</span>" src="winslice.js">
// ]]><script type="text/javascript">// <![<span class="hiddenSpellError" pre="">CDATA</span>[
      //javascript block show above
// ]]>50px; padding-top: 50px;
width: 100%;">
This is Window Slice ( WinSlice) main page with examples.
 Window Slice is the jQuery based UI widget to create several pop ups at time in a web page.</pre>


<div><button onclick="openwinslice1();"> open WinSlice1</button> <button onclick="closewinslice();"> Close1 </button> <button onclick="openwinslice2();"> open WinSlice2</button> <button onclick="closewinslice2();"> Close2 </button> <button onclick="openwinslice3();"> open inline WinSlice3</button></div>



<pre><button onclick="closewinslice3();"> Close3 </button></pre>


<div id="testInline" style="display: none;">


<div style="width: 100%; height: 100%;">this is inline div <button onclick="openinnerInline();"> open winslice 4 from inline content </button> <button id="button2" onclick="clickinner(this);"> find container winslice </button></div>


</div>
<div id="innerInlince" style="display: none;">


<div>this is inline from inline WinSlice <a id="anchor1" onclick="clickinner(this);" href="#">find container winslice</a> <button id="innerbutton1" onclick="clickinner(this);"> find container winslice</button></div>


</div>

// ]]>

// ]]>

// ]]>

Advertisements

About M Moniruzzaman
A passionate software engineer, have been developing applications on various platforms such as Android, iPhone, .Net (C#) technologies and web based ASP.NET, PHP, JavaScript, jQuery technologies for more than 10 years. Especially I have expertise on developing applications for Android and iPhone, as well as service oriented, client-server based applications where clients will be reside on Android/iPhone that communicate with WCF(.NET) service hosted on server. I have completed certification in Microsoft Certified Professional Developer (MCPD) on .Net 4 . I have completed my graduation in -- B.Sc. (Engineering) in Computer Science and Engineering, ShahJalal University of Science and Technology, Bangladesh. Thanks, M. Moniruzzaman (Zaman)

One Response to JavaScript: WinSlice – showing windows in a web page

  1. Pingback: Window Slice — ambulu offers jquery web design library

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: