`

基于Bootstrap的表单或Ajax提交等待效果。

 
阅读更多

(第一步)引入bootstrap所需要样式与js。

    <!-- Bootstrap -->
    <!-- 新 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

	<!-- 可选的Bootstrap主题文件(一般不用引入) -->
	<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

 (第二步)HTML定义一个DIV。

	<div class="modal fade" id="myModal">
	  <div class="modal-dialog modal-sm">
		
		  <img alt="" src="data:image/gif;base64,R0lGODlhGQAZAJECAK7PTQBjpv///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5OTYyNTQ4Ni02ZGVkLTI2NDUtODEwMy1kN2M4ODE4OWMxMTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUNGNUFGRUFGREFCMTFFM0FCNzVDRjQ1QzI4QjFBNjgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUNGNUFGRTlGREFCMTFFM0FCNzVDRjQ1QzI4QjFBNjgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk5NjI1NDg2LTZkZWQtMjY0NS04MTAzLWQ3Yzg4MTg5YzExNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5OTYyNTQ4Ni02ZGVkLTI2NDUtODEwMy1kN2M4ODE4OWMxMTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQFCgACACwAAAAAGQAZAAACTpSPqcu9AKMUodqLpAb0+rxFnWeBIUdixwmNqRm6JLzJ38raqsGiaUXT6EqO4uIHRAYQyiHw0GxCkc7l9FdlUqWGKPX64mbFXqzxjDYWAAAh+QQFCgACACwCAAIAFQAKAAACHYyPAsuNH1SbME1ajbwra854Edh5GyeeV0oCLFkAACH5BAUKAAIALA0AAgAKABUAAAIUjI+py+0PYxO0WoCz3rz7D4bi+BUAIfkEBQoAAgAsAgANABUACgAAAh2EjxLLjQ9UmzBNWo28K2vOeBHYeRsnnldKBixZAAA7" />
		
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

 (第三步)定义显示/隐藏函数。

function hideModal(){
		$('#myModal').modal('hide');
	}
	
	function showModal(){
		$('#myModal').modal({backdrop:'static',keyboard:false});
	}

  (第四步)测试。

	function initCalendar(){
		if(window.confirm('确定初始化?')){
			var moment = cal.fullCalendar('getDate');
			var y = moment.format();
			var sp = y.split("-");
			
			$.ajax({
				url: "./FullCanlendarInit", 
				async:false,
				type:"POST",
				data:{year:sp[0]},
				beforeSend:function (){
					showModal();
				},
				success: function(data){
					if(data.success==='init'){
						alert("init ok");
						hideModal();
					}else{
						alert("init error");
						hideModal();
					}
		      }
			});
			
			window.location.reload();
		}
	}

 OK,测试完成,好用。



 以上代码,在工作日历当中使用。

  • 大小: 14.5 KB
分享到:
评论

相关推荐

    Laravel-Bootstrap-Modal-Form, 使用AJAX提交模式中的Bootstrap 表单,使用 Laravel 验证.zip

    Laravel-Bootstrap-Modal-Form, 使用AJAX提交模式中的Bootstrap 表单,使用 Laravel 验证 Laravel-Bootstrap-Modal-Form你的Laravel 应用程序的表单验证扩展插件。 在将 Bootstrap 窗体嵌入到 Bootstrap/jquery模式...

    基于bootstrap的动态表单的实现

    在实现基于Bootstrap的动态表单时,我们通常会借助一些工具或库,如本例中提到的"Bootstrap Form Builder"。这个工具可能是一个基于GitHub的项目,版本为20160522(根据压缩包文件名推测)。它允许用户通过拖放方式...

    基于Bootstrap 3内置loading指示器的提交按钮特效

    在这款基于Bootstrap 3的提交按钮特效中,我们重点关注的是其内置的loading指示器,这是一种增强用户体验的有效手段,尤其是在用户提交表单时提供反馈。 加载指示器(Loading Indicator)是网页设计中一种常见的...

    基于Bootstrap的表单向导

    8. **AJAX**:为了提升用户体验,可以使用AJAX技术在不刷新页面的情况下提交表单数据或加载新步骤,这需要对JSON和服务器端接口有基本了解。 9. **错误处理和验证**:表单向导的每一步都应包含有效的数据验证,确保...

    bootstrap表单验证

    Bootstrap表单验证是一种在网页开发中常用的技术,用于确保用户在提交表单前输入的数据有效、完整且符合预设规则。Bootstrap,一个流行的前端开发框架,提供了美观的UI组件和强大的交互功能,其中包括表单验证功能。...

    MVC遇上bootstrap后的ajax表单验证

    在MVC框架与Bootstrap框架结合之后,进行Ajax表单验证成为了一项常见且有用的实践。通过这种方式,我们可以在客户端与服务器之间实现无缝的数据交互和表单验证,同时也能利用Bootstrap提供的美观样式来改善用户界面...

    基于bootstrap.3的文件上传效果, 可拖拽上传、预览的HTML5文件上传插件.zip

    标题中的“基于Bootstrap.3的文件上传效果, 可拖拽上传、预览的HTML5文件上传插件.zip”指的是一个使用Bootstrap 3框架和HTML5技术实现的高级文件上传功能。这个插件允许用户通过拖放操作上传文件,并且在上传前可以...

    基于Bootstrap 3 JQuery及RegExp的表单验证功能

    Bootstrap 3、JQuery、RegExp 表单验证功能的实现知识点: Bootstrap 3 是一款广泛使用的前端框架,提供了一套响应式的栅格系统、预设的样式和基于HTML的模板,使得网页设计更加简洁和高效。Bootstrap 3 默认包含了...

    基于Bootstrap4的material design风格表单插件

    这个基于Bootstrap4的Material Design风格表单插件,主要目标是提供一种方式,让开发者能够轻松地将Bootstrap4的默认样式转换为Material Design风格。表单元素,特别是输入框和文本框,会呈现出Material Design的...

    Bootstrap实现登录校验表单(带验证码)

    最后,表单提交时,通常会使用AJAX技术将数据发送到服务器进行验证。在上述示例中,表单的`action`属性指向`Admin_ChkLogin_G.asp`,但实际的登录验证应通过异步方式处理,以提供更好的用户体验。 总结来说,创建一...

    基于Bootstrap的jQuery登录表单html模板.zip

    4. **表单提交处理**:jQuery可以监听表单的提交事件,阻止默认的表单提交行为,而是通过Ajax发送请求到服务器进行验证和处理。 5. **错误提示**:如果登录失败,jQuery可以用来显示错误信息,指导用户修正错误。 ...

    基于bootstrap前端公用js

    公共ajax,动态bootstraptable生成,表单赋值,时间转换,单位转换 基于前端公用js功能

    基于bootstrap的聊天页面设计

    Bootstrap的表单控件可以帮助快速创建这些元素,并且可以进行自定义样式调整,如边框、圆角和悬停效果。 5. **用户状态和头像**:聊天应用中常常包含用户头像和在线状态指示。Bootstrap的图像组件和自定义CSS可以...

    jQuery bootstrap自定义创建表单工具代码

    6. **AJAX提交表单**:使用jQuery的$.ajax()方法无刷新地提交表单,实现实时数据交互,同时处理成功和失败的回调函数。 7. **JSON数据交互**:可能涉及到将表单数据转换为JSON格式,以便于与服务器进行数据交换。 ...

    bootstrapvalidator是一款简单实用的Bootstrap3表单验证jQuery插件

    BootstrapValidator还可以与AJAX提交表单结合,通过验证后异步提交数据,提供无刷新的用户体验。 综上所述,BootstrapValidator是Web开发中一个强大的工具,它使得在Bootstrap3环境下创建功能完善的、具有验证功能...

    jQuery基于bootstrap实现响应式弹出表单注册登录代码.zip

    在本项目中,jQuery可能被用于触发弹出框的显示和隐藏,处理用户输入验证,以及在表单提交时发送Ajax请求,实现无刷新的用户体验。 2. **Bootstrap**:Bootstrap提供了响应式布局,意味着页面可以根据设备屏幕尺寸...

    表单拖拽设计器bootstrap

    从标签“bootstrap”我们可以推断,这个设计器完全兼容Bootstrap的样式和结构,因此创建的表单将自然地融入到采用Bootstrap构建的网页中,保持一致的视觉效果和用户体验。 在提供的压缩包子文件名称列表中,“css3-...

    SSM+Bootstrap+Ajax项目OA系统

    SSM+Bootstrap+Ajax项目OA系统是一个基于Java技术栈,结合前端Bootstrap框架和Ajax技术构建的企业级办公自动化(OA)系统。在这个系统中,开发者利用了Spring、Spring MVC(SSM)三大框架的优势,实现了后端业务逻辑...

    bootstrap校验表单js css

    BootstrapValidator是一款强大的表单验证插件,它基于前端框架Bootstrap设计,可以轻松地为你的HTML表单添加验证功能。这个插件提供了丰富的验证规则和灵活的配置选项,以确保用户输入的数据符合预设条件,从而增强...

    基于BOOTSTRAP的上传工具

    8. **异步上传**:通常配合Ajax或Fetch API实现无刷新的后台上传,提供更好的用户体验。 9. **插件集成**:Bootstrap的上传工具可能已经集成了像jQuery这样的库,或者与其他流行库(如jQuery UI或Vue.js)兼容,...

Global site tag (gtag.js) - Google Analytics