JQuery Sample - xkp/Doc GitHub Wiki

Project file:

<xss:project>
    <path generator="app.xss"
          class_library="classes.xml"
          source_path="data/xss/jquery/" 
          output_path="data/xss/output/" 
          output_file="test_button.html"/>

    <idiom class="js-idiom" id_as_this="true"/>

    <application source="test_button.xs">
        <button id="btn1" caption="One button" width="100"/>
        <button id="btn2" caption="Two button" width="100"/>
        <button id="btn3" caption="Reset" width="100"/>
    </application>
</xss:project>

Code:(test_button.xs)

on btn1.click()
{
	btn2.caption = "Clicked";
	caption = "Other Clicked";
}

property target
{
	btn2.caption = "target acquired " + value;
	
	for(int i = 0; i < 20; i++)
	{
		btn2.width = btn2.width + 10;
		if (btn2.width > 200)
			btn2.width = 100;
	}
}

method reset(string s)
{
	target = s;
	btn1.caption = "...";
	btn2.caption = "...";
}

//mindless code, mind you
on btn2.click()
{
	btn1.caption = "Old value: " + application.target;
	application.target = 300;
}

on btn3.click()
{
	application.reset();
}

Output:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TITLE</title>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(function() {
var btn1 = $("#btn1");
btn1.text("One button");
btn1.width(100);
btn1.click(function(event)
{    
    btn2.text("Clicked");
    btn1.text("Other Clicked");
});


var btn2 = $("#btn2");
btn2.text("Two button");
btn2.width(100);
btn2.click(function(event)
{    
    btn1.text("Old value: " + application.target);
    application.target_set(300);
});


var btn3 = $("#btn3");
btn3.text("Reset");
btn3.width(100);
btn3.click(function(event)
{    
    application.reset();
});


var application = $("#application");
application.target = null;
application.target_set = function (value)
{
    application.target = value;
    btn2.text("target acquired " + value);
    for(var i = 0; i < 20; i++)
    {
        btn2.width(btn2.width() + 10);
        if (btn2.width() > 200)
        {
            btn2.width(100);
        }
    }
}
application.reset = function(s) 
{
	application.target_set(s);
	btn1.text("...");
	btn2.text("...");
};



});
</script>

<style>
</style>
</head>

<body>
    <div id='application'>
    <button id='btn1'>
        </button>
    <button id='btn2'>
        </button>
    <button id='btn3'>
        </button>
    </div>

</body>
</html>

JQuery Sample - xkp/Doc GitHub Wiki

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️