Code: Select all
function test_1() // Window Demo
{
Window( "win" , "Hello World!", 600 , 300 );
Button( 'button_1' , 'win' , 240 , 248 , "Close" , "Release('win')" );
}
function test_2() // Label Demo
{
Window( 'win' , "Hello World!", 600 , 300 );
Label( 'label_1' , 'win' , 100 , 260 , "This is a Label!" );
Button( 'button_1' , 'win' , 240 , 248 , "Close" , "Release('win')" );
}
function test_3() // TextBox Demo
{
Window( 'win' , "Hello World!", 600 , 300 );
TextBox( "text_1" , 'win' , 130, 230, "TextBox!" );
Button( 'button_1' , 'win' , 240 , 110 , "Get TxtBox Value" , "MsgInfo(document.getElementById('text_1').value,'TextBox Value')" );
Button( 'button_2' , 'win' , 240 , 240 , "Set TxtBox Value" , "document.getElementById('text_1').value = 'New Value' " );
Button( 'button_3' , 'win' , 240 , 370 , "Close" , "Release('win')" );
}
function test_4() // MsgInfo Demo
{
MsgInfo("Message","This is MsgInfo()!");
}
function test_5() // Image Demo
{
Window( 'win' , "Image Demo", 600 , 300 );
Image( 'Image_1' , 'win' , 30 , 225 , "img/logo.gif" );
Button( 'button_1' , 'win' , 240 , 248 , "Close" , "Release('win')" );
}
function test_6() // TextBox Properties Demo
{
Window( 'win', "TextBox Properties Demo", 600, 400 );
Label( 'label_1' , 'win' , 30 , 10 , "Sample TextBox" );
TextBox( 'text_1', 'win', 30, 150, "TextBox!" );
Label( 'label_2' , 'win' , 60 , 10 , "defaultValue" );
TextBox( 'text_2', 'win', 60, 150, "" );
document.getElementById( 'text_2' ).defaultValue = 'This is default Value';
Label( 'label_3' , 'win' , 90 , 10 , "Disabled" );
TextBox( 'text_3', 'win', 90, 150, "Disabled!" );
document.getElementById('text_3').disabled = true;
Label( 'label_4' , 'win' , 120 , 10 , "maxLength = 5" );
TextBox( 'text_4', 'win', 120, 150, "12345" );
document.getElementById('text_4').maxLength = 5;
Label( 'label_5' , 'win' , 150 , 10 , "readOnly" );
TextBox( 'text_5', 'win', 150, 150, "TextBox!" );
document.getElementById('text_5').readOnly = true;
Label( 'label_6' , 'win' , 180 , 10 , "Size = 30" );
TextBox( 'text_6', 'win', 180, 150, "TextBox!" );
document.getElementById('text_6').size = 30;
Label( 'label_7' , 'win' , 210 , 10 , "SetFocus" );
TextBox( 'text_7', 'win', 210, 150, "TextBox!" );
SetFocus( 'text_7' );
Label( 'label_8' , 'win' , 240 , 10 , "Right Aligned!" );
TextBox( 'text_8', 'win', 240, 150, "TextBox!" );
document.getElementById('text_8').style.textAlign = 'right';
Label( 'label_9' , 'win' , 270 , 10 , "Color" );
TextBox( 'text_9', 'win', 270, 150, "TextBox!" );
document.getElementById('text_9').style.color = "rgb(255,0,0)";
Label( 'label_10' , 'win' , 300 , 10 , "Numeric TextBox" );
NumericTextBox( 'text_10', 'win', 300, 150, 100 );
Button( 'button_2' , 'win' , 340 , 200 , "Get Default" , "MsgInfo( document.getElementById( 'text_2' ).defaultValue, 'Default Value' )" );
Button( 'button_3' , 'win' , 340 , 370 , "Close" , "Release('win')" );
}
Code: Select all
//////////////////////////////////////////////////////////////////////////////////
//
// HMGSCRIPT: Programming For The Web in The Right Way :)
//
//////////////////////////////////////////////////////////////////////////////////
//
// I've wrote this library after analize tens of JavaScript samples, code,
// tutorials and users posts in forums, freely available on the web.
//
// I've simply attempted to arrange in a simple way, the common knowledge
// available about how to create modal windows and controls on the fly using
// JavaScript.
//
// So, I not consider this code as mine, then, I'm publishing it as public domain.
//
// From the user's perspective, these GUI functions should be as easy to use as
// HMG GUI commands and I've wrote them with such goal in mind.
//
// This library must be considered as pre-alpha.
//
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
//
// This is free and unencumbered software released into the public domain.
//
// Anyone is free to copy, modify, publish, use, compile, sell, or
// distribute this software, either in source code form or as a compiled
// binary, for any purpose, commercial or non-commercial, and by any
// means.
//
// In jurisdictions that recognize copyright laws, the author or authors
// of this software dedicate any and all copyright interest in the
// software to the public domain. We make this dedication for the benefit
// of the public at large and to the detriment of our heirs and
// successors. We intend this dedication to be an overt act of
// relinquishment in perpetuity of all present and future rights to this
// software under copyright law.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
// IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
// OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
// ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
// OTHER DEALINGS IN THE SOFTWARE.
//
// For more information, please refer to <http://unlicense.org/>
//
//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////
// Window
//////////////////////////////////////////////////////////////////////////////////
function Window( cId , cCaption , nWidth , nHeight )
{
// Create a div for the cover, set its properties and add to the page body.
// The cover is used since this is a modal window.
var cover = document.createElement( "div" ) ;
cover.className = "cover" ;
cover.style.width = document.body.clientWidth ;
cover.style.height = document.body.clientHeight ;
cover.id = 'cover_' + cId ;
document.body.appendChild( cover ) ;
// Create a div for the window, set its properties and add to the page body.
var window = document.createElement( "div" ) ;
window.className = "window" ;
window.innerHTML = "<h1>" + cCaption + "</h1>" ;
window.style.top = ( document.body.clientHeight / 2 ) - ( nHeight / 2 ) ;
window.style.left = ( document.body.clientWidth / 2 ) - ( nWidth / 2 ) ;
window.style.width = nWidth ;
window.style.height = nHeight ;
window.id = cId ;
document.body.appendChild( window );
}
function Release( cId )
{
document.getElementById( 'cover_' + cId ).parentNode.removeChild( document.getElementById( 'cover_' + cId ) )
document.getElementById( cId ).parentNode.removeChild( document.getElementById( cId ) )
}
//////////////////////////////////////////////////////////////////////////////////
// Button
/////////////////////////////////////////////////////////////////////////////////
function Button( cId , cParentId , nRow , nCol , cCaption , cOnClick )
{
// Create the button on the fly, set its properties and append to the specified
// parent window
var control = document.createElement( "input" ) ;
control.type = "button" ;
control.value = cCaption ;
control.onclick = Function( cOnClick ) ;
control.style.position = "absolute" ;
control.style.top = nRow ;
control.style.left = nCol ;
control.style.width = 120 ;
control.style.height = 35 ;
control.id = cId ;
document.getElementById(cParentId).appendChild( control ) ;
}
//////////////////////////////////////////////////////////////////////////////////
// Label
//////////////////////////////////////////////////////////////////////////////////
function Label( cId , cParentId , nRow , nCol , cValue )
{
// Create the label on the fly, set its properties and append to the specified
// parent window
var control = document.createElement( "span" );
control.className = "label" ;
control.style.top = nRow ;
control.style.left = nCol ;
control.innerHTML = cValue ;
control.id = cId ;
document.getElementById(cParentId).appendChild( control ) ;
}
//////////////////////////////////////////////////////////////////////////////////
// TextBox
//////////////////////////////////////////////////////////////////////////////////
function TextBox( cId , cParentId , nRow , nCol , cValue )
{
// Create the TextBox on the fly, set its properties and append to the specified
// parent window
var control = document.createElement( "input" );
control.type = "text" ;
control.className = "textbox" ;
control.style.position = "absolute" ;
control.style.top = nRow ;
control.style.left = nCol ;
control.value = cValue ;
control.id = cId ;
document.getElementById(cParentId).appendChild( control ) ;
}
//////////////////////////////////////////////////////////////////////////////////
// Image
//////////////////////////////////////////////////////////////////////////////////
function Image( cId , cParentId , nRow , nCol , cSrc )
{
var control = document.createElement( "image" ) ;
control.style.position = "absolute" ;
control.className = "image" ;
control.id = cId ;
control.style.top = nRow ;
control.style.left = nCol ;
control.src = cSrc ;
document.getElementById(cParentId).appendChild( control ) ;
}
//////////////////////////////////////////////////////////////////////////////////
// MsgInfo
//////////////////////////////////////////////////////////////////////////////////
function MsgInfo( cMessage , cCaption )
{
Window( 'msginfowin' , cCaption , 300 , 150 );
Label( 'msgi_label' , 'msginfowin' , 60 , 150 - ( cMessage.length * 2.3 ) , cMessage );
Button( 'msgi_button' , 'msginfowin' , 100 , 100 , "Ok" , "Release('msginfowin')" );
}
//////////////////////////////////////////////////////////////////////////////////
// SetFocus
//////////////////////////////////////////////////////////////////////////////////
function SetFocus( cId )
{
document.getElementById( cId ).select();
}
function NumericTextBox( cId , cParentId , nRow , nCol , nValue )
{
// Create the TextBox on the fly, set its properties and append to the specified
// parent window
var control = document.createElement( "input" );
control.type = "text" ;
control.className = "textbox" ;
control.style.position = "absolute" ;
control.style.top = nRow ;
control.style.left = nCol ;
control.style.textAlign= 'right' ;
control.value = nValue ;
control.id = cId ;
control.onkeypress = function(e) {
if(!e) e = event;
return isNumberKey(e);
};
document.getElementById(cParentId).appendChild( control ) ;
}
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}