前端系列之实战(城市医院预约挂号平台3.UI组件)

最新推荐文章于 2024-05-10 15:53:31 发布

众拾达人

最新推荐文章于 2024-05-10 15:53:31 发布

阅读量3.5k

点赞数 4

分类专栏：前端文章标签： jquery 前端 ui

本文链接：https://blog.csdn.net/wtdask/article/details/79239405

版权

前端专栏收录该内容

58 篇文章 5 订阅

订阅专栏

大将生来胆气豪，腰横秋水雁翎刀，风吹橐鼓山河动，电闪旌旗日月高，
天上麒麟原有种，穴中蝼蚁岂能逃，太平待到归来日，朕与将军解战袍。

书接上文: 前端系列之实战(城市医院预约挂号平台2.基本样式编写)

jQuery插件模块开发UI组件

这里写图片描述

首页.UI组件-UiSearch

这里写图片描述

index.html

这里写图片描述

ui.css

/*搜索*/

.ui-search{
    background: url(../img/ui-search.jpg) center no-repeat;
    font-size: 14px;
    color: #fff;
    position: relative;
}

.ui-search-selected{
    width: 70px;
    height: 38px;
    line-height: 38px;
    position: absolute;
    left: 0;
    top: 0;
    text-indent: 14px;
}

.ui-search-select-list{
    display: none;
    position: absolute;
    width: 67px;
    line-height: 24px;
    background-color: #FFFFFF;
    box-shadow: 3px 3px 5px rgba(0,0,0,.2);
    left: 2px;
    top: 36px;
    z-index: 2;
}

.ui-search-select-list a{
    display: block;
    color: #a5a2a2;
    text-align: center;
}

.ui-search-select-list a:hover{
    background-color: #ebeef5;
}

.ui-search-input{
    width: 208px;
    height: 26px;
    position: absolute;
    top: 5px;
    left: 73px;
    line-height: 26px;
    font-size: 13px;
    color: #a5a2a2;
}

.ui-search-submit{
    display: block;
    position: absolute;
    right: 0;
    top: 1px;
    width: 40px;
    height: 36px;
}

ui.js

//ui-search 定义
$.fn.UiSearh = function(){
    var ui = $(this);

    $('.ui-search-selected',ui).on('click',function(){
           $('.ui-search-select-list').show();
           return false;
    });

    $('.ui-search-select-list a',ui).on('click',function(){
           $('.ui-search-selected').text( $(this).text() );
           $('.ui-search-select-list').hide();

           return false;
    })

    $('body').on('click',function(){
          $('.ui-search-select-list').hide();
    })
}

//页面的脚本逻辑
$(function(){
    $('.ui-search').UiSearh();
})

开发：选项卡组件

这里写图片描述

index.html

<!DOCTYPE html>
<html lang="zh-cn">

    <head>
        <meta charset="utf-8" />
        <title>城市医院预约平台</title>
        <link rel="stylesheet" type="text/css" href="css/layout.css" />
        <link rel="stylesheet" type="text/css" href="css/base.css" />
        <link rel="stylesheet" type="text/css" href="css/ui.css" />
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    </head>

    <body>
        <div id="top" class="top">

            <div class="wrap">
                <p class="call">010-114/116114电话预约</p>
                <p class="welcome">欢迎来到城市医院预约挂号统一平台&nbsp;请&nbsp;
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">帮助中心</a>
                </p>
            </div>
        </div>

        <div id="header" class="header">
            <div class="wrap clearfix">
                <a class="logo" href="#"><img src="./img/logo.png"></a>
                <div class="search ui-search">
                    <div class="ui-search-selected">医院</div>
                    <div class="ui-search-select-list">
                        <a href="#1">科室</a>
                        <a href="#1">疾病</a>
                        <a href="#1">医院</a>
                    </div>
                    <input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容" />
                    <a href="#" class="ui-search-submit">&nbsp;</a>
                </div>
            </div>
        </div>

        <div id="nav" class="nav">
            <div class="wrap">
                <div class="link menu">全部科室
                    <div class="menu-list">

                    </div>
                </div>

                <a href="#" class="link">按医院挂号</a>
                <a href="#" class="link">按科室挂号</a>
                <a href="#" class="link">按疾病挂号</a>
                <a href="#" class="link">最新公告</a>
                <a href="#" class="link right">社会知名医院</a>

            </div>
        </div>

        <div id="banner" class="banner">
            <div class="banner-slider"></div>
            <div class="banner-search">
                <div class="caption"><span class="text">快速预约</span></div>
                <div class="form">
                    <div class="line">
                        <select name="area">
                            <option>医院地区</option>
                        </select>
                    </div>
                    <div class="line">
                        <select name="level">
                            <option>医院等级</option>
                        </select>
                    </div>
                    <div class="line">
                        <select name="name">
                            <option>医院名称</option>
                        </select>
                    </div>
                    <div class="line">
                        <select name="department">
                            <option>医院科室</option>
                        </select>
                    </div>

                </div>
                <div class="submit">
                    <input type="button" class="button" value="快速查询" />
                </div>

            </div>
            <div class="banner-help">
                <div class="caption"><span class="text">帮助中心</span></div>
                <div class="list">
                    <a href="#" class="link">账号指南</a>
                    <a href="#" class="link">预约指南</a>
                    <a href="#" class="link">账号找回</a>
                    <a href="#" class="link">常见问题</a>
                </div>
            </div>
        </div>

        <div id="content" class="content">
            <div class="wrap clearfix">
                <div class="content-tab">

                    <div class="caption">
                        <a href="#8" class="item item_focus">医院</a>
                        <a href="#8" class="item">科室</a>
                    </div>

                    <div class="block">
                        <div class="item">
                            <div class="block-caption">

                                <a href="#banner" class="block-caption-item block-caption-item_focus">全部</a>
                                <a href="#banner" class="block-caption-item">东城区</a>
                                <a href="#banner" class="block-caption-item">西城区</a>
                                <a href="#banner" class="block-caption-item">朝阳区</a>
                                <a href="#banner" class="block-caption-item">丰台区</a>
                                <a href="#banner" class="block-caption-item">石景山区</a>
                                <a href="#banner" class="block-caption-item">海淀区</a>
                                <a href="#banner" class="block-caption-item">门头沟区</a>
                                <a href="#banner" class="block-caption-item">房山区</a>
                                <a href="#banner" class="block-caption-item">其他</a>

                            </div>

                            <div class="block-content">
                                <div class="block-wrap">
                                    <div class="block-list">
                                        <div class="item">
                                            <img src="img/hospital-1.jpg" alt="xx医院" />
                                            <div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>
                                            <div class="item-phone">电话：东院咨询台：010-69155564..</div>
                                            <div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>
                                        </div>
                                        <div class="item">
                                            <img src="img/hospital-1.jpg" alt="xx医院" />
                                            <div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>
                                            <div class="item-phone">电话：东院咨询台：010-69155564..</div>
                                            <div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>
                                        </div>
                                        <div class="item">
                                            <img src="img/hospital-1.jpg" alt="xx医院" />
                                            <div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>
                                            <div class="item-phone">电话：东院咨询台：010-69155564..</div>
                                            <div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>
                                        </div>
                                        <div class="item">
                                            <img src="img/hospital-1.jpg" alt="xx医院" />
                                            <div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>
                                            <div class="item-phone">电话：东院咨询台：010-69155564..</div>
                                            <div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>
                                        </div>
                                    </div>

                                    <div class="block-text-list clearfix">
                                        <a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a>
                                        <a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a>
                                        <a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a>
                                        <a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a>
                                        <a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a>
                                        <a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a>
                                    </div>
                                    <a class="block-more">更多医院</a>
                                </div>

                                <div class="block-wrap" style="display: none;">
                                    其他城区内容

                                </div>
                            </div>

                        </div>

                        <div class="item" style="display: none;">
                            科室内容
                        </div>
                    </div>
                </div>
                <div class="content-news">
                    <div class="caption">最新公告
                        <a href="#8" class="more">|更多</a>
                    </div>
                    <div class="list">

                        <a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
                        <a href="#9" class="link">防护策略升级通知</a>
                        <a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
                        <a href="#9" class="link">防护策略升级通知</a>
                        <a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
                        <a href="#9" class="link">防护策略升级通知</a>

                    </div>
                </div>
                <div class="content-close">
                    <div class="caption">停诊公告
                        <a href="#8" class="more">|更多</a>
                    </div>
                    <div class="list">

                        <a href="#9" class="link">首都医科大学附属北京安贞医院消...</a>
                        <a href="#9" class="link">首都医科大学附属北京安贞医院消...</a>
                        <a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
                        <a href="#9" class="link">北京安贞医院妇</a>
                        <a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
                        <a href="#9" class="link">北京安贞医院妇</a>

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

        <div id="footer" class="footer">
            Copyright&nbsp;&copy;&nbsp;2017慕课网版权所有
        </div>

        <script type="text/javascript" src="js/ui.js"></script>
    </body>

</html>

ui.js

//ui-search 定义
$.fn.UiSearh = function(){
    var ui = $(this);

    $('.ui-search-selected',ui).on('click',function(){
           $('.ui-search-select-list').show();
           return false;
    });

    $('.ui-search-select-list a',ui).on('click',function(){
           $('.ui-search-selected').text( $(this).text() );
           $('.ui-search-select-list').hide();

           return false;
    })

    $('body').on('click',function(){
          $('.ui-search-select-list').hide();
    })
}

//ui-tab 定规

/*
 * @param {string} header TAB组件的 所有选项卡 .item 
 * @param {string} content TAB组件的内容区域 所有 .item 
 * @param {string} focus_prefix 选项卡高亮样式前缀，可选 
 */
$.fn.UiTab = function(header,content,focus_prefix){
    var ui = $(this);
    var tabs = $(header,ui);
    var cons = $(content,ui);
    var focus_prefix  =focus_prefix || '';
    tabs.on('click',function(){
        var index = $(this).index();

        tabs.removeClass(focus_prefix+'item_focus').eq(index).addClass(focus_prefix+'item_focus');
        cons.hide().eq(index).show();

        return false;
    })
}

//页面的脚本逻辑
$(function(){
    $('.ui-search').UiSearh();
    $('.content-tab').UiTab('.caption > .item','.block > .item');
    $('.content-tab .block .item').UiTab('.block-caption > a','.block-content > .block-wrap','block-caption-');

});

首页.UI组件-UiBackTop

这里写图片描述

ui.js

//ui-backTop
$.fn.UiBackTop =function(){
     var ui = $(this);
     var el = $('<a class="ui-backTop" href="#0"></a>');
     ui.append( el );

     var windowHeight = $(window).height();
     $(window).on('scroll',function(){
        var top = $('body').scrollTop();
        console.log(top);
        if(top > windowHeight){
            el.show();
        }else{
            el.hide();
        }
     });

     el.on('click',function(){
        $(window).scrollTop(0);
     })
}

//页面的脚本逻辑
$(function(){
    $('.ui-search').UiSearh();

    $('.content-tab').UiTab('.caption > .item','.block > .item');
    $('.content-tab .block .item').UiTab('.block-caption > a','.block-content > .block-wrap','block-caption-');

    $('body').UiBackTop();
});

ui.css

/*回到顶部*/
.ui-backTop{
    display: none;
    position: fixed;
    right: 2px;
    bottom: 2px;
    z-index: 9;
    width: 40px;
    height: 40px;
    color: #fff;
    background:rgba(102,102,102,.9) url(../img/icon-go-up.png) center no-repeat;
}
.ui-backTop:hover{
    background:rgba(102,102,102,.9)
}

.ui-backTop:hover:after{
    content: '回到顶部';
    display: block;
    line-height: 20px;
    text-align: center;
}

首页.UI组件-UiSilder

这里写图片描述

index.html

<div class="banner-slider ui-slider">
                <div class="ui-slider-wrap">
                    <a href="#0" class="item"><img src="img/banner_1.jpg" alt="banner-1"></a>
                    <a href="#1" class="item"><img src="img/banner_2.jpg" alt="banner-1"></a>
                    <a href="#2" class="item"><img src="img/banner_3.jpg" alt="banner-1"></a>
                </div>

                <div class="ui-slider-arrow">
                    <a href="#l" class="item left">&nbsp;</a>
                    <a href="#r" class="item right">&nbsp;</a>
                </div>

                <div class="ui-slider-process">
                    <a href="#0" class="item item_focus">&nbsp;</a>
                    <a href="#1" class="item item">&nbsp;</a>
                    <a href="#2" class="item item">&nbsp;</a>
                </div>
</div>

ui.css

/*ui-slider 幻灯片组件*/
.ui-slider{
    width: 544px;
    height: 414px;
    position: relative;
    overflow: hidden;
}

.ui-slider-wrap{
    width: 99999px;
    height: 414px;
    position: absolute;
    left: 0;
    right: 0;
    transition: all.5s;
}

.ui-slider-wrap .item{
    display: block;
    float: left;
    width: 544px;
    height: 414px;
}

.ui-slider-arrow{
    width: 544px;
    height: 40px;
    position: absolute;
    margin-top: -20px;
    top: 50%;
}

.ui-slider-arrow .item{
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    background: url(../img/ui-slider-arrow.png) no-repeat;
}

.ui-slider-arrow .left{
    left: 0;
}

.ui-slider-arrow .right{
    right: 0;
    background-position: -40px 0; 
}

.ui-slider-process{
    width: 544px;
    height: 12px;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 20px;
}

.ui-slider-process .item{
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../img/ui-slider-process.png) no-repeat;
}
.ui-slider-process .item_focus,
.ui-slider-process .item:hover{
    background-position: -23px 0;
}

ui.js

//ui-slider
//1、左右箭头需要能控制翻页
//2、翻页的时候，进度点，要联动进行focus
//3、翻到第三页的时候，下一页需要回到第一页，翻到第一页的时候同理

//4、进度点在点击的时候，需要切换到对应的页面

//5、没有进度点点击、翻页的时候需要进行自动滚动

//6、滚动过程中，屏蔽其他操作（自动滚动，左右翻页，进度点点击）

//7、高级-无缝滚动
$.fn.UiSlider = function(){
    var ui = $(this);

    var wrap = $('.ui-slider-wrap');

    var btn_prev = $('.ui-slider-arrow .left',ui);
    var btn_next = $('.ui-slider-arrow .right',ui);

    var items = $('.ui-slider-wrap .item',ui);
    var tips = $('.ui-slider-process .item',ui);

    //预定义
    var current = 0;
    var size = items.size();
    var width = items.eq(0).width();
    var enableAuto = true;

    //设置自动滚动感应（如果鼠标在wrap中，不要自动滚动）
    ui
    .on('mouseover',function(){
        enableAuto = false;
    })
    .on('mouseout',function(){
        enableAuto = true;
    })
    //具体操作
    wrap
    .on('move_prev',function(){
        if(current<=0){
            current =size;
        }
        current = current - 1;
        wrap.triggerHandler('move_to',current);
    })
    .on('move_next',function(){
        if(current>=size-1){
            current =-1;
        }
        current = current + 1;
        wrap.triggerHandler('move_to',current);
    })
    .on('move_to',function(evt,index){
        wrap.css('left',index * width*-1);
        tips.removeClass('item_focus').eq(index).addClass('item_focus');
    })

    .on('auto_move',function(){
        setInterval(function(){
            enableAuto && wrap.triggerHandler('move_next');
        },2000);
    })
    .triggerHandler('auto_move');

    //事件
    btn_prev.on('click',function(){
        wrap.triggerHandler('move_prev');
    });

    btn_next.on('click',function(){
        wrap.triggerHandler('move_next');
    });

    tips.on('click',function(){
        var index = $(this).index();
        wrap.triggerHandler('move_to',index);
    })
}

//页面的脚本逻辑
$(function(){
    $('.ui-search').UiSearh();

    $('.content-tab').UiTab('.caption > .item','.block > .item');
    $('.content-tab .block .item').UiTab('.block-caption > a','.block-content > .block-wrap','block-caption-');

    $('body').UiBackTop();

    $('.ui-slider').UiSlider();
});

源码参考

链接: https://pan.baidu.com/s/1ht60dl6 密码: twmx

众拾达人

关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
2
评论
前端系列之实战(城市医院预约挂号平台3.UI组件)

大将生来胆气豪，腰横秋水雁翎刀，风吹橐鼓山河动，电闪旌旗日月高，天上麒麟原有种，穴中蝼蚁岂能逃，太平待到归来日，朕与将军解战袍。书接上文: 前端系列之实战(城市医院预约挂号平台2.基本样式编写)jQuery插件模块开发UI组件首页.UI组件-UiSearchindex.htmlui.css/*搜索*/.ui-sea
复制链接

扫一扫