异步请求 var postData = {"env_name" : new_env_name,"env_url": new_env_url,"env_desc" : new_env_desc};$.ajax({type: POST,url : /test_env_add/,data : postData,dataType : json,success : function(data){$(#table_test_env).dataTable().fnClearTable(); //清空表格$(#table_test_env).dataTable().fnAddData(packagingdatatabledata(data),true); //刷下表格$("#modal-container-648308").modal("hide");},erro...
使用jquery与bootstrap实现了一个比较简单但功能齐全的增删改查功能的后台管理页面，虽然只是一个CRUD页面，但麻雀虽小五脏俱全，JS常用的功能都用到了，本例用原生的jquery与bootstrap配合使用，不考虑JS的重构性及打包，该例子零耦合，开箱即用。先看Demo：一、用到的Jquery功能1、获取/赋值input输入值 $("#my_id").val();// 获取 $("#my_id").val(“user_id");// 赋值2、获取/赋值textarea文本域输入值 $("#my_textarea").val(...
下拉select选项多级联动实例。cxselect插件使用方法：1. 引入JS， <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/jquery.cxselect.min.js"></script> 2. JS项设置。Find more here：http://code.ciaoca.com/jquery/cxselect/<script>$(#cnMap).cxSelect({ url: js/cityData.min.json, //url: js/cityData.min.json, selects: [province, city, region], nodata: none }); $...
bootstrap-select我想大家都不陌生是一个前端下拉框的插件非常好用，在select的标签中设置属性可以做很多功能控制，不过初始化之后怎么去修改网上找遍中文英文也没有一个交代自己研究好久研究出来了，当然有的人会干掉重新生成那样太low，我决定来填补这个空白。 js控制select属性变化其实很简单，并不需要 $(#goodsNames).selectpicker(render); $(#goodsNames).selectpicker(refresh);来重新渲染只用 $(".selectpicker").selectp...
第一种Bootstrap -默认的分页实例，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head><title>Bootstrap 实例 - 默认的分页</title><link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <div ><h1>第...
谈谈表单校验这大概是一种惯例，学习前台后台最开始接触的业务都是用户注册和登录。现在社会坚持以人为本的理念，在网站开发过程同样如此。User是我们面对较多的对象，也是较核心的对象。最开始的用户注册和登陆这块，也就尤为重要。 直接看demo：http://www.suchso.com/code/bootstrapvalidate/用户注册和登录其实往往比我们想象的难。就比如表单校验，里面涵盖的内容其实挺多，就前台而言，你需要了解： 1.正则表达式的基本了解 ...
Bootstrap Validator是为Bootstrap3设计的一款表单验证jQuery插件，非常适合基于Bootstrap框架的网站。 看作者的github，这款插件已经不再更新了，而推荐使用FormValidation，不过现在还是先介绍一下BootstrapValidator的使用。 准备工作 BootstrapValidator文档地址：http://bv.doc.javake.cn/ 下载源码后，将其中的bootstrapValidator.min.css和bootstapValidator.min.js导入项目，并在页面中引入这些组件，如下： <link rel="s...
前言 为啥名字叫【前端分页工具】？因为我实在想不到什么好名字，如果想要更加贴切的理解这个工具，应该从业务来看 业务是这样的，有一个数据从后台传到前台，因为数据量不大，因此传过来之后直接显示即可，但是=。=所谓的数据量不大，最多也达到成百上千条，不可能全部显示出来，那么就需要分页 常规的分页是利用Ajax，通过传页偏移量到后台，后台查询数据库再返回数据，可以实现无刷新分页，拿到的数据也是最新的 前端分页 优点：...
最近基于jQuery和Bootstrap框架实现了一个仿知乎动态列表的前端效果，基本实现了和知乎动态列表相同的效果。如下： 1.基本列表项2.列表项全文展开、折叠（图中为展开第一项）3.评论项展开4.列表数据加载（加载全部）5.带动画效果的点赞功能6.回复列表的hover显示功能HTML代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" /> <meta name="view...
因为项目需要数据验证，看bootstrapValidator 还不错，就上手一直，完美兼容，话不多说。 bootstrap：能够增加兼容性的强大框架. 需要引用css：bootstrap.min.css bootstrapValidator.min.css js:jquery-1.10.2.min.js bootstrap.min.js bootstrapValidator.min.js （下载实例） 以上这些都是必须的。 先上个简单的例子,只要导入相应的文件可以直接运行： <!DOCTYPE html> <html> <head><title>Using Ajax to submit data</title><...
效果图如下所示：<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP table.jsp starting page</title> <meta http-...
参考： http://getbootstrap.com/javascript/ 今天在写页面的时候, 遇到一个问题, 页面上 要同时使用Jquery UI的弹出框, 又要用 bootstrap 的popover 结果, 弹框的button 就变成这个样子了.网上查了下, 需要在JS开始的地方 添加两行代码. bootstrapButton = $.fn.button.noConflict(); $.fn.bootstrapBtn = bootstrapButton;添加完, 刷新页面就正常了本文介绍到这里，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及...
换肤功能的应用很广，不管是搜索界面还是普通的管理界面等等，都可以进行设计并且应用换肤功能，起到更好的用户体验。 今天仿造百度的换肤功能，实现了基本的换肤功能，接下来将会为大家介绍如何实现。在设计界面的过程当中，我采用了Bootstrap框架，以便更好的适应屏幕。（当然也是为了更好的熟悉使用这个框架，大家别忘了把Bootstrap框架的css和js包引进来哦）。在创建项目时最好可以分别将css、js、images分开。 首先是布局，...
前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简洁实用的jQuery手风琴插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/defa...
作为一名不在软件公司工作的软件工程师，不仅要会写后台代码(PHP/JAVA/SQL...)，还是兼顾前端工程师的工作(html/javascript/css...)。下面就来分享一个在实际工作项目中使用到的购物车的前端开发。 这里分享的仅仅是针对购物车的操作(产品数量的增加减少，删除购物车中产品项)，假设购物车中已经放有若干产品。闲话少说，先上两张效果图。HTML代码如下：这里使用到了JQuery1.11和bootstrap3 。 <!DOCTYPE html> <html> <HEADER><me...