使用RequireJs和Bootstrap模态框实现表单提交
下面我将使用requirejs结合模态框实现三五行代码部署表单提交操作。
传统开发思路如下:
缺点:所有代码写在一个html中,难以阅读,难以维护,难以复用!
使用requirejs开发思路如下(且看笔者如何解耦模块化代码):
缺点:编写过程较为复杂
优点:代码解耦,便于复用。什么时候你想复用,只需require你编写好的js模块,即可!里面的bootstrap,jquery,模态框等等所有东西都会加载好(因为你在定义的时候,已经写好依赖关系了)
举个例子:我们项目中关于项目授权的使用至少存在三个页面,编写好这样一个js模块,可以很轻易的在那三个页面上复用。如果使用传统办法,估计要复制粘贴大量的html和js。
看一下代码运行效果吧:
源代码地址:
https://github.com/lewis617/myflask/tree/master/requirejsModal
使用RequireJs和Bootstrap模态框实现表单提交的更多相关文章
- Angular.js通过bootstrap实现经典的表单提交
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...
- Bootstrap使用模态框modal实现表单提交弹出框
Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...
- Bootstrap模态框按钮
1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <but ...
- Bootstrap 模态框(Modal)插件
原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...
- BootStrap 模态框基本用法
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态框(Modal)插件方法</title ...
- 前端之bootstrap模态框
简介:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. Modal简介 Modal实现弹出表单 M ...
- bootstrap模态框手动关闭遮盖层不消失
模态框中 加载了一个子页面 子页面中调教表单之后想根据执行结果手动关闭模态框,最初尝试了以下几种方案: 1.$("#myModal").modal('hide');//模态框关闭 ...
- bootstrap模态框传值操作
1.bootstrap模态框之html代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"& ...
- js控制Bootstrap 模态框(Modal)插件
js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html
随机推荐
- javaweb学习记录(1)
Java基础学习笔录 1.运行java程序,出现bad version number in.class file 编译器()的版本号高于运行环境(jre)的版本号,可以降低编译器版本号,也可以通过提升 ...
- asp.net mvc添加多条数据到数据库
mvc的视图太强大了,个人刚刚接触.(初级菜鸟,懂的不多,往大神们指点)需求是,客户点击添加按钮弹出一个框选择产品后直接添加到表单中,在表单可以自己更改产品的数量,以及一些信息.mvc表单提交的时候只 ...
- C\C++中声明与定义的区别
声明和定义是完全同的概念,声明是告诉编译器"这个函数或者变量可以在哪找到,它的模样像什么".而定义则是告诉编译器,"在这里建立变量或函数",并且为它们分配内存空 ...
- 使div下的图片自适应div的大小
div img{ max-width:100%; height:auto; } 这里div 要给固定的宽度 开始这里还想了半天 用网上的方法也不行 问老大 又一句话就给我解决了...老大真男神啊!!! ...
- LINUX 下grep命令查找
当出现查找文件出现匹配到二进制文件时,大概是因为文件同时含有文本文件与二进制文件,需要加上 grep -a,就可以解决问题.
- ASP.NET Core 文件上传
前言 上篇博文介绍了怎么样在 asp.net core 使用 Redis 和 Protobuf 进行 Session缓存.本篇的是开发过程中使用的一个小功能,怎么做单文件和多文件上传. 如果你觉得对你 ...
- .Net开发笔记(二十一) 反射在.net中的应用
反射概念在网上到处都有,但是讲到的具体的应用很少,一个重要的原因是现实中真的很少用得到它.引用msdn上对“反射”的解释: "通过 System.Reflection 命名空间中的类以及 S ...
- 基于存储过程的MVC开源分页控件--LYB.NET.SPPager
摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件MVCPager(http://www.webdiyer.com/)算 ...
- Windows+GCC下内存对齐的常见问题
结构/类对齐的声明方式 gcc和windows对于modifier/attribute的支持其实是差不多的.比如在gcc的例子中,内存对齐要写成: class X { //... } __attrib ...
- ubuntu升级内核后vmware-player启动失败
在虚拟机软件中,vmware player是对硬件支持很好的,通过它可以很方便的使用网银.单片机开发等等工作.但是最近ubuntu每次升级内核后,vmware都会启动失败,提示:Before you ...