bootstrap轮播图与现实问题和active使用等
来源：互联网 发布：mysql 根据已有的函数 编辑：程序博客网 时间：2024/06/05 11:14
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> angular.module("myApp",[]).controller("myControl",["$scope",function($scope){ $scope.ReportTypeInit = function(){ //假设营业执照和许可证是从后台传过来的 var bussinessLicense = "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1501500166&di=e40436b737b5a4257000c3e6a7da5709&src=http://img.juimg.com/tuku/yulantu/120926/219049-12092612154377.jpg";//营业执照 只能有一张 var Lincense = "http://pic75.nipic.com/file/20150816/21321671_141845130000_2.jpg,http://pic41.nipic.com/20140519/18505720_094740582159_2.jpg,http://imgsrc.baidu.com/image/c0%3Dshijue1%2C0%2C0%2C294%2C40/sign=30161d0030292df583cea456d4583615/e1fe9925bc315c609050b3c087b1cb13485477dc.jpg";//许可证 可以有多张 if(!bussinessLicense&&!Lincense){//营业执照许可证都为空，给出提示 //若都为空，提示给用户 }else{ var path1 = []; //存放营业执照 var path2 = []; //存放许可证 path1[0] = bussinessLicense; var strs = Lincense.split(","); for(var i=0;i<strs.length;i++){ path2[i] = strs[i]; path2[i].index = i;//记录图片的下表 } var qcTypeName1 = '营业执照'; var qcTypeName2 = '许可证'; var index1 = 0;//营业执照 //定义两个变量是为了标记是否存在营业执照和许可证 var index2 = 1; //许可证 if(!bussinessLicense){ //这段代码，代表若其中一个为空，让他不显示 qcTypeName1 = null; path1 = null; index1 = null; }else { index2 = null; } if(!Lincense){ qcTypeName2 = null; path2 = null; index2 = null; } $scope.files = [ {'qcTypeName':qcTypeName1,'qcFilePath':path1,'index':index1}, {'qcTypeName':qcTypeName2,'qcFilePath':path2,'index':index2} ]; } $('#identifier').modal('show'); for(var i=0;i<$scope.files.length;i++){ $scope.files[i].tab = "tab" + i; $scope.files[i].tab1 = "tab" + i; $scope.files[i].carousel = "carousel" + i; } } }]); </script></head><body ng-app="myApp" ng-controller="myControl"><div class="col-md-1" style="margin-right: 6px;"> <button type="submit" class="btn btn-success " ng-click="ReportTypeInit()"> <i class="fa fa-search"></i> 查看 </button> <div class="modal fade" id="identifier" tabindex="-1" role="identifier" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header" > <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title">查看证照</h4> </div> <div class="modal-body"> <div class="portlet-body form-group"> <div class="form-group row"> <div class="form-group col-md-12 "> <div class="tabbable tabbable-tabdrop"> <ul class="nav nav-tabs" > <!-- <li class="active" ng-if="qcFileModel"> <a href="enterprise/home.html#/transactionObjectInfo#tab1" data-toggle="tab">{{qcFileModel.qcTypeName}}</a> </li> <li ng-if="qcFileModel1"> <a href="enterprise/home.html#/transactionObjectInfo#tab2" data-toggle="tab">{{qcFileModel1.qcTypeName}} </a> </li> --> <!-- ng-class="{active:($index==file.index)}" 这句代码的意思是，在营业执照和许可证中，必须有一个index为null,就是有一个被选中的状态，这也是在controller里面进行控制，记住这种思想 若存在还有营业执照，许可证，其他的类型，也是一样，值选中一个状态 --> <li ng-class="{active:($index==file.index)}" ng-repeat="file in files" ng-if="file.qcFilePath!=null"> <a href="test/#{{file.tab}}" data-toggle="tab">{{file.qcTypeName}}</a> </li> </ul> <div class="tab-content"> <!-- <div class="tab-pane active" id="tab1" ng-if="qcFileModel"> <div class="form-group col-md-12"> <div class="form-group col-md-12 "> <label class="control-label col-md-3">{{qcFileModel.qcTypeName}}：</label> <div class="col-md-3"> <img ng-src="{{qcFileModel.qcFilePath}}" style="width: 200px;height: 200px;"> </div> </div> </div> </div> <div class="tab-pane" id="tab2" ng-if="qcFileModel1"> <div class="form-group col-md-12"> <label class="control-label col-md-3">{{qcFileModel1.qcTypeName}}：</label> <div class="col-md-3"> <img ng-src="{{qcFileModel1.qcFilePath}}" style="width: 200px;height: 200px;"> </div> </div> </div> --> <div class="tab-pane " id="tab0" ng-class="{active:(files[0].index==0)}" ng-if="files[0].qcFilePath"> <div class="form-group col-md-12"> <div class="form-group col-md-12 "> <label class="control-label col-md-3">{{files[0].qcTypeName}}：</label> <div class="col-md-3"> <img ng-src="{{files[0].qcFilePath[0]}}" style="width: 200px;height: 200px;"> <!--<div id="my" class="carousel slide" style="width: 200px;height: 200px;">--> <!--<!– 轮播（Carousel）项目 –>--> <!--<div class="carousel-inner" >--> <!--<div class="item active" >--> <!--<img ng-src={{file.qcFilePath[0]}} style="width: 200px;height: 200px;" alt="1">--> <!--</div>--> <!--</div>--> <!--<!– 轮播（Carousel）导航 –>--> <!--<a href="../#my" style="padding:100px 0px 0px 0px " class="carousel-control left"--> <!--data-slide="prev">‹</a>--> <!--<a href="../#my" style="padding:100px 0px 0px 0px " class="carousel-control right"--> <!--data-slide="next">›</a>--> <!--</div>--> </div> </div> </div> </div> <!-- ng-class="{active:(files[1].index==1)}" 和上面的ng-class是一样的意思 --> <div class="tab-pane" ng-class="{active:(files[1].index==1)}" id="tab1" ng-if="files[1].qcFilePath" > <div class="form-group col-md-12"> <label class="control-label col-md-3">{{files[1].qcTypeName}}：</label> <!--<div class="col-md-3">--> <!--<img ng-src="{{file.qcFilePath}}" style="width: 200px;height: 200px;">--> <!--</div>--> <div class="col-md-3"> <div id="my1" class="carousel slide" style="width: 200px;height: 200px;"> <!-- 轮播（Carousel）项目 --> <div class="carousel-inner" > <!--<div class="item" ng-repeat="imgFile in file.qcFilePath" >--> <!--<img ng-src={{imgFile}} style="width: 200px;height: 200px;" >--> <!--</div>--> <!--<div class="item active" >--> <!--<img ng-src={{firstImg}} style="width: 200px;height: 200px;" >--> <!--</div>--> <div class="item" ng-class="{active:($index==0)}" ng-repeat="item in files[1].qcFilePath"> <img ng-src="{{item}}" style="width: 200px;height: 200px;" > </div> </div> <!-- 轮播（Carousel）导航 --> <a href="../#my1" style="padding:100px 0px 0px 0px " class="carousel-control left" data-slide="prev">‹</a> <a href="../#my1" style="padding:100px 0px 0px 0px " class="carousel-control right" data-slide="next">›</a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-success" >提交</button> <button type="button" class="btn dark btn-outline" data-dismiss="modal">取消</button> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div></div></body></html>阅读全文
0 0
- bootstrap轮播图与现实问题和active使用等
- Active/Active与Active/Passive
- Bootstrap模态框使用问题
- bootstrap中的路由与锚点混合使用锚点乱跳问题
- Bootstrap下载与使用
- BootStrap简介与使用
- 关于使用bootstrap中modal和ajaxupload.js图片问题
- Bootstrap-Iconpicker 和pjax插件一起使用图标加载问题
- 渴望与现实，自由和空间
- 如何使用chrome控制台定位到hover，active等属性
- Bootstrap-table的使用及如何给单元格添加功能按钮和事件等操作！
- Bootstrap-table的使用及如何给单元格添加功能按钮和事件等操作！
- bootstrap （active类）切换
- bootstrap使用问题记录1
- bootstrap使用碰到的问题
- bootstrap和ｊｑｕｅｒｙ版本问题
- bootstrap与Select2使用小结
- Bootstrap的安装和使用
- 问题小结
- 牢记25个最佳的SSH命令
- 实验吧keyboard
- python求解重叠区域线段覆盖总长度
- Ubuntu 16.0.4 Linux下安装Docker
- bootstrap轮播图与现实问题和active使用等
- POJ-2407-Relatives（欧拉函数模板题）
- 基于Unity3D 的Htc vive的基本交互
- 23种设计模式汇总整理
- 23. Merge k Sorted Lists
- Linux系统管理与设置
- sql语句行列转至
- 如何拥有赏（sao）心（de）悦（yi）目（bi）的开发环境
- 基本数据类型包装数据类型之间的转换
