前端技术细节

CSS垂直居中：

 

第一步，先写好html：

<div class="container">
    <!--容器内的元素将会居中-->
    <img src="fireworks.jpg" alt="fireworks">
</div>

 

然后写几句简单的css：

 

.container{
    display: flex;
    justify-content: center;
    align-items: center;
}

 

 步骤分解：

1.设置container的display的类型为flex，激活为flexbox模式。

2.justify-content定义水平方向的元素位置

3.align-items定义垂直方向的元素位置

搞定。。。

 

构建正方形：

经常会用到页面里有多个正方形，如果将高度定死会缺乏适应性，本来用vw这样的写法代替就能解决，但安卓4.3以下不支持，好吧，那就另想办法咯！

function getWidth(class) {
　　var wid = $("." + class).width();
　　var interval = $("." + class).width() / 100; 
　　$("." + class).css({ 
　　　　"height": wid + "px", 
　　　　"margin": (interval * 7) + 'px' + " 1%" 
　　}); 
}

可能会牺牲一丢丢性能，不过这是我能想到的最好的方法，也能实现最理想的效果。

不过，需要注意的事，调用这个函数的时候，如果该页面里正方形内的数据是循环出来的，位置会有所讲究，要放在模板渲染语句的后面，如果放在前面，可能会失效。

 

拖拽，使用一个命叫Sortable的js组件：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>混蛋小鹰</title>
        <script type="text/javascript" src="./js/jquery.min.js"></script>
        <script type="text/javascript" src="./js/Sortable.min.js"></script>

        <style>
            ul {
                list-style-type: none;
                border: 1px solid #4961BB;
                display: block;
                padding: 20px;
                width: 20%;
                margin: 3em auto;
            }
            .list {
                border: 1px solid #000;
                padding: 5px 20px;
                color: #fff;
                margin: 10px 0;
            }
            .around_1 .list {
                background: #67cbff;
            }
            .around_2 .list {
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #67cbff), color-stop(1, #4269e1));
                ;
            }
        </style>
    </head>

    <body>
        <section id="multi">
        <ul class="around_1 add" id="around_1">
            <li class="list">1</li>
            <li class="list">2</li>
            <li class="list">3</li>
            <li class="list">4</li>
            <li class="list">5</li>
            <li class="list">6</li>
        </ul>
        <ul class="around_2 add" id="around_2">
            <li class="list">1</li>
            <li class="list">2</li>
            <li class="list">3</li>
            <li class="list">4</li>
            <li class="list">5</li>
            <li class="list">6</li>
        </ul>
        </section>
        <script type="text/javascript">
            $(function() {
                var console = window.console;
                if (!console.log) {
                    console.log = function() {
                        alert([].join.apply(arguments, ' '));
                    };
                }
                window.x = new Sortable(around_1, {
                    group: "words",
                    store: {
                        get: function(sortable) {
                            var order = localStorage.getItem(sortable.options.group);
                            return order ? order.split('|') : [];
                        },
                        set: function(sortable) {
                            var order = sortable.toArray();
                            localStorage.setItem(sortable.options.group, order.join('|'));
                        }
                    },
                    onAdd: function(evt) {
                        console.log('onAdd.around_1:', evt.item);
                    },
                    onUpdate: function(evt) {
                        console.log('onUpdate.around_1:', evt.item);
                    },
                    onRemove: function(evt) {
                        console.log('onRemove.around_1:', evt.item);
                    },
                    onStart: function(evt) {
                        console.log('onStart.around_1:', evt.item);
                    },
                    onEnd: function(evt) {
                        console.log('onEnd.around_1:', evt.item);
                    }
                });
                new Sortable(around_2, {
                    group: "words",
                    onAdd: function(evt) {
                        console.log('onAdd.around_2:', evt.item);
                    },
                    onUpdate: function(evt) {
                        console.log('onUpdate.around_2:', evt.item);
                    },
                    onRemove: function(evt) {
                        console.log('onRemove.around_2:', evt.item);
                    },
                    onStart: function(evt) {
                        console.log('onStart.around_1:', evt.item);
                    },
                    onEnd: function(evt) {
                        console.log('onEnd.around_1:', evt.item);
                    }
                });
//                new Sortable(multi, {
//                draggable: '.add',
//                handle: '.add'
//            });
//
//
//            [].forEach.call(multi.getElementsByClassName('add'), function (el){
//                new Sortable(el, { group: 'photo' });
//            });
//            });
        </script>
    </body>

</html>
View Code

 

输入框通常都有默认值，当输入框获取信息时，那么默认值就会消失；而一旦输入框失去信息，并且没有输入新的值，那么输入框就会恢复成默认值，但如果往输入框里输入了新值，那么输入框的值就是新输入的值：

$("#id").focus(function(){$(this).val('')}).blur(function(){
       var $this = $(this);
      // '请搜索...'为搜索框默认值
      ($this.val() === '')? $this.val('请搜索...') : null;
 });

 

posted @ 2015-11-10 09:17  夜之圣子  阅读(169)  评论(0)    收藏  举报