Home Explore Help
Register Sign In
huangwenjie
/
PC-prescription
forked from raolu/PC-prescription
Watch 1
Star 0
Fork 0
Files
Browse Source

使用frameset来处理续方咨询页面tab键和底部内容区域的展示

raolu 7 years ago
parent
b3c4d7ec5b
commit
fe54af56eb
4 changed files with 101 additions and 102 deletions
Split View Show Diff Stats
  1. 1 1
      js/buz/consulting-list.js
  2. 41 30
      js/buz/prescription-tabs.js
  3. 25 0
      prescription-main.html
  4. 34 71
      prescription-tabs.html

+ 1 - 1
js/buz/consulting-list.js
View File 

@ -77,7 +77,7 @@ function getListData(isRefresh){
 
                    field: '',
 
                    title: '操作',
 
                    formatter: function(val, row, index){
 
                        return '<a class="c-12b7f5" href="prescription-tabs.html?sessionId='+row.session_id+'">查看</a>';
 
                        return '<a class="c-12b7f5" href="prescription-main.html?sessionId='+row.session_id+'">查看</a>';
 
                    }
 
                }]
 
            });

+ 41 - 30
js/buz/prescription-tabs.js
View File 

@ -1,5 +1,5 @@
 
var request = getRequest(),
 
    tab = request.tab || 1,
 
    tab = request.tab || 0,
 
    sessionId = request.sessionId, //续方咨询的sessionId 格式: 居民code+咨询code+咨询类型（ 8 ）
 
    patiCode,
 
    patiCode,
 
@ -11,39 +11,50 @@ var docInfo = window.localStorage.getItem("docInfo");
 
docInfo = JSON.parse(docInfo);
 
//初始tab的链接
 
var links = {
 
    '1': 'prescription-consulting.html?sessionId='+sessionId,
 
    '2': '',
 
    '3': '',
 
    '4': '',
 
    '5': '',
 
    '6': '',
 
    '7':''
 
};
 
var links = [{
 
    url: 'prescription-consulting.html?sessionId='+sessionId,
 
    name: '咨询',
 
    class: ''
 
},{
 
    url: 'about:blank',
 
    name: '续方详情',
 
    class: ''
 
},{
 
    url: 'about:blank',
 
    name: '订单跟踪',
 
    class: ''
 
},{
 
    url: 'about:blank',
 
    name: '体征记录',
 
    class: ''
 
},{
 
    url: 'about:blank',
 
    name: '检查检验',
 
    class: ''
 
},{
 
    url: 'about:blank',
 
    name: '诊断/处方',
 
    class: ''
 
},{
 
    url: 'about:blank',
 
    name: '历史续方',
 
    class: ''
 
}]
 
$(function(){
 
    if(docInfo.isLeader == '1'){ //团队长显示咨询tab
 
        $(".nav-tabs").find("li:first-child").removeClass("hidden");
 
    if(!(docInfo.isLeader == '1')){
 
        links[0].class="hidden";
 
    }
 
    //根据页面传递的参数显示对应的tab
 
    $('.nav-tabs li:eq('+(tab-1)+') a').tab('show');
 
    links[tab].class="active";
 
    var html = template('tab_tmp', {list: links});
 
    $("#tabs").append(html);
 
    parent.document.getElementById('main').src = links[tab].url;
 
    $('.nav-tabs a').click(function (e) {
 
        e.preventDefault()
 
        tab = $(this).data('index');
 
        $(this).tab('show')
 
    })
 
    $("#tabs").on('click', 'a', function(){
 
        var $this = $(this),
 
            $li = $this.parent();
 
        $li.siblings().removeClass("active");
 
        $li.addClass("active");
 
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
 
        // e.target // newly activated tab
 
        // e.relatedTarget // previous active tab
 
        console.log("shown")
 
        var iframe = '<iframe class="J_iframe" name="iframe' + tab + '" width="100%" height="100%" src="' + links[tab] + '" frameborder="0" data-id="iframe' + tab + '" seamless></iframe>';
 
        var len = $("#tab-"+tab).find("iframe.J_iframe").length;
 
        if(len > 0){
 
            $("#tab-"+tab).find("iframe.J_iframe").remove();
 
        }
 
        $("#tab-"+tab+' .panel-body').append(iframe);
 
        
    })
 
})

+ 25 - 0
prescription-main.html
View File 

@ -0,0 +1,25 @@
 
<html>
 
<head>
 
    <meta charset="utf-8">
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <meta name="renderer" content="webkit">
 
    <meta http-equiv="Cache-Control" content="no-siteapp" />
 
    <title>续方咨询的框架主页</title>
 
    <meta name="keywords" content="">
 
    <meta name="description" content="">
 
    <link rel="shortcut icon" href="favicon.ico">
 
    <script src="js/jquery.min.js?v=2.1.4"></script>
 
    <script>
 
        var search = window.location.search;
 
        var url = 'prescription-tabs.html'+search;
 
        window.onload = function(){
 
            document.getElementById("tab").src = url;
 
        }
 
        
    </script>
 
</head>
 
    <frameset rows="53, *" frameborder="NO" border="0" framespacing="0">
 
        <frame src="about:blank" noresize="noresize" id="tab">
 
        <frame src="about:blank" name="view_frame" id="main" noresize="noresize">
 
    </frameset>
 
</html>

+ 34 - 71
prescription-tabs.html
View File 

@ -10,80 +10,43 @@
 
    <meta name="description" content="">
 
    <link rel="shortcut icon" href="favicon.ico">
 
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
 
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
 
    <link href="css/animate.min.css" rel="stylesheet">
 
    <link href="css/style.css" rel="stylesheet">
 
    <link href="css/plugins/toastr/toastr.min.css" rel="stylesheet">
 
    <style>
 
        .nav-tabs{
 
            margin-top: 10px;
 
            padding: 0 10px;
 
            border-bottom: 1px solid #d7dce6
 
        }
 
        .nav-tabs>li{
 
            margin-left: 5px;
 
        }
 
        .nav-tabs>li>a{
 
            border: 1px solid #d7dce6;
 
            background-color: #f5f5fa;
 
            color: #666;
 
        }
 
        .nav-tabs>li.active>a,
 
        .nav-tabs>li.active>a:focus,
 
        .nav-tabs>li.active>a:hover{
 
            color: #12b7f5;
 
            background-color: #fff;
 
        }
 
    </style>
 
</head>
 
<body class="gray-bg">
 
    <div class="wrapper plr0 animated fadeInRight" style="height: 100%">
 
        <div class="tabs-container">
 
            <ul class="nav nav-tabs">
 
                <li class="hidden">
 
                    <a data-toggle="tab" href="#tab-1" data-index="1" aria-expanded="false">咨询</a>
 
                </li>
 
                <li class="">
 
                    <a data-toggle="tab" href="#tab-2" data-index="2" aria-expanded="false">续方详情</a>
 
                </li>
 
                <li class="">
 
                    <a data-toggle="tab" href="#tab-3" data-index="3" aria-expanded="false">订单跟踪</a>
 
                </li>
 
                <li class="">
 
                    <a data-toggle="tab" href="#tab-4" data-index="4" aria-expanded="false">体征记录</a>
 
                </li>
 
                <li class="">
 
                    <a data-toggle="tab" href="#tab-5" data-index="5" aria-expanded="false">检查检验</a>
 
                </li>
 
                <li class="">
 
                    <a data-toggle="tab" href="#tab-6" data-index="6" aria-expanded="false">诊断/处方</a>
 
                </li>
 
                <li class="">
 
                    <a data-toggle="tab" href="#tab-7" data-index="7" aria-expanded="false">历史续方</a>
 
                </li>
 
            </ul>
 
            <div class="tab-content">
 
                <div id="tab-1" class="tab-pane">
 
                    <div class="panel-body">
 
                    </div>
 
                </div>
 
                <div id="tab-2" class="tab-pane">
 
                    <div class="panel-body">
 
                    </div>
 
                </div>
 
                <div id="tab-3" class="tab-pane">
 
                    <div class="panel-body">
 
                    </div>
 
                </div>
 
                <div id="tab-4" class="tab-pane">
 
                    <div class="panel-body">
 
                    </div>
 
                </div>
 
                <div id="tab-5" class="tab-pane">
 
                    <div class="panel-body">
 
                    </div>
 
                </div>
 
                <div id="tab-6" class="tab-pane">
 
                    <div class="panel-body">
 
                    </div>
 
                </div>
 
                <div id="tab-7" class="tab-pane">
 
                    <div class="panel-body">
 
                    </div>
 
                </div>
 
            </div>
 
        </div>
 
    </div>
 
<body class="white-bg">
 
        <ul class="nav nav-tabs" id="tabs">
 
        </ul>
 
        <script type="text/html" id="tab_tmp">
 
        {{each list as it}}
 
            <li class="{{it.class}}">
 
                <a href="{{it.url}}" target="view_frame">{{it.name}}</a>
 
            </li>
 
        {{/each}}
 
        </script>
 
    <script src="js/jquery.min.js?v=2.1.4"></script>
 
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
 
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
 
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
 
    <script src="js/plugins/layer/layer.min.js"></script>
 
    <script src="js/hplus.min.js?v=4.1.0"></script>
 
    <script type="text/javascript" src="js/contabs.min.js"></script>
 
    <script src="js/plugins/pace/pace.min.js"></script>
 
    <script src="js/plugins/toastr/toastr.min.js"></script>
 
    <script src="js/es6-promise.js"></script>
 
    <!-- <script src="js/bootstrap.min.js?v=3.3.6"></script> -->
 
    <script src="js/template.js"></script>
 
    <script src="js/util.js"></script>
 
    <script src="js/api-service.js"></script>
 
    <script src="js/buz/prescription-tabs.js"></script>