- Wed Feb 11, 2015 10:09 am
#9474
I found a jQuery Mobile Interface Builder and wanted to share it. 
https://01.org/rib/online/
Here is a sample design made in a few minutes:
And the generated html code:
Hope it helps with your UI designs.
https://01.org/rib/online/
Here is a sample design made in a few minutes:
And the generated html code:
Code: Select all
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="lib/jquery-1.6.4.js"></script>
<script src="lib/jquery.mobile-1.1.0.js"></script>
<link href="src/css/jquery.mobile.structure-1.1.0.css" rel="stylesheet" />
<link href="src/css/jquery.mobile.theme-1.1.0.css" rel="stylesheet" />
</head>
<body>
<div data-role="page" id="main" data-title="RGB Controller">
<div data-role="header">
<h1>RGB Controller</h1>
</div>
<div data-role="content">
<form action="" method="GET">
<div data-role="fieldcontain" id="r1">
<label for="r1-range">Red:</label>
<input type="range" id="r1-range" value="0" min="0" max="1023" step="1"
data-highlight="true" />
</div>
<div data-role="fieldcontain" id="g1">
<label for="g1-range">Green:</label>
<input type="range" id="g1-range" value="511" min="0" max="1023" step="1"
data-highlight="true" />
</div>
<div data-role="fieldcontain" id="b1">
<label for="b1-range">Blue:</label>
<input type="range" id="b1-range" value="1023" min="0" max="1023" step="1"
data-highlight="true" />
</div>
<a data-role="button" class="ui-btn-active" data-theme="a">Set RGB Values</a>
</form>
</div>
<div data-role="footer" data-position="fixed">
<h1>Copyright © 2015 Özay Turay a.k.a Simon</h1>
</div>
</div>
</body>
</html>Hope it helps with your UI designs.
