關於easyui模擬win2012桌面的一個例子系列

最近時間比較充裕，想到以前領導問我，什麼界面更適合公司這種屏幕小可是又要求能夠同時處理更多的工做。

我感受  windows是最合適的，畢竟微軟已經作了這麼多年的系統了，人的操做習慣已經被他們肯定了。

先看一下效果吧，這個是初版。

 

初版只加入了開始菜單 彈窗 ，不想作菜單在最底部的兼容性因此把菜單放在了上面

菜單有點小氣，用的是easyui的菜單

時間是秒跳

彈窗裏面的內容是用的iframe加載的百度首頁

百度的前端工程師還給開了個小玩笑

這個版本用到了2個框架：

jquery 1.11

easyui 1.41

代碼：

首先引用js 寫個簡單的樣式

        <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>

頁面代碼：

<div class="start_menu"  >
            <img src="../img/1.jpg" id="start" />
            <span id="time"  > </span>
        </div>

圖片是開始菜單的圖片

js部分代碼：

<script>
            $(function() {
                //時間秒跳
                setInterval(function() {
                    var time = new Date();
                    $("#time").html(time.toLocaleDateString() + "<br />" + time.toLocaleTimeString().replace('上午', "").replace("下午", ""));
                }, 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>";
                        });
                    }
                    $("<div id='mm' class='easyui-menu' style='width:120px;display: none;'><div>").html(menu_str).appendTo('body');
                });

                //彈出層
                $("body").on('click',".menu-item",function() {
                    //添加
                    if ($("#dlg").length > 0) {
                        $("#dlg").html("");
                    } else {
                        $("body").append("<div id='dlg'></div>");
                    }
                    var $menu = $(this);
                    using('dialog', function() {
                        $("#dlg").dialog({
                            title : "窗口",
                            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").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>

簡單的例子就能夠用了

DEMO地址：http://1.alon.sinaapp.com/view/Main.html