JQuery实现WIN8磁贴效果

 

效果如下(鼠标移上来看效果)：

实现过程：

 　　本文源自于博主一周工作结束后的个人练习，涉及到JavaScript 模板，JQuery的使用。 

---

　　

层次部分：

　　图中所谓的HTML部分就是层次结构图啦，之于为什么需要层次结构图，之前的每周总结博客中有过提述，血的教训。

　　直接贴出层次：　　

<div>
    <div>
        <div>
            <p></p>
        </div>
        <div>
            <p></p>
        </div>
    </div>
</div>

 

---

CSS部分：

  经过一番微调，CSS如下：

.tilecontainer{
    width:400px;
    margin:20px auto;
    position:relative;
}

.tilearea {
    width:100px;
    height:50px;
    position:relative;
    overflow:hidden;
    float:left;
    margin:10px 10px 0 0;
}

.tileinnerleft {
    width:100px;
    height:50px;
    position:absolute;
    left:0;
    background-color:#4EBEDF;
}

.tileinnerright {
    width:100px;
    height:50px;
    position:absolute;
    left:100px;
    background-color:#8AC007;
}

.tileinnertext{
    font-size:12px;
    color:white;
    padding:17px 0 0 15px ;
    cursor:default;
}

　将HTML加上类名与内容：

<div class="tilecontainer">
    <div class="tilearea">
        <div class="tileinnerleft">
            <p class="tileinnertext">JAVASCRIPT</p>
        </div>
        <div class="tileinnerright">
            <p class="tileinnertext">ASP.NET</p>
        </div>
    </div>
</div>

　下图即为效果：

JAVASCRIPT

ASP.NET

---

类图设计：

    最近在工作学习的过程中体会到面向过程的不足，于是什么东西在实现前都会想想类该怎么构造。
    本实现的类图如下：

---

代码部分：

   JavaScript 严格的说是没有类的，但是我们可以用它的“构造函数”来模拟类。JQuery 与HTML部分代码如下，博主使用的是tmpl实现HTML代码和JS代码的分离。
   HTML：

<script type="text/x-jquery-tmpl" id="containerTemplate">
    <div class="tilecontainer">
    </div>
</script>

<script type="text/x-jquery-tmpl" id="tileTemplate">
    <div class="tilearea">
        <div class="tileinnerleft">
            <p class="tileinnertext">${leftText}</p>
        </div>
        <div class="tileinnerright">
            <p class="tileinnertext">${rightText}</p>
        </div>
    </div>
</script>

　 JavaScript:

$((function (win) {
    if (win == null || win.TileContainer != null) {
        return;
    }

    win.TileContainer = function (tilesInfo) {
        this.HtmlElement = $('#containerTemplate').tmpl();
        var tileList = [];
        for (var i = 0; i < tilesInfo.length; i++) {
            tileList[i] = new Tile(tilesInfo[i]);
            this.HtmlElement.append(tileList[i].HtmlElement);
        }
    }
    TileContainer.prototype = {
        Show: function () {
            this.HtmlElement.show();
        },
        Hide: function () {
            this.HtmlElement.hide();
        }
    }
})(window));

$((function (win) {
    if (win == null || win.Tile != null) {
        return;
    }

    win.Tile = function (textInfo) {
        this.HtmlElement = $('#tileTemplate').tmpl(textInfo);
        this.HtmlElement.mouseover(this, function (eventObject) {
            hoverOnTile(eventObject);
        });
        this.HtmlElement.mouseout(this, function (eventObject) {
            leaveTile(eventObject);
        });
    };

    function hoverOnTile(eventObject) {
        var newLeft = -eventObject.data.HtmlElement.width() + "px";
        $(eventObject.data.HtmlElement).find('.tileinnerleft').stop(true);
        $(eventObject.data.HtmlElement).find('.tileinnerright').stop(true);
        $(eventObject.data.HtmlElement).find('.tileinnerleft').animate({ 'left': newLeft }, 150);
        $(eventObject.data.HtmlElement).find('.tileinnerright').animate({ 'left': '0px' }, 150);
    }

    function leaveTile(eventObject) {
        var newLeft = eventObject.data.HtmlElement.width() + "px";
        $(eventObject.data.HtmlElement).find('.tileinnerleft').stop(true);
        $(eventObject.data.HtmlElement).find('.tileinnerright').stop(true);
        $(eventObject.data.HtmlElement).find('.tileinnerleft').animate({ 'left': '0px' }, 150);
        $(eventObject.data.HtmlElement).find('.tileinnerright').animate({ 'left': newLeft}, 150);
    }
})(window));

 

　　

---

测试部分：

$(function () {
    var testDataArray = [];
    testDataArray.push({ leftText: "HELLO", rightText: "World" });
    testDataArray.push({ leftText: "JAVASCRIPT", rightText: "ASP.NET" });
    testDataArray.push({ leftText: "AGILE", rightText: "SCRUM" });
    testDataArray.push({ leftText: "CONTINUE", rightText: "IMPROVING" });
    testDataArray.push({ leftText: "FOCUS", rightText: "COMMITMENT" });
    testDataArray.push({ leftText: "RESPECT", rightText: "COURAGE" });

    var tileContainerInstance = new TileContainer(testDataArray);
    $('body').prepend(tileContainerInstance.HtmlElement);

    $('body').append($('#containerTemplate').tmpl());
});

 　　

 

希望大牛们能提提意见。