类似于百度地图、谷歌地图的UI界面的简单实现

朋友胡潇今天让我做了一个类似于百度地图、谷歌地图的UI界面的简单实现，抽了点时间给他整了一个，没有进行过什么美化，只是把基本他需要的功能做了出来，写了一点点JS实现的，JS文件map.js 的代码：

//计算文档的可见高度

function windowHeight() {
    var de = document.documentElement;
    return self.innerHeight||(de && de.clientHeight)||document.body.clientHeight;
}

function hasClass(el, name) {
   return new RegExp('(s|^)'+name+'(s|$)').test(el.className);
}

function removeClass(el, name)
{
   if (hasClass(el, name)) {
      el.className=el.className.replace(new RegExp('(s|^)'+name+'(s|$)'),' ').replace(/^s+|s+$/g, '');
   }
}

function toggleTool() {
    var tools = document.getElementById("tools-wrapper");
    var map = document.getElementsByClassName("inner")[0];
    var tw = tools.offsetWidth;
    if(hasClass(tools, "toggled")) {
        removeClass(tools, "toggled");
        map.style.marginLeft = "20em"
    } else {
        tools.className += " toggled";
        map.style.marginLeft = "0em";
    }
}

//window.onresize是窗口改变大小的时候，因为窗口改变大小，文档的可见高度或宽度会变化。
window.onload=window.onresize=function(){
 var wh=windowHeight();
 document.getElementById("tools").style.height = document.getElementById("map").style.height =
  (wh-document.getElementById("header").offsetHeight-document.getElementById("navigator").offsetHeight)+"px";
}

HTML结构很简单

body
    #header
    #navigator
    #dashboard
        .columns
            #map-wrapper.main
            #tools-wrapper .sub

然后就使用JS去控制上面这些个东西即可，我使用的是负外边距的方式来实现左右分栏，其实后来想想，JS应该可以更简单一些，比如不需要使用JS直接对 #map 的样式进行操作，只需要 #toggle-button 点击之后，给 .columns 或者 #dashboard 加一个类 .toggled 即可，然后其它的工作就全部都是CSS的事情了。

大小自适应则完全使用JS实现了，也就是网页可视区域的高度减去 #header 与 #navigator 的高度即可，如果再在加上一个 #footer或者其它的占整个网页高度的东西的话，再减去这个新加的东西的高度即可，比如我如果加了一个 #footer 在最下面，那么改变高度的函数就成了：

window.onload=window.onresize=function(){
 var wh=windowHeight();
 document.getElementById("tools").style.height = document.getElementById("map").style.height =
  (wh - document.getElementById("header").offsetHeight - document.getElementById("navigator").offsetHeight) - document.getElementById("footer").offsetHeight +"px";
}

HTML 文件 index.html ：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>Map</title>
        <link charset="UTF-8" href="style.css" rel="stylesheet" />
        <script src="map.js" charset="UTF-8" type="text/javascript"></script>
    </head>
    <body id="map-page">
        <div id="header"></div>
        <div id="navigator">
            <p>
                <a href="#" title="#">One Key Service</a>
                <span><label>Tel.</label><span>18374888188</span></span>
                <span><label>User Info.</label><span>China Mobile</span></span>
            </p>
            <ul id="global">
                <li>
                    <a href="#" title="#">Directions</a>
                </li>
                <li>
                    <a href="#" title="#">Travel</a>
                </li>
                <li>
                    <a href="#" title="#">Location</a>
                </li>
                <li>
                    <a href="#" title="#">Marketing</a>
                </li>
                <li>
                    <a href="#" title="#">Locate</a>
                </li>
                <li>
                    <a href="#" title="#">Behavior Statistics</a>
                </li>
                <li>
                    <a href="#" title="#">Real-time Traffic</a>
                </li>
            </ul>
        </div>
        <div id="dashboard">
            <div>
                <div id="map-wrapper">
                    <div>
                        <!-- <iframe src="http://cox.antusoft.com" id="map"></iframe> -->
                        <div id="map">
                            <div id="map-demo">
                                Your Map Content Here!
                            </div>
                        </div>
                    </div>
                </div>
                <div id="tools-wrapper">
                    <div>
                        <div id="tools">
                            <a href="#" onclick="toggleTool()" title="Toggle" id="toggle-button">Toggle</a>
                            <div>
                                <form action="#" method="get">
                                    <h2>Search</h2>
                                    <div>
                                        <ul>
                                            <li>
                                                Bus
                                            </li>
                                            <li>
                                                By Car
                                            </li>
                                        </ul>
                                        <div>
                                            Your content here!
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div></div>
            </div>
        </div>
    </body>
</html>

CSS 文件 style.css ：

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/** common **/
body {
    font-size: 80%;
    line-height: 1.5em;
}

a {
    text-decoration: none;
}

.clear {
    clear: both;
}

.section {
    width: 100%;
}

/** .columns **/
.columns {
    width: 100%;
}

.columns .main {
    float: left;
    width: 100%;
}

.columns .sub {
    float: left;
    width: 20em;
    margin-left: -100%;
}

.columns .main .inner {
    margin-left: 20em;
}

/** .nav **/
ul.nav,
ol.nav {
    letter-spacing: -0.31em; /* webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    word-spacing: -0.43em; /* IE < 8 && gecko: collapse white-space between units */
}

ul.nav li,
ol.nav li {
    display: inline-block;
    zoom: 1; *display: inline; /* IE < 8: fake inline-block */
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
}

ul.nav a,
ol.nav a {
    display: block;
    padding: .5em;
}

/** #navigator **/
#navigator p.nav {
    line-height: 2em;
    border-bottom: .1em solid #666;
}

#navigator ul.nav {
    border-bottom: solid .3em #55aed7;
    color: #bbb;
    background-color: #666;
    background-image: -khtml-gradient(linear, left top, left bottom, from(#777), to(#666));
    background-image: -webkit-gradient(linear, left top, left bottom, from(#777), to(#666));
    background-image: -webkit-linear-gradient(#777, #666);
    background-image: -moz-linear-gradient(#777, #666);
    background-image: -o-linear-gradient(#777, #666);
    background-image: linear-gradient(#777, #666);
}

#navigator ul.nav a {
    color: #bbb;
    padding: .5em 1em;
}

#navigator ul.nav li.active {
    color: #f0f0f0;
    background-color: #55aed7;
    background-image: -khtml-gradient(linear, left top, left bottom, from(#6ebce0), to(#55aed7));
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6ebce0), to(#55aed7));
    background-image: -webkit-linear-gradient(#6ebce0, #55aed7);
    background-image: -moz-linear-gradient(#6ebce0, #55aed7);
    background-image: -o-linear-gradient(#6ebce0, #55aed7);
    background-image: linear-gradient(#6ebce0, #55aed7);
}
#navigator ul.nav li.active a,
#navigator ul.nav a:hover {
    color: #f0f0f0;
}

/** #dashboard, #main **/
#tools {
    position: relative;
    border-right: .5em solid #ccc;
    box-shadow: 1px 1px 3px #333;
}

.toggled {
    width: 0px !important;
}

.toggled .tool {
    display: none;
}

#toggle-button {
    position: absolute;
    height: 3em;
    width: 1em;
    top: 50%;
    left: 100%;
    margin-top: -1.5em;
    background-color: #ccc;
    border-radius: 0 .5em .5em 0;
    box-shadow: 1px 1px 3px #333;
    text-indent: -9999em;
}

.toggled #tools {
    border-right-color: #999;
}

.toggled #toggle-button {
    background-color: #999;
    box-shadow: 1px 1px 3px #333;
}

#map {
    width: 100%;
    border: none;
    overflow: auto;
}

div#map {
    background-color: #ddd;
    background-image: -khtml-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
    background-image: -webkit-linear-gradient(#eee, #ccc);
    background-image: -moz-linear-gradient(#eee, #ccc);
    background-image: -o-linear-gradient(#eee, #ccc);
    background-image: linear-gradient(#eee, #ccc);
}

/** Demo Content **/
div#map {
    position: relative;
}

#map-demo {
    position: absolute;
    width: 20em;
    height: 3em;
    margin-top: -1.5em;
    margin-left: -10em;
    top: 50%;
    left: 50%;
    text-align: center;
    font-size: 3em;
    font-family: Arial, Helvetica, sans-serif;
}

类似于百度地图、谷歌地图的UI界面的简单实现

评论已关闭

最新文章

最近回复

分类

归档

其它