HTML的select控件美化

CSS：

.div-select

{

    border: solid 1px #999;

    height: 40px;

    line-height: 40px;

    cursor: default;

}

.div-select-text

{

    float: left;

    background-color: #fff;

    height: 100%;

    word-break: keep-all;

    overflow: hidden;

    cursor: default;

}

    .div-select-text > div

    {

        padding: 3px;

        line-height: 34px;

    }

.div-select-arrow

{

    background-color: #fff;

    float: right;

    width: 40px;

    height: 100%;

    color: #999;

    cursor: default;

}

    .div-select-arrow > div

    {

        border: solid 1px #999;

        margin: 2px;

        height: 34px;

        background-color: #f2f2f2;

        text-align: center;

        line-height: 34px;

        font-size: 22px;

    }

.div-select-list

{

    position: absolute;

    float: left;

    top: 100px;

    left: 100px;

    border: solid 1px #999;

    max-height: 300px;

    overflow: auto;

    background-color: #9f9;

    display: none;

    z-index:;

}

    .div-select-list .div-select-item:nth-child(2n+1)

    {

        background-color: #fff;

    }

.div-select-item

{

    height: 50px;

    line-height: 50px;

    padding-left: 3px;

    padding-right: 3px;

    background-color: #f2f2f2;

    word-break: keep-all;

    overflow: hidden;

    cursor: default;

}

.div-select-item-hover

{

    background-color: #3399ff!important;

}

.div-select-selected

{

    background-color: #3399ff !important;

}

JS：

//2015年2月8日

//select美化

var divSelectListIndex = 0;

$(function () {

    initDivSelect();

});

//初始化select美化插件

function initDivSelect() {

    $(".div-select-target").each(function () {

        divSelectListIndex++;

        var select = $(this);

        if (select.css("display") == "none") {

            return;

        }

        else {

            select.css("display", "none")

        }

        if (select.next("div").find(".div-select-list").length == 0) {

            select.after('<div><div class="div-select"><div class="div-select-text"><div></div></div><div class="div-select-arrow"><div>∨</div></div></div></div>');

            $("body").append('<div class="div-select-list div-select-list-' + divSelectListIndex + '"></div>');

        }

        var div = select.next("div");

        var divText = div.find(".div-select-text");

        var divSelect = div.find(".div-select");

        var divArrow = div.find(".div-select-arrow");

        var list = $(".div-select-list-" + divSelectListIndex);

        function updateText(item) {

            divText.find("div").html(item.html());

        }

        select.find("option").each(function () {

            var option = $(this);

            var text = option.html();

            var value = option.attr("value");

            list.append('<div class="div-select-item" value="' + value + '">' + text + '</div>');

            list.find(".div-select-item:last").click(function () {

                var item = $(this);

                var value = item.attr("value");

                select.val(value);

                select.change();

                list.find(".div-select-selected").removeClass("div-select-selected");

                item.addClass("div-select-selected");

                updateText(item);

                list.hide();

            });

            list.find(".div-select-item:last").mouseenter(function () {

                var item = $(this);

                var selectedMark = list.find(".div-select-selected");

                selectedMark.removeClass("div-select-selected");

                selectedMark.addClass("div-select-selected-mark");

                list.find(".div-select-item-hover").removeClass("div-select-item-hover");

                item.addClass("div-select-item-hover");

                updateText(item);

            });

        });

        list.mouseleave(function () {

            var selectedMark = list.find(".div-select-selected-mark");

            if (list.find(".div-select-selected").length == 0) {

                selectedMark.addClass("div-select-selected");

                updateText(selectedMark);

            }

            selectedMark.removeClass("div-select-selected-mark");

            list.find(".div-select-item-hover").removeClass("div-select-item-hover");

        });

        if (select.attr("width")) {

            divSelect.width(select.attr("width") - 2);

            divText.width(divSelect.width() - divArrow.width());

            if (select.attr("width") > list.width()) {

                list.width(divSelect.width());

            }

        }

        div.keydown(function (e) {

            list.find(".div-select-selected-mark").removeClass("div-select-selected-mark");

            list.find(".div-select-item-hover").addClass("div-select-selected");

            list.find(".div-select-item-hover").removeClass("div-select-item-hover");

            if (e.keyCode == 40) {

                var currentSelected = list.find(".div-select-selected");

                var nextSelected = currentSelected.next(".div-select-item");

                if (nextSelected.length == 0) {

                    nextSelected = list.find(".div-select-item:first");

                    nextSelected.addClass("div-select-selected");

                    currentSelected.removeClass("div-select-selected");

                    list.scrollTop(0);

                } else {

                    nextSelected.addClass("div-select-selected");

                    currentSelected.removeClass("div-select-selected");

                    var i = 0;

                    while (nextSelected.position().top < 0

                        || nextSelected.position().top > list.height() - nextSelected.height()) {

                        list.scrollTop(list.scrollTop() + nextSelected.height());

                        if (i++ > 100) break;

                    }

                }

                updateText(nextSelected);

                return false;

            }

            if (e.keyCode == 38) {

                var currentSelected = list.find(".div-select-selected");

                var nextSelected = currentSelected.prev(".div-select-item");

                if (nextSelected.length == 0) {

                    nextSelected = list.find(".div-select-item:last");

                    nextSelected.addClass("div-select-selected");

                    currentSelected.removeClass("div-select-selected");

                    list.scrollTop(list.find(".div-select-item").length * nextSelected.height());

                }

                else {

                    nextSelected.addClass("div-select-selected");

                    currentSelected.removeClass("div-select-selected");

                    var i = 0;

                    while (nextSelected.position().top < 0

                        || nextSelected.position().top > list.height() - nextSelected.height()) {

                        list.scrollTop(list.scrollTop() - nextSelected.height());

                        if (i++ > 100) break;

                    }

                }

                updateText(nextSelected);

                return false;

            }

            if (e.keyCode == 13) {

                var selectedItem = list.find(".div-select-selected");

                var value = selectedItem.attr("value");

                select.val(value);

                list.hide();

                select.change();

            }

        });

        divSelect.click(function () {

            $("a").bind("click", function () {

                $("a").unbind("click");

                list.hide();

            });

            if (list.css("display") == "none") {

                list.show();

            }

            else {

                list.hide();

            }

            list.css("top", divSelect.offset().top + divSelect.height() + 1);

            list.css("left", divSelect.offset().left);

            if ($(window).scrollTop() + $(window).height() < list.offset().top + list.height() + 2) {

                list.css("top", $(window).scrollTop() + $(window).height() - list.height() - 2);

            }

            if (list.width() < divSelect.width()) {

                list.width(divSelect.width());

            }

            var currentSelected = list.find(".div-select-selected");

            if (currentSelected.position().top > list.height() - currentSelected.height()) {

                list.scrollTop(currentSelected.position().top - currentSelected.height() * 2);

            }

            return false;

        });

        $("html,body").bind("click", function () {

            list.hide();

        });

        list.click(function () {

            return false;

        });

        function initSelect() {

            list.find(".div-select-selected").removeClass("div-select-selected");

            var matchItem = list.find(".div-select-item[value='" + select.val() + "']");

            if (matchItem.length > 0) {

                matchItem.addClass("div-select-selected");

                updateText(matchItem);

            }

        }

        initSelect();

        select.change(function () {

            initSelect();

        });

    }); // $(".div-select-target").each

}

如何使用：

第1步、引用CSS和JS：

<link type="text/css" href="~/Scripts/DivSelect/divSelect.css" rel="stylesheet" />

<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="~/Scripts/DivSelect/divSelect.js"></script>

第2步、给select控件加上class="div-select-target" width="200"，其中class="div-select-target"是必须的，width="200"是可选的。完整HTML代码如下：

<link type="text/css" href="~/Scripts/DivSelect/divSelect.css" rel="stylesheet" />

<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="~/Scripts/DivSelect/divSelect.js"></script>

<div style="border: solid 1px #f99; margin: 50px; padding: 50px;">

    <select name="sel" class="div-select-target" width="200" >

        <option value="1">中国</option>

        <option value="2">美国</option>

        <option value="3">法国</option>

        <option value="4">英国</option>

        <option value="5">俄罗斯</option>

        <option value="6">德国</option>

        <option value="7">韩国</option>

        <option value="8">日本</option>

        <option value="9">印度</option>

        <option value="10">巴西</option>

        <option value="11">意大利</option>

        <option value="12">这个国家的名称很长很长很长很长很长很长很长很长</option>

        <option value="13">瑞士</option>

        <option value="14">越南</option>

        <option value="15">缅甸</option>

        <option value="16">泰国</option>

        <option value="17">加拿大</option>

        <option value="18" selected="selected">南非</option>

        <option value="19">澳大利亚</option>

        <option value="20">新西兰</option>

        <option value="21">挪威</option>

        <option value="22">巴勒斯坦</option>

        <option value="23">以色列</option>

        <option value="24">新加坡</option>

        <option value="25">马来西亚</option>

        <option value="26">波兰</option>

        <option value="27">国家27</option>

        <option value="28">国家28</option>

        <option value="29">国家29</option>

        <option value="30">国家30</option>

        <option value="31">国家31</option>

        <option value="32">国家32</option>

        <option value="33">国家33</option>

        <option value="34">国家34</option>

        <option value="35">国家35</option>

        <option value="36">国家36</option>

        <option value="37">国家37</option>

        <option value="38">国家38</option>

    </select>

</div>

<div style="border: solid 1px #f99; margin: 50px; padding: 50px; margin-top: 700px; margin-bottom: 700px;">

    <select name="sel" class="div-select-target" width="200" >

        <option value="1">中国</option>

        <option value="2">美国</option>

        <option value="3">法国</option>

        <option value="4">英国</option>

        <option value="5">俄罗斯</option>

        <option value="6" selected="selected">德国</option>

        <option value="7">韩国</option>

        <option value="8">日本</option>

    </select>

</div>

效果图：

滚动条美化版：

CSS：

.div-select

{

    border: solid 1px #999;

    height: 40px;

    line-height: 40px;

    cursor: default;

}

.div-select-text

{

    float: left;

    background-color: #fff;

    height: 100%;

    word-break: keep-all;

    overflow: hidden;

    cursor: default;

    font-size: 16px;

    font-family: 微软雅黑,雅黑;

}

    .div-select-text > div

    {

        padding: 3px;

        line-height: 34px;

    }

.div-select-arrow

{

    background-color: #fff;

    float: right;

    width: 40px;

    height: 100%;

    color: #999;

    cursor: default;

}

    .div-select-arrow > div

    {

        border: solid 1px #999;

        margin: 2px;

        height: 34px;

        background-color: #f2f2f2;

        text-align: center;

        line-height: 34px;

        font-size: 22px;

    }

.div-select-list

{

    position: absolute;

    float: left;

    top: 100px;

    left: 100px;

    border: solid 1px #999;

    max-height: 300px;

    overflow: hidden;

    background-color: #9f9;

    display: none;

    z-index:;

    font-size: 16px;

    font-family: 微软雅黑,雅黑;

}

    .div-select-list .div-select-item:nth-child(2n+1)

    {

        background-color: #fff;

    }

.div-select-item

{

    height: 50px;

    line-height: 50px;

    padding-left: 3px;

    padding-right: 3px;

    background-color: #f2f2f2;

    word-break: keep-all;

    overflow: hidden;

    cursor: default;

}

.div-select-item-hover

{

    background-color: #3399ff!important;

}

.div-select-selected

{

    background-color: #3399ff !important;

}

.div-select-list-scrollbar

{

    position: absolute;

    float: left;

    border: solid 1px #999;

    border-left:;

    background-color: #e8e8ec;

    width: 40px;

    height: 300px;

    display: none;

    cursor: default;

    z-index:;

}

.div-select-scrollbar-up

{

    border-bottom: solid 1px #fff;

    height: 39px;

    font-size: 22px;

    line-height: 39px;

    color: #999;

    background-color: #cdcdcd;

    text-align: center;

}

.div-select-scrollbar-pos

{

    height: 220px;

}

    .div-select-scrollbar-pos > div:last-child

    {

        width: 40px;

        height: 20px;

        background-color: #cdcdcd;

    }

.div-select-scrollbar-down

{

    border-top: solid 1px #fff;

    height: 39px;

    font-size: 22px;

    line-height: 39px;

    color: #999;

    background-color: #cdcdcd;

    text-align: center;

}

JS：

//2015年2月8日

//select美化

var divSelectListIndex = 0;

$(function () {

    initDivSelect();

});

//初始化select美化插件

function initDivSelect() {

    $(".div-select-target").each(function () {

        divSelectListIndex++;

        var select = $(this);

        if (select.css("display") == "none") {

            return;

        }

        else {

            select.css("display", "none")

        }

        if (select.next("div").find(".div-select-list").length == 0) {

            select.after('<div><div class="div-select"><div class="div-select-text"><div></div></div><div class="div-select-arrow"><div>∨</div></div></div></div>');

            $("body").append('<div class="div-select-list div-select-list-' + divSelectListIndex + '"></div>');

        }

        var div = select.next("div");

        var divText = div.find(".div-select-text");

        var divSelect = div.find(".div-select");

        var divArrow = div.find(".div-select-arrow");

        var list = $(".div-select-list-" + divSelectListIndex);

        var scrollbar;

        var scrollbarPosTop;

        var scrollbarPos;

        var scrollbarScrollHeight;

        var scrollbarUp;

        var scrollbarDown;

        var itemHeight;

        var itemCount;

        var itemsHeight;

        var scrollFlag = false;

        function updateText(item) {

            divText.find("div").html(item.html());

        }

        select.find("option").each(function () {

            var option = $(this);

            var text = option.html();

            var value = option.attr("value");

            list.append('<div class="div-select-item" value="' + value + '">' + text + '</div>');

            list.find(".div-select-item:last").click(function () {

                var item = $(this);

                var value = item.attr("value");

                select.val(value);

                select.change();

                list.find(".div-select-selected").removeClass("div-select-selected");

                item.addClass("div-select-selected");

                updateText(item);

                list.hide();

                if (scrollbar) scrollbar.hide();

            });

            list.find(".div-select-item:last").mouseenter(function () {

                var item = $(this);

                var selectedMark = list.find(".div-select-selected");

                selectedMark.removeClass("div-select-selected");

                selectedMark.addClass("div-select-selected-mark");

                list.find(".div-select-item-hover").removeClass("div-select-item-hover");

                item.addClass("div-select-item-hover");

                updateText(item);

            });

        });

        list.mouseleave(function () {

            var selectedMark = list.find(".div-select-selected-mark");

            if (list.find(".div-select-selected").length == 0) {

                selectedMark.addClass("div-select-selected");

                updateText(selectedMark);

            }

            selectedMark.removeClass("div-select-selected-mark");

            list.find(".div-select-item-hover").removeClass("div-select-item-hover");

        });

        if (select.attr("width")) {

            divSelect.width(select.attr("width") - 2);

            divText.width(divSelect.width() - divArrow.width());

        }

        else {

            divText.width(list.width());

        }

        div.keydown(function (e) {

            list.find(".div-select-selected-mark").removeClass("div-select-selected-mark");

            list.find(".div-select-item-hover").addClass("div-select-selected");

            list.find(".div-select-item-hover").removeClass("div-select-item-hover");

            if (e.keyCode == 40) {

                var currentSelected = list.find(".div-select-selected");

                var nextSelected = currentSelected.next(".div-select-item");

                if (nextSelected.length == 0) {

                    nextSelected = list.find(".div-select-item:first");

                    nextSelected.addClass("div-select-selected");

                    currentSelected.removeClass("div-select-selected");

                    list.scrollTop(0);

                } else {

                    nextSelected.addClass("div-select-selected");

                    currentSelected.removeClass("div-select-selected");

                    var i = 0;

                    while (nextSelected.position().top < 0

                        || nextSelected.position().top > list.height() - nextSelected.height()) {

                        list.scrollTop(list.scrollTop() + nextSelected.height());

                        if (i++ > 100) break;

                    }

                }

                updateText(nextSelected);

                updateScrollbarPos();

                return false;

            }

            if (e.keyCode == 38) {

                var currentSelected = list.find(".div-select-selected");

                var nextSelected = currentSelected.prev(".div-select-item");

                if (nextSelected.length == 0) {

                    nextSelected = list.find(".div-select-item:last");

                    nextSelected.addClass("div-select-selected");

                    currentSelected.removeClass("div-select-selected");

                    list.scrollTop(list.find(".div-select-item").length * nextSelected.height());

                }

                else {

                    nextSelected.addClass("div-select-selected");

                    currentSelected.removeClass("div-select-selected");

                    var i = 0;

                    while (nextSelected.position().top < 0

                        || nextSelected.position().top > list.height() - nextSelected.height()) {

                        list.scrollTop(list.scrollTop() - nextSelected.height());

                        if (i++ > 100) break;

                    }

                }

                updateText(nextSelected);

                updateScrollbarPos();

                return false;

            }

            if (e.keyCode == 13) {

                var selectedItem = list.find(".div-select-selected");

                var value = selectedItem.attr("value");

                select.val(value);

                list.hide();

                if (scrollbar) scrollbar.hide();

                select.change();

            }

        });

        itemHeight = list.find(".div-select-item:first").height();

        itemCount = list.find(".div-select-item").length;

        itemsHeight = itemHeight * itemCount;

        if (itemsHeight > list.height()) {

            $("body").append('<div class="div-select-list-scrollbar div-select-list-scrollbar-' + divSelectListIndex + '"><div class="div-select-scrollbar-up">∧</div><div class="div-select-scrollbar-pos"><div></div><div></div></div><div class="div-select-scrollbar-down">∨</div></div>');

        }

        scrollbar = $(".div-select-list-scrollbar-" + divSelectListIndex);

        scrollbarPosTop = scrollbar.find(".div-select-scrollbar-pos").find("div:first");

        scrollbarPos = scrollbar.find(".div-select-scrollbar-pos").find("div:last");

        scrollbarScrollHeight = scrollbarPos.parent().height() - scrollbarPos.height();

        scrollbarUp = scrollbar.find(".div-select-scrollbar-up");

        scrollbarDown = scrollbar.find(".div-select-scrollbar-down");

        scrollbar.click(function () {

            return false;

        });

        scrollbarUp.click(function () {

            list.scrollTop(list.scrollTop() - list.height());

            updateScrollbarPos();

        });

        scrollbarDown.click(function () {

            list.scrollTop(list.scrollTop() + list.height());

            updateScrollbarPos();

        });

        scrollbar.mousedown(function () {

            scrollFlag = true;

        });

        scrollbar.mouseup(function () {

            scrollFlag = false;

        });

        scrollbar.mousemove(function (e) {

            if (scrollFlag) {

                var pos = e.pageY - scrollbar.offset().top - 50;

                if (pos <= scrollbarScrollHeight) {

                    scrollbarPosTop.height(pos);

                    list.scrollTop(scrollbarPosTop.height() / scrollbarScrollHeight * (itemsHeight - list.height()));

                }

            }

        });

        function updateScrollbarPos() {

            scrollbarPosTop.height(scrollbarScrollHeight * list.scrollTop() * 1.0 / (itemsHeight - list.height()));

            if (list.scrollTop() + list.height() == itemsHeight) {

                scrollbarPosTop.height(scrollbarScrollHeight);

            }

        }

        divSelect.click(function () {

            $("a").bind("click", function () {

                $("a").unbind("click");

                list.hide();

                scrollbar.hide();

            });

            if (list.css("display") == "none") {

                list.show();

                scrollbar.show();

            }

            else {

                list.hide();

                scrollbar.hide();

            }

            list.css("top", divSelect.offset().top + divSelect.height() + 1);

            list.css("left", divSelect.offset().left);

            var listOffsetTop = list.offset().top;

            if ($(window).scrollTop() + $(window).height() < list.offset().top + list.height() + 2) {

                list.css("top", $(window).scrollTop() + $(window).height() - list.height() - 2);

            }

            if (list.width() < divSelect.width()) {

                if (!(itemsHeight > list.height())) {

                    list.width(divSelect.width());

                }

                else {

                    list.width(divSelect.width() - scrollbar.width());

                }

            }

            scrollbar.find(".div-select-scrollbar-pos").find("div:first").height(0);

            scrollbar.css("left", divSelect.offset().left + list.width() + 1);

            scrollbar.css("top", divSelect.offset().top + divSelect.height() + 1);

            if ($(window).scrollTop() + $(window).height() < listOffsetTop + list.height() + 2) {

                scrollbar.css("top", $(window).scrollTop() + $(window).height() - list.height() - 2);

            }

            var currentSelected = list.find(".div-select-selected");

            if (currentSelected.position().top > list.height() - currentSelected.height()) {

                list.scrollTop(currentSelected.position().top - currentSelected.height() * 2);

            }

            updateScrollbarPos();

            return false;

        });

        $("html,body").bind("click", function () {

            list.hide();

            scrollbar.hide();

        });

        list.click(function () {

            return false;

        });

        function initSelect() {

            list.find(".div-select-selected").removeClass("div-select-selected");

            var matchItem = list.find(".div-select-item[value='" + select.val() + "']");

            if (matchItem.length > 0) {

                matchItem.addClass("div-select-selected");

                updateText(matchItem);

            }

        }

        initSelect();

        select.change(function () {

            initSelect();

        });

    }); // $(".div-select-target").each

}

效果图：

HTML的select控件美化的更多相关文章

  1. jquery 双向select控件bootstrap Dual listbox

    http://www.cnblogs.com/hangwei/p/5040866.html       -->jquery 双向select控件bootstrap Dual listboxhtt ...

  2. SELECT控件操作的JS代码示例

    SELECT控件操作的JS代码示例 1 检测是否有选中 if(objSelect.selectedIndex > -1) { //说明选中 } else { //说明没有选中 } 2.动态创建s ...

  3. IE6下div层被select控件遮住的问题解决方法

    Select在IE6下是处于最顶层的,因此想要遮住它,设置zIndex属性是不行的,就需要一个优先级更高的元素,就是iframe,当把iframe嵌套在弹出div层中后,把iframe设置为不可见,但 ...

  4. .net获取select控件中的文本内容

    .net获取select控件中的文本内容 2009-11-28 21:19小V古 | 分类:C#/.NET | 浏览1374次 <select id="SecType" st ...

  5. Jquery 操作Html 控件 CheckBox、Radio、Select 控件 【转】http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html

    Jquery 操作Html 控件 CheckBox.Radio.Select 控件   在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio ...

  6. js+CSS实现模拟华丽的select控件下拉菜单效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Asp.net绑定带层次下拉框（select控件）

    1.效果图 2.数据库中表数据结构 3.前台页面 <select id="pid" runat="server" style="width:16 ...

  8. Selenium webdriver 之select 控件封装，解决onchange问题

    使用webdriver的时候,select 控件经常会绑定onchange 事件,在selenium2.09 之前click 方法对onchange 事件有bug,2.09 以后修复了,但是根据经验也 ...

  9. Jquery 操作Html 控件 CheckBox、Radio、Select 控件

    在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio.select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一 ...

随机推荐

  1. dojo/aspect源码解析

    dojo/aspect模块是dojo框架中对于AOP的实现.关于AOP的详细解释请读者另行查看其它资料,这里简单复习一下AOP中的基本概念: 切面(Aspect):其实就是共有功能的实现.如日志切面. ...

  2. 4、CC2541芯片中级教程-OSAL操作系统（简单AT指令实现+IIC软件和硬件实现驱动MPU6050）

    本文根据一周CC2541笔记汇总得来—— 适合概览和知识快速索引—— 全部链接: 中级教程-OSAL操作系统\OSAL操作系统-实验01 OSAL初探 [插入]SourceInsight-工程建立方法 ...

  3. 汇编 int10h（转）

    原文:http://www.cnblogs.com/magic-cube/archive/2011/10/19/2217676.html INT 10H 是由 BIOS 对屏幕及显示器所提供的服务程序 ...

  4. cmd 下通过NTML代理访问Maven 库

    公司用web代理,NTLM验证的,这样在普通CMD下无法使用mvn命令访问网上的maven库,使用CNTLM工具解决. 下载CNTLM工具,安装,修改安装路径下的cntlm.ini,改成实际的ntlm ...

  5. java.logging的重定向？

    接着昨天的工作. 上面说要重定向java.util.logging.Logger的输出, 发现也不是不可能. package jmx; import java.util.logging.FileHan ...

  6. 掌握js模板引擎

    最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一 ...

  7. Oracle函数脚本记录

    --内置函数 --聚合函数 返回单个值 '; --count()记录条数 select sum(degree) from score t; --sum(degree)求成绩总和 select avg( ...

  8. NodeJS系列~第二个小例子，解决中文乱码的问题

    返回目录 为了使页面支持的字符更多,所以编码使用UTF-8,注意,你的原js文件的编码也要是utf-8的,可以通过记事本进行编码的修改

  9. EF架构~二级域名中共享Session

    回到目录 对于一个有点规模的网站,都会有各个子网站,说是子网站,其实也都是独立的站点,一般通过二次域名来分开,如www.zzl.com,它可以有很多子网站,如image.zzl.com,file.zz ...

  10. offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别

    这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...