前言:
在显示竞价结果时,引入了模态框,模态框在使用之前要先引入bootstrap.css(bootstrap.jsbootstrap.min.js,两种js文件的区别是一个未压缩一个压缩,无需全部引入)。所有插件都依赖jQuery(在www/js/lib/jquery也就是说,jQuery必须在所有插件之前引入页面)
bootstrap引入方法:
将文件bootstrap.js或bootstrap.min.js放到所在项目的www/lib/js下并index.html中添加:
%link(rel="stylesheet" type="text/css" href="css/bootstrap.css")//新引入 %link(rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css") %link(rel="stylesheet" type="text/css" href="css/bootstrapswitch.css") %link(rel="stylesheet" type="text/css" href="css/bootstrapswitch-custom.css") %link(rel="stylesheet" type="text/css" href="css/font-awesome.css") %link(rel="stylesheet"type="text/css"href="css/index.css") %link(rel="stylesheet"type="text/css"href="lib/js/jquery/jquery.mobile-1.2.0.min.css")//新引入
//以上几条若无需引进,注意最后一条,由于之前没有引进,把party_bid显示在模拟器上时不显示任何样式,只是聚在左上角
%body(ng-controller="MainCtrl") %mobile-view %script(lang="javascript" src="lib/js/jquery/jquery-1.8.2.min.js")//新引入(注意引进的先后顺序) %script(lang="javascript" src="lib/js/angular/bootstrap.js")//新引入
在哪个界面显示模态框就在那个页面haml中写
模态框实例:
.modal.fade#myModal//定义id,并且让模态框退色及是页面颜色变暗
.modal-dialog//引入对话框
.modal-content//写入内容
.modal-header
%button.close(aria-hidden= "true" data-dismiss= "modal" type = "button") ×
%h4.modal-title
.modal-body
%center
{{bid_success_person.name}}  ¥{{bid_success_person.price}}
%br
%center
{{bid_success_person.phone}}
%br
%center
竞价成功!
.modal-footer//位置不限,注意缩进,否则易出现只是模态框闪动一下却没有显示它的header,body,footer部分的情况。
然后在controller里面控制合适显示合适隐藏:
function BidResultController($scope, $navigate, $timeout)//$timeout设置消退时间
$timeout(function () {
$('#myModal').modal('show');
$timeout(function () {
$('#myModal').modal('hide');
}, 3000)
}, 0)//设置模态框在进入页面显示,3秒后消失
更多模态框内容,请参考:http://v3.bootcss.com/javascript/#modal