下面我将使用requirejs结合模态框实现三五行代码部署表单提交操作。

传统开发思路如下:

缺点:所有代码写在一个html中,难以阅读,难以维护,难以复用!

使用requirejs开发思路如下(且看笔者如何解耦模块化代码):

缺点:编写过程较为复杂

优点:代码解耦,便于复用。什么时候你想复用,只需require你编写好的js模块,即可!里面的bootstrap,jquery,模态框等等所有东西都会加载好(因为你在定义的时候,已经写好依赖关系了)

举个例子:我们项目中关于项目授权的使用至少存在三个页面,编写好这样一个js模块,可以很轻易的在那三个页面上复用。如果使用传统办法,估计要复制粘贴大量的html和js。

看一下代码运行效果吧:

源代码地址:

https://github.com/lewis617/myflask/tree/master/requirejsModal

使用RequireJs和Bootstrap模态框实现表单提交的更多相关文章

  1. Angular.js通过bootstrap实现经典的表单提交

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...

  2. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

  3. Bootstrap模态框按钮

    1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <but ...

  4. Bootstrap 模态框(Modal)插件

    原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...

  5. BootStrap 模态框基本用法

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态框(Modal)插件方法</title ...

  6. 前端之bootstrap模态框

    简介:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. Modal简介 Modal实现弹出表单 M ...

  7. bootstrap模态框手动关闭遮盖层不消失

    模态框中 加载了一个子页面 子页面中调教表单之后想根据执行结果手动关闭模态框,最初尝试了以下几种方案: 1.$("#myModal").modal('hide');//模态框关闭 ...

  8. bootstrap模态框传值操作

    1.bootstrap模态框之html代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"& ...

  9. js控制Bootstrap 模态框(Modal)插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

随机推荐

  1. jquery easyui 动态绑定数据列

    function doSearch2() { var strsql = $('#sssql').val(); $.ajax({ url: "../HttpHandler/DownloadHa ...

  2. css多行显示省略号

    首先说css多行显示省略号和单行文本省略号: 我们知道,单行显示省略号时,我们首先需要设置容器的宽度width:value(具体的值),然后强制文本在一行内显示,即white-spacing:nowr ...

  3. Android事件分发小结

      ******** ******** 第一部分: 介绍说明 ******** ********        个人感觉在做交互的时候, 对于Android的按键分发的理解还是比较重要的. 这些内容在 ...

  4. 有关于canvas几个新知识点

    对于canvas的初学者来说,以下几点应该是不知道的知识点: 1.canvas有兼容IE6/7/8的脚本文件 下载地址:https://github.com/arv/explorercanvas 2. ...

  5. shell去除换行和空格2

    #!/bin/bash if [ -f str.txt ] ## 如果str.txt存在,则返回true then strval=$(cat str.txt|awk '{printf "%s ...

  6. PHP基础知识之常量

    定义: define("FOO",     "something");

  7. 【实战Java高并发程序设计 2】无锁的对象引用:AtomicReference

    AtomicReference和AtomicInteger非常类似,不同之处就在于AtomicInteger是对整数的封装,而AtomicReference则对应普通的对象引用.也就是它可以保证你在修 ...

  8. 建模元件有哪些在MapleSim中

    信号库:包含通用信号模块.布尔.控制器.离散信号模块.信号源.线性信号模块.非线性信号模块.时间离散信号模块.查询表.信号转换器.数学运算.关系元件.特殊信号模块,应用案例. 电子库:包含电阻.运算放 ...

  9. matlab size、numel、length、fix函数的使用,补充nargin

    size():获取矩阵的行数和列数 (1)s=size(A), 当只有一个输出参数时,返回一个行向量,该行向量的第一个元素时矩阵的行数,第二个元素是矩阵的列数.(2)[r,c]=size(A), 当有 ...

  10. ABP理论学习之MVC控制器(新增)

    返回总目录 本篇目录 介绍 AbpController基类 本地化 异常处理 响应结果的包装 审计日志 授权 工作单元 其他 介绍 ABP通过Abp.Web.Mvc nuget包集成了ASP.NET ...