合规国际互联网加速 OSASE为企业客户提供高速稳定SD-WAN国际加速解决方案。 广告
### 发布需求页 #### 1.仪器检测 ![](https://box.kancloud.cn/2016-09-01_57c7878829212.png) #### 2.仪器培训 ![](https://box.kancloud.cn/2016-09-01_57c7878841d94.png) #### 3.相关代码 ``` <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <link rel="stylesheet" type="text/css" href="../../css/aui.css" /> <style type="text/css"> body { height: auto; } .slider { margin-bottom: 0; } .slider img { width: 100%; height: 120px; display: inherit; } .aui-grid-sixteen:after { border: none; } .aui-grid-sixteen li:after { border: none; } .aui-grid-sixteen li .aui-iconfont { color: #ffffff; width: 38px; height: 38px; line-height: 38px; border-radius: 50%; font-size: 20px; } textarea.content { width: 100%; height: 80px; font-size: 14px; margin-bottom: 0; } .row { position: relative; text-align: center; } .aui-form-list { display: none; } .aui-form-list-act { display: block; } </style> </head> <body> <div class="aui-content" id='tabbar'> <ul class="aui-grid-sixteen"> <li class="aui-col-xs-4 aui-text-center " tapmode onclick="fnOpenRelease(0)"> <span class="aui-iconfont aui-icon-profilefill aui-bg-success"></span> <p class="col aui-text-info"> 仪器检测 </p> </li> <li class="aui-col-xs-4 aui-text-center" tapmode onclick="fnOpenRelease(1)"> <span class="aui-iconfont aui-icon-creativefill aui-bg-warning"></span> <p class="col"> 仪器培训 </p> </li> <li class="aui-col-xs-4 aui-text-center" tapmode onclick="fnOpenRelease(2)"> <span class="aui-iconfont aui-icon-apps aui-bg-danger"></span> <p class="col"> 仪器维护 </p> </li> </ul> <ul class="aui-grid-sixteen" > <li class="aui-col-xs-4 aui-text-center" tapmode onclick="fnOpenRelease(3)"> <span class="aui-iconfont aui-icon-countdownfill aui-bg-info"></span> <p class="col"> 项目外包 </p> </li> <li class="aui-col-xs-4 aui-text-center" tapmode onclick="fnOpenRelease(4)"> <span class="aui-iconfont aui-icon-countdownfill aui-bg-info"></span> <p class="col"> 文献求助 </p> </li> <li class="aui-col-xs-4 aui-text-center " tapmode onclick="fnOpenRelease(0)"> <span class="aui-iconfont aui-icon-profilefill aui-bg-success"></span> <p class="col "> 移机服务 </p> </li> </ul> </div> <div class="aui-content-padded " style="margin-top: 15px" id="tabbody"> <!-- 仪器检测 start --> <ul class="aui-list aui-form-list aui-form-list-act "> <li class="aui-list-item" > <div class="aui-list-item-inner" > <p style=" margin-bottom:10px;"> 检测领域 </p> <div class="aui-list-item-input"> <select tapmode> <option>请选择</option> <option>航空航天</option> <option>能源</option> <option>电子电器检测</option> <option>可靠性测试</option> <option>食品检测</option> </select> </div> </div> </li> <li class="aui-list-item" tapmode onclick='fnOpenSelect()'> <div class="aui-list-item-inner"> <p style=" margin-bottom:10px;"> 所在地区 </p> <div class="aui-list-item-input"> <input type="text" placeholder="请选择" id='region'> </div> </div> </li> <li class="aui-list-item" > <div class="aui-list-item-inner"> <p style=" margin-bottom:10px;"> 检测样品 </p> <div class="aui-list-item-input"> <input type="text" placeholder=""> </div> </div> </li> <li class="aui-list-item" > <div class="aui-list-item-inner"> <p style=" margin-bottom:10px;"> 求助需求 </p> <div class="aui-list-item-input"> <textarea placeholder="" class="content" id="introduce"></textarea> </div> </div> </li> <li class="aui-list-item" > <div class="aui-list-item-inner"> <p style=" margin-bottom:10px;"> 联系人 </p> <div class="aui-list-item-input"> <input type="text" placeholder=""> </div> </div> </li> <li class="aui-list-item" > <div class="aui-list-item-inner"> <p style=" margin-bottom:10px;"> 单位 </p> <div class="aui-list-item-input"> <input type="text" placeholder=""> </div> </div> </li> <li class="aui-list-item" > <div class="aui-list-item-inner"> <p style=" margin-bottom:10px;"> 手机 </p> <div class="aui-list-item-input"> <input type="text" placeholder=""> </div> </div> </li> </ul> <!-- 仪器检测 end --> <!-- 仪器培训 start --> <ul class="aui-list aui-form-list"> <li class="aui-list-item aui-margin-b-15" > <div class="aui-list-item-inner"> <div class="aui-list-item-input"> <input type="text" placeholder="请输入培训仪器名称"> </div> </div> </li> <li class="aui-list-item aui-margin-b-15"> <div class="aui-list-item-inner"> <div class="aui-list-item-input"> <input type="text" placeholder="请输入仪器厂商"> </div> </div> </li> <li class="aui-list-item aui-margin-b-15"> <div class="aui-list-item-inner"> <div class="aui-list-item-input"> <input type="text" placeholder="请输入培训内容"> </div> </div> </li> <li class="aui-list-item aui-margin-b-15"> <div class="aui-list-item-inner"> <div class="aui-list-item-input"> <textarea type="text" placeholder="请输入培训具体要求"></textarea> </div> </div> </li> <li class="aui-list-item aui-margin-b-15"> <div class="aui-list-item-inner"> <div class="aui-list-item-input"> <input type="text" placeholder="请输入培训具体时间"> </div> </div> </li> <li class="aui-list-item aui-margin-b-15"> <div class="aui-list-item-inner"> <div class="aui-list-item-input"> <input type="text" placeholder="请输入培训费用"> </div> </div> </li> </ul> <!-- 仪器培训 end --> <div class="row" tapmode onclick="fnOpenMycenter()"> <div class="aui-btn aui-btn-info" > 发单 </div> </div> </div> </body> <script type="text/javascript" src="../../script/api.js"></script> <script type="text/javascript"> apiready = function() { api.parseTapmode(); } function fnOpenSelect() { var UIActionSelector = api.require('UIActionSelector'); UIActionSelector.open({ datas : 'widget://res/city.json', layout : { row : 5, col : 3, height : 30, size : 12, sizeActive : 14, rowSpacing : 5, colSpacing : 10, maskBg : 'rgba(0,0,0,0.2)', bg : '#fff', color : '#888', colorActive : '#f00', colorSelected : '#f00' }, animation : true, cancel : { text : '取消', size : 12, w : 90, h : 35, bg : '#fff', bgActive : '#ccc', color : '#888', colorActive : '#fff' }, ok : { text : '确定', size : 12, w : 90, h : 35, bg : '#fff', bgActive : '#ccc', color : '#888', colorActive : '#fff' }, title : { text : '请选择', size : 12, h : 44, bg : '#eee', color : '#888' }, fixedOn : api.frameName }, function(ret, err) { if (ret) { // alert(JSON.stringify(ret)); var region=ret.level1 + ret.level2+ret.level3; $api.val($api.byId('region'), region); } else { alert(JSON.stringify(err)); } }); } function fnOpenRelease(index_) { var tabbar = $api.byId('tabbar'); var tabbody = $api.byId('tabbody'); var tabbarCols = $api.domAll(tabbar, '.col'); var tabbodyLists = $api.domAll(tabbody, '.aui-form-list'); // tab变样式 for (var i = 0; i < tabbarCols.length; i++) { $api.removeCls(tabbarCols[i], 'aui-text-info'); } $api.addCls(tabbarCols[index_], 'aui-text-info'); // // 分类列表改变 for (var i = 0; i < tabbodyLists.length; i++) { $api.removeCls(tabbodyLists[i], 'aui-form-list-act'); } $api.addCls(tabbodyLists[index_], 'aui-form-list-act'); } </script> </html> ```