基于Bootstrap实现Material Design风格表单插件 附源码下载


Posted in Javascript onApril 18, 2016

Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件。该表单通过自定义样式和jQuery来将Bootstrap的表单修改为扁平风格的表单,并带有浮动标签特效。

基于Bootstrap实现Material Design风格表单插件 附源码下载

在线预览         源码下载

使用方法

使用该Material Design风格表单需要在页面中引入jquery,bootstrap相关文件和materialFormStyles.css、materialForm.js文件。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/materialFormStyles.css">
<script src="js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/materialForm.js"></script>

HTML结构

该Material Design风格表单的HTML结构是固定的,你可以复制下面的代码。

<div class="container" id="formOutterWrapper">
<div class="container" id="formInnerWrapper">
<form id="materialForm" class="form" method="post" action="" role="form" autocomplete="off">
<div class="form-group">
<div class="col-xs-6">
<label class="labels" for="firstName">用户名称</label>
<input type="text" class="formInput" id="firstName" name="firstName">
</div>
<div class="col-xs-6">
<label class="labels" for="lastName">昵 称</label>
<input type="text" class="formInput" id="lastName" name="lastName">
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label class="labels" for="email">电子邮件</label>
<input type="text" class="formInput" id="email" name="email">
</div>
<div class="col-xs-6">
<label class="labels" for="phone">联系电话</label>
<input type="tel" class="formInput" id="phone" name="phone">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<label class="labels" for="description">项目描述</label>
<input type="text" class="formInput" id="description" name="description">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<button type="button" class="btn btn-primary green flatButton" id="submit">提交</button>
</div>
</div>
</form>
</div>
</div>

该表单插件的github地址为:https://github.com/ch0chi/Jquery-Material-Form-Plugin

Javascript 相关文章推荐
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 Javascript
vue+iview实现手机号分段输入框
Mar 25 Vue.js
5个实用的JavaScript新特性
Jun 16 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 #Javascript
AngularJS入门教程之AngularJS模型
Apr 18 #Javascript
AngularJS入门教程之AngularJS指令
Apr 18 #Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 #Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 #Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 #Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 #Javascript
You might like
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
input 高级限制级用法
2009/03/26 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
vue router的基本使用和配置教程
2018/11/05 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python如何获取服务器硬件信息
2017/05/11 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
用python做游戏的细节详解
2019/06/25 Python
python绘制多个子图的实例
2019/07/07 Python
python调用其他文件函数或类的示例
2019/07/16 Python
Python3 元组tuple入门基础
2020/02/09 Python
Python代码需要缩进吗
2020/07/01 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
运动会表扬稿大全
2014/01/16 职场文书
2014会计年终工作总结
2014/12/20 职场文书
介绍信的写法
2015/01/31 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
工程竣工验收申请报告
2015/05/15 职场文书