慕课网实战项目《WebAPP书城整站开发》笔记四：唤出字体面板交互开发

推荐IMOOC实战课程：《WebApp书城整站开发》

html

        
        <div class="nav-pannel-bk font-container" id="font-container" style="display:none">div>
        <div class="nav-pannel font-container" id="font_container" style="display:none"> 
            <div class="child-mod">
                <span>字号span>
                <button id="large-font" class="spe-button">
                    大
                button>
                <button id="small-font" class="spe-button" style="margin-left:10px">
                    小
                button>
            div>
            <div class="child-mod" id="bk-container">
                <span>背景span>
                <ul class="bk-container">
                    <li class="default">li>
                    <li class="seaGreen">li>
                    <li class="lightYellow">li>
                    <li class="green">li>
                    <li class="lightCyan">li>
                ul>
            div>
        div>

javascript

        var Win = $(window);

        // Dom 结构
        var Dom = {
            font_container : $('#font-container'),
        };

        function EventHandler() {
            // todo 交互的事件绑定
            $('#action_mid').click(function () {
                // todo 屏幕touch事件
                if(Dom.font_container.css('display') === 'none'){
                    return ture;
                }else{
                    Dom.font_container.hide();
                    Dom.font_button.removeClass('current');
                }
            });

            $('#font-button').click(function(){
                // todo 唤起字体面板
                if(Dom.font_container.css('display') === 'none'){
                    Dom.font_container.show();
                    Dom.font_button.addClass('current');
                }else{
                    Dom.font_container.hide();
                    Dom.font_button.removeClass('current');
                }
            });

            $('#night-button').click(function(){
                // todo 触发背景切换事件
            });

            Win.scoll(function(){
                // todo 屏幕scroll事件
                Dom.font_container.hide();
                 Dom.font_button.removeClass('current');
            });
        }

效果