k33g/gist:718801

## gistfile1.html
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
	<meta name="format-detection" content="false">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>joApp</title>
	<link rel="stylesheet" href="css/jo.css" type="text/css">
	<link rel="apple-touch-icon" href="apple-touch-icon.png">
	<script src="jo.js"></script>
</head>

	<body>

		<script>
			//two columns iPad layout template
			//by k33g_org

			// initialize jo
			jo.load();

			var navigationBar = new joNavbar("two columns iPad layout template");

			var leftSidePanel = new joStackScroller();
			var rightContentPanel = new joStackScroller();


			leftSidePanel.setStyle({position:"fixed",float:"left",width:"30%",left:"0"});
			rightContentPanel.setStyle({position:"fixed",float:"right",width:"70%",left:"30%",borderLeft:"solid 1px black"});

			var footer = new joToolbar("The Footer ...");

			var mainScreen = new joFlexcol([navigationBar,leftSidePanel,rightContentPanel]);

			var container = new joContainer([mainScreen,footer]);
			var screen = new joScreen(container);


			var list;

			var leftSideCard = new joCard([
				list = new joMenu([
					{ title: "Card 1", id: "card1" },
					{ title: "Card 2", id: "card2" }

				])
			]);

			list.selectEvent.subscribe(function(id) {
				if (id == "card1") rightContentPanel.push(rightSideCard_0);
				if (id == "card2") rightContentPanel.push(rightSideCard_1);

			}, this);

			var userTextField = new joInput();
			userTextField.container.placeholder = "Hello World";

			// create our view card
			var rightSideCard_0 = new joCard([

			    new joCaption("rightSideCard_0"),

			    new joDivider(),

				new joGroup([
					new joLabel("Username"),

					new joFlexrow(userTextField),


					new joLabel("Password"),
					new joFlexrow(new joPasswordInput()),
					new joLabel("Options"),

					new joFlexrow(option = new joOption([
						"One", "Two", "Three", "Four", "Five"
					])),

					new joSelect([
						"Apple", "Orange", "Banana", "Grape", "Cherry", "Mango"
					]),

					new joFlexrow([
						new joLabel("Activate").setStyle("left"),
						new joToggle(true)
					]),
					new joFlexrow([
						new joLabel("Notify").setStyle("left"),
						new joToggle().setLabels(["No", "Yes"])
					])

				]),

				new joDivider(),

			    new joButton("OK").selectEvent.subscribe(function() {
			        rightContentPanel.push(rightSideCard_1);
			    })
			]);

			var rightSideCard_1 = new joCard([

			    new joCaption("rightSideCard_1"),
			    new joDivider(),
			    new joButton("OK").selectEvent.subscribe(function() {
			        rightContentPanel.push(rightSideCard_0);
			    })
			]);

			// this is a bit of a hack for now; adds a CSS rule which puts enough
			// space at the bottom of scrolling views to allow for our floating
			// toolbar. Going to find a slick way to automagically do this in the
			// framework at some point.
			joDefer(function() {
				var style = new joCSSRule('jostack > joscroller > *:last-child:after { content: ""; display: block; height: ' + (footer.container.offsetHeight+35) + 'px; }');
			});


			// put the card on our view stack
			leftSidePanel.push(leftSideCard);
			rightContentPanel.push(rightSideCard_0);

		</script>

	</body>

</html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
	<meta name="format-detection" content="false">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>joApp</title>
	<link rel="stylesheet" href="css/jo.css" type="text/css">
	<link rel="apple-touch-icon" href="apple-touch-icon.png">
	<script src="jo.js"></script>
	</head>

	<body>

	<script>
	//two columns iPad layout template
	//by k33g_org

	// initialize jo
	jo.load();

	var navigationBar = new joNavbar("two columns iPad layout template");

	var leftSidePanel = new joStackScroller();
	var rightContentPanel = new joStackScroller();


	leftSidePanel.setStyle({position:"fixed",float:"left",width:"30%",left:"0"});
	rightContentPanel.setStyle({position:"fixed",float:"right",width:"70%",left:"30%",borderLeft:"solid 1px black"});

	var footer = new joToolbar("The Footer ...");

	var mainScreen = new joFlexcol([navigationBar,leftSidePanel,rightContentPanel]);

	var container = new joContainer([mainScreen,footer]);
	var screen = new joScreen(container);


	var list;

	var leftSideCard = new joCard([
	list = new joMenu([
	{ title: "Card 1", id: "card1" },
	{ title: "Card 2", id: "card2" }

	])
	]);

	list.selectEvent.subscribe(function(id) {
	if (id == "card1") rightContentPanel.push(rightSideCard_0);
	if (id == "card2") rightContentPanel.push(rightSideCard_1);

	}, this);

	var userTextField = new joInput();
	userTextField.container.placeholder = "Hello World";

	// create our view card
	var rightSideCard_0 = new joCard([

	new joCaption("rightSideCard_0"),

	new joDivider(),

	new joGroup([
	new joLabel("Username"),

	new joFlexrow(userTextField),


	new joLabel("Password"),
	new joFlexrow(new joPasswordInput()),
	new joLabel("Options"),

	new joFlexrow(option = new joOption([
	"One", "Two", "Three", "Four", "Five"
	])),

	new joSelect([
	"Apple", "Orange", "Banana", "Grape", "Cherry", "Mango"
	]),

	new joFlexrow([
	new joLabel("Activate").setStyle("left"),
	new joToggle(true)
	]),
	new joFlexrow([
	new joLabel("Notify").setStyle("left"),
	new joToggle().setLabels(["No", "Yes"])
	])

	]),

	new joDivider(),

	new joButton("OK").selectEvent.subscribe(function() {
	rightContentPanel.push(rightSideCard_1);
	})
	]);

	var rightSideCard_1 = new joCard([

	new joCaption("rightSideCard_1"),
	new joDivider(),
	new joButton("OK").selectEvent.subscribe(function() {
	rightContentPanel.push(rightSideCard_0);
	})
	]);

	// this is a bit of a hack for now; adds a CSS rule which puts enough
	// space at the bottom of scrolling views to allow for our floating
	// toolbar. Going to find a slick way to automagically do this in the
	// framework at some point.
	joDefer(function() {
	var style = new joCSSRule('jostack > joscroller > *:last-child:after { content: ""; display: block; height: ' + (footer.container.offsetHeight+35) + 'px; }');
	});


	// put the card on our view stack
	leftSidePanel.push(leftSideCard);
	rightContentPanel.push(rightSideCard_0);

	</script>

	</body>

	</html>