jquery mobile looks like better choice (nw)

This commit is contained in:
Miodrag Milanovic 2013-08-14 09:35:55 +00:00
parent 674cc1d72b
commit c5016de0c5
19 changed files with 81 additions and 350 deletions

17
.gitattributes vendored
View File

@ -8883,17 +8883,14 @@ src/ume/ume.c svneol=native#text/plain
src/ume/ume.lst svneol=native#text/plain
src/ume/ume.mak svneol=native#text/plain
src/version.c svneol=native#text/plain
web/css/default.ultimate.css svneol=native#text/css
web/css/dropdown.css svneol=native#text/css
web/css/main.css svneol=native#text/css
web/css/images/ajax-loader.gif -text
web/css/images/icons-18-black.png -text svneol=unset#image/png
web/css/images/icons-18-white.png -text svneol=unset#image/png
web/css/images/icons-36-black.png -text svneol=unset#image/png
web/css/images/icons-36-white.png -text svneol=unset#image/png
web/css/jquery.mobile.css svneol=native#text/css
web/favicon.ico -text
web/images/comnav-arrowon.png -text svneol=unset#image/png
web/images/comnav-arrowover.png -text svneol=unset#image/png
web/images/comnav-arrowover2.png -text svneol=unset#image/png
web/images/grad1.png -text svneol=unset#image/png
web/images/logo-mame-small.png -text svneol=unset#image/png
web/images/nav-arrow-right.png -text svneol=unset#image/png
web/images/nav-arrow-right2.png -text svneol=unset#image/png
web/images/nav-sub-press.png -text svneol=unset#image/png
web/index.html svneol=native#text/html
web/js/jquery.js svneol=native#text/javascript
web/js/jquery.mobile.js svneol=native#text/javascript

View File

@ -1,224 +0,0 @@
@charset "UTF-8";
/**
* CSS Drop-Down Menu Theme
*
* @file default.css
* @version 0.1
* @type transitional
* @browsers Windows: IE6+, Opera7+, Firefox3+
* Mac OS: Safari2+, Firefox3+
*
* @link http://www.lwis.net/free-css-drop-down-menu
* @copyright 2008-2012 Live Web Initiatives, http://www.lwis.net
*
*/
/* -- Base drop-down styling -- */
ul.dropdown {
font: bold 17px/normal Arial, Helvetica, sans-serif;
}
ul.dropdown li {
padding: 5px;
background-color: #333;
color: #fff;
}
ul.dropdown a:link,
ul.dropdown a:visited { color: #fff; text-decoration: none;}
ul.dropdown a:hover {
border-top-color: #5db1e0 !important;
border-left-color: #5db1e0;
background-color: #4498c7;
color: #fff;
}
ul.dropdown ul a.dir:hover {
background-color: #4698ca;
background-image: url(../images/comnav-arrowon.png);
color: #fff;
}
ul.dropdown a:active {
background: #058acf url(../images/nav-sub-press.png) 0 0 repeat-x !important;
color: #fff;
}
/* -- level mark -- */
ul.dropdown ul {
left: auto;
right: 0;
width: 150px;
margin-top: -1px;
border-top: 1px solid #1a1a1a;
border-left: solid 1px #4c4c4c;
font: bold 11px/1em Tahoma, Geneva, Verdana, sans-serif;
}
ul.dropdown ul li {
background-color: #3a3a3a;
}
/* -- level mark -- */
ul.dropdown ul ul {
top: 0;
right: auto;
left: 100%;
margin-top: 0;
border-top: none;
border-left: none;
font-weight: normal;
}
ul.dropdown ul ul li {
background-color: #4c4c4c;
}
/* -- level mark -- */
ul.dropdown ul ul ul li {
background-color: #595959;
}
/* -- Supporting class `dir` -- */
ul.dropdown *.dir {
padding-right: 30px;
background-image: none;
background-position: 100% 50%;
background-repeat: no-repeat;
}
/* -- level mark -- */
ul.dropdown ul *.dir {
padding-right: 15px;
background-image: url(../images/nav-arrow-right.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown ul ul *.dir {
background-image: url(../images/nav-arrow-right2.png);
}
/* -- Components override -- */
ul.dropdown-vertical *.dir {
background-image: url(../images/nav-arrow-right.png);
}
ul.dropdown-vertical-rtl *.dir {
padding-right: 15px;
background-image: url(../images/nav-arrow-left.png);
background-position: 0 50%;
}
/* -- Mixed -- */
ul.dropdown li a,
ul.dropdown *.dir {
border-style: solid;
border-width: 1px;
border-color: #404040 #1a1a1a #1a1a1a #505050;
}
ul.dropdown ul li a,
ul.dropdown ul *.dir { border-color: #4a4a4a #242424 #242424; border-left: none; }
ul.dropdown ul ul li a,
ul.dropdown ul ul *.dir { border-color: #595959 #333 #333; }
ul.dropdown ul ul ul li a,
ul.dropdown ul ul ul *.dir { border-color: #767676 #404040 #404040; }
/* -- Custom elements -- */
#n-movies { width: 250px; text-align: center; }
#n-movies ul { right: auto; left: 0; width: 249px; text-align: left; }
#n-movies ul ul { left: 249px; width: 150px; }
#n-movies ul a { width: 232px; }
#n-movies ul a.dir { width: 210px; }
#n-movies ul ul a { width: 133px; }
#n-movies ul ul a.dir { width: 111px; }
#n-movies ul ul ul { left: 100%; }
/* -- Base style extension -- */
ul.dropdown a,
ul.dropdown span {
display: block;
padding: 5px 30px;
}
/* -- Base style override -- */
ul.dropdown li {
padding: 0;
}
ul.dropdown ul a,
ul.dropdown ul span { /* POI: override abstract a, span */
padding: 8px;
}
/* -- Base style reinitiate: post-override activities -- */
ul.dropdown *.dir { /* POI */
padding: 5px 30px;
}
ul.dropdown ul *.dir {
padding: 8px 30px 8px 8px;
}
/* -- Custom -- */
ul.dropdown ul a {
width: 133px;
}
ul.dropdown ul a.dir {
width: 111px;
}
/* -- Drop-down open -- */
ul.dropdown li:hover > *.dir {
background-color: #3d3d3d;
}
ul.dropdown li:hover > a.dir:hover {
background-color: #4698ca;
color: #fff;
}
ul.dropdown ul li:hover > *.dir {
background-color: #4c4c4c;
background-image: url(../images/comnav-arrowover.png);
}
ul.dropdown ul li:hover > a.dir:hover {
background-image: url(../images/comnav-arrowon.png);
color: #fff;
}
ul.dropdown ul ul li:hover > *.dir {
background-color: #595959;
background-image: url(../images/comnav-arrowover2.png);
color: #fff;
}

View File

@ -1,67 +0,0 @@
@charset "UTF-8";
/**
* Horizontal CSS Drop-Down Menu Module
*
* @file dropdown.css
* @package Dropdown
* @version 0.8
* @type Transitional
* @stacks 597-599
* @browsers Windows: IE6+, Opera7+, Firefox3+
* Mac OS: Safari2+, Firefox3+
*
* @link http://www.lwis.net/free-css-drop-down-menu
* @copyright 2008-2012 Live Web Initiatives, http://www.lwis.net, http://www.lwis.net
*
*/
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

12
web/css/jquery.mobile.css Normal file

File diff suppressed because one or more lines are too long

View File

@ -1,2 +0,0 @@
@charset "UTF-8";
body { color: white; padding: 50px; border-top: none; background: #4c4c4c url(../images/grad1.png) 0 0 repeat-x; font: 12px/normal Tahoma, Arial, Helvetica, sans-serif; }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 114 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 114 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 114 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 356 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 114 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 114 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 158 B

View File

@ -1,23 +1,27 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>MAME</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">
<link rel="shortcut icon" href="favicon.ico">
<link href="css/main.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/default.ultimate.css" media="screen" rel="stylesheet" type="text/css" />
<meta http-equiv="expires" content="-1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>MAME</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/jquery.mobile.css">
<!-- jQuery and jQuery Mobile -->
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript">
var writeToScreen = function(message) {
document.getElementById('output').innerHTML = message;
document.getElementById('current').innerHTML = message;
};
window.onload = function() {
function startWebSocket() {
var url = 'ws://localhost:8080/foo';
websocket = new WebSocket(url);
websocket.onopen = function(ev) {
@ -38,7 +42,7 @@
if(data.name =='__empty') {
items.push('No driver running');
} else {
items.push('<h1>Currently running : ' + data.description + ' [' + data.manufacturer+']</h1>');
items.push('Currently running : ' + data.description + ' [' + data.manufacturer+']');
}
document.getElementById('current').innerHTML = items.join('');
@ -51,45 +55,47 @@
websocket.onerror = function(ev) {
writeToScreen('<b style="color: red; ">Error</b>');
};
}
window.onload = function() {
startWebSocket();
};
</script>
<div data-role="page">
<div data-role="header">
<img src="images/logo-mame-small.png"/><div id="output" style="display: inline;"><b style="color:white;">Connecting...</b></div>
<!-- Home -->
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<div style="width: 320px; height: 120px; position: relative;">
<img src="images/logo-mame-small.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: 0px; margin-top: -50px">
</div>
<a data-role="button" href="#page1" data-icon="home" data-iconpos="left" class="ui-btn-right">Home </a>
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#page1" data-transition="fade" data-icon="bars">Driver</a>
</li>
<li>
<a href="#page1" data-transition="fade" data-icon="gear">Options</a>
</li>
<li>
<a href="#page1" data-transition="fade" data-icon="grid">Image</a>
</li>
<li>
<a href="#page1" data-transition="fade" data-icon="info">Info</a>
</li>
<li>
<a href="#page1" data-transition="fade" data-icon="check">Logs</a>
</li>
</ul>
</div>
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
<div id="current"></div>
</h3>
<a data-role="button" href="javascript:startWebSocket();" data-icon="refresh" data-iconpos="left" class="ui-btn-right">Reconnect</a>
</div>
<ul id="nav" class="dropdown dropdown-horizontal">
<li id="n-home"><a href="./">Home</a></li>
<li id="n-logs"><a href="./" class="dir">Logs</a>
<ul>
<li class="first"><a href="./"><strong>OS log</strong></a></li>
<li><a href="./">Verbose</a></li>
<li><a href="./">Driver log</a></li>
</ul>
</li>
<li id="n-options"><a href="./" class="dir">Options</a>
<ul>
<li class="first"><span class="dir">Video</span>
<ul>
<li class="first"><a href="./">Option 1</a></li>
<li><a href="./">Option 2</a></li>
<li><a href="./">Option 3</a></li>
<li><a href="./">Option 4</a></li>
<li><a href="./">Option 5</a></li>
</ul>
</li>
<li><span class="dir">Sound</span>
<ul>
<li class="first"><a href="./">Option 1</a></li>
<li><a href="./">Option 2</a></li>
</ul>
</li>
</ul>
</li>
<li id="n-debugger"><a href="./">Debugger</a></li>
</ul>
<br/><br/><br/><br/>
<div id="current"></div>
</div>
</body>
</html>
</html>

9
web/js/jquery.mobile.js Normal file

File diff suppressed because one or more lines are too long