An example series on Easyui analog win2012 desktop

More recent time, think of the previous leadership asked me, what interface is more suitable for the company this screen is small but also requires the ability to handle more work at the same time.

I feel that Windows is the most suitable, after all, Microsoft has been doing so many years of system, people's operating habits have been determined by them.

Look at the effect first, this is the first edition.

The first version only added the Start menu popup, do not want to make the menu at the bottom of the compatibility so put the menu on the top

The menu is a little stingy, with a easyui menu.

Time is the second jump

The contents of the pop-up window are used by the IFRAME to load the Baidu home page

Baidu's front-end engineer gave a little joke

This version uses 2 frames:

jquery 1.11

Easyui 1.41

Code:

First quote JS to write a simple style

<script src= ". /js/jquery-1.11.1.js "></script>
<script type= "Text/javascript" src= ". /js/jquery-easyui-1.4.1/easyloader.js "></script>

<style>
* {
padding:0px;
margin:0px;
}
body{
Background-color: #2e2e2e;
}
. start_menu{
Background-color: #767676;
width:100%;
height:40px;
Float:left;
}
#time {
padding-right:10px;
Float:right;
Color:white;
Text-align:center;
}
#start {
Float:left;
}
</style>

Page code:

<div class= "Start_menu" >

<span id= "Time" > </span>
</div>

Picture is a picture of the Start menu

JS Section Code:

<script>
$ (function () {
Time seconds jump
SetInterval (function () {
var time = new Date ();
$ ("#time"). HTML (time.tolocaledatestring () + "<br/>" + time.tolocaletimestring (). Replace (' Morning ', ' "). Replace (" PM ", ""));
}, 1000);

$.getjson (".. /js/data/menu.json ", function (data) {
var menu_str = ';
if (data && data.menu) {
$ (Data.menu). Each (function (i, item) {
Menu_str + = "<div class= ' menu-item ' link= '" + Item.link + "' type= '" + Item.type + ">" + item.title + "</div&gt ;";
});
}
$ ("<div id= ' mm ' class= ' easyui-menu ' style= ' width:120px;display:none; ' ><div> "). HTML (MENU_STR). AppendTo (' body ');
});

Pop-up layer
$ ("Body"). On (' click ', ". Menu-item", function () {
Add to
if ($ ("#dlg"). Length > 0) {
$ ("#dlg"). HTML ("");
} else {
$ ("Body"). Append ("<div id= ' dlg ' ></div>");
}
var $menu = $ (this);
using (' dialog ', function () {
$ ("#dlg"). Dialog ({
Title: "Window",
width:800,
height:400,
Shadow:false,
Modal:false,
Content: "<iframe border=0 frameborder=0 style= ' width:100%;height:100%; ' scrolling= ' yes ' src= ' + $menu. attr (' link ') + ' ></iframe> '
});
});
});
var menu_json = null;
Start Menu
$ ("#start"). MouseOver (function () {
$ (this). attr ("src", ".. /img/2.jpg ");
Using ("Menu", function () {
$ (' #mm '). Menu (' show ', {
left:0,
Top:40
});
});
}). mouseout (function () {
$ (this). attr ("src", ".. /img/1.jpg ");
});
});
</script>

A simple example can be used.

Demo Address: http://1.alon.sinaapp.com/view/Main.html

An example series on Easyui analog win2012 desktop