前端页面常见js应用
来源:互联网 发布:淘宝无线端装修工具 编辑:程序博客网 时间:2024/03/29 07:47
一.点击按钮弹出div层
<a href="#myModal" class="btn btn-danger " data-toggle="modal">删除分店</a><!-- model --><div class="modal fade" id="myModal" tabindex="-1" role="dialog"aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><form class="form-horizontal" action="rest/shop/delete" method="get"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"aria-hidden="true">×</button><h4 class="modal-title" id="myModalLabel">删除门店</h4></div><div class="modal-body"><div class="form-group"><label for="tel" class="col-sm-4 control-label">请输入要删除门店ID:</label><div class="col-sm-6"><input type="text" class="form-control" id="id" name="id"placeholder="请输入门店ID">/div></div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">取消</button><button type="submit" onclick="return del();" class="btn btn-danger">删除</button></div></div></form></div></div>
二.默认选择单选按钮单选
<div class="form-group"><label for="tel" class="col-sm-2 control-label">用户性别</label><div class="col-sm-10"><label><input name="sex" type="radio" value="男" />男</label> <label><input name="sex" type="radio" value="女" />女</label></div></div><script type="text/javascript">function initradio(rName,rValue){var rObj = document.getElementsByName(rName);//遍历将对应项置为选中状态for(var i = 0;i < rObj.length;i++){if(rObj[i].value==rValue){rObj[i].checked = 'checked';}} } //${user.sex}为后台传给页面的值initradio('sex',"${user.sex}");</script>
三.常见jtsl应用
//判断(if else)<c:choose><c:when test="${empty user}">没有找到数据</c:when><c:otherwise>有人</c:otherwise></c:choose>//遍历<tbody><c:forEach items="${list}" var="user"><tr><td>${user.username}</td><td>${user.tel}</td><td>${user.realname}</td><td><a href="rest/user/getInfo?id=${ user.id}">详情</a></td></tr></c:forEach></tbody>
四.简单表单校验
<form class="form-inline" role="search" id="form"action="" method="POST"><div class="form-group col-sm-6"><input type="text" class="form-control" id="username"name="username" placeholder="请输入员工姓名"></div><button type="submit" class="btn btn-primary" onclick="return find();">查询员工</button></form><script>function find() {var name = $('#username').val();if (name == "") {alert("请输入员工名字");return false;}}</script>
五.datepicker使用
<div class="form-group"><label for="tel" class="col-sm-2 control-label">用户生日</label><div class="col-sm-10"><input type="text" class="form-control" id="birthday"name="birthday" placeholder="请输入生日" value="${user.birthday }"></div></div><script>$(document).ready(function() {$("#birthday").datepicker();});</script>
六.下拉框简单应用
<div class="input-group "><span class="input-group-addon">菜品类型:</span> <select class="selectpicker form-control " id="foodTypeId" onchange="getFoodType();"><option value="" selected="selected">全部</option><option value="1">海鲜</option><option value="2">肉类</option><option value="3">蔬菜</option><option value="4">水果</option></select></div><script type="text/javascript">function getFoodType() { var foodTypeId=$("#foodTypeId option:selected").val(); alert(foodTypeId);}</script>
七.删除前js确认
function delConfirm() {if (!confirm("确认要删除?")) {window.event.returnValue = false;}}<a class="btn btn-danger" id="delete" onclick="delConfirm();"href="rest/user/delete?id=${user.id }">删除</a>
0 0
- 前端页面常见js应用
- JS原生一步步实现前端路由和单页面应用
- JS单页面应用实现前端路由(hash)
- 前端页面js调试
- 前端常见面试题【JS】
- 前端常见算法js实现
- 3.前端常见js问答题
- 常见前端Js框架汇总
- 【前端框架】Backbone.js在大型单页面应用中的应用实践
- 【JS】前端数学函数应用
- 前端JS常见树——Tree
- 【转载】前端常见算法的JS实现
- 前端常见算法的JS实现
- 前端常见算法的JS实现
- 应用中常见前端问题记录
- .cs页面引用前端js代码
- JS前端验证(验证页面属性格式)
- 前端页面js防止重复提交表单
- Android通过Servcie实现Notification定时发送
- 在无头单链表的一个非头节点前插入一个节点
- 通过包名和类名启动应用程序报错
- 链式二叉树的递归与遍历
- 机器学习相关资料推荐 http://blog.csdn.net/jiandanjinxin/article/details/51130271
- 前端页面常见js应用
- string.IsNullOrEmpty和string.IsNullOrWhiteSpace方法的区别
- 使用Unity3D 5.3.4 模仿2D游戏 FlappyBird(一)
- STL queue队列容器和priority_queue优先队列容器
- 每天laravel-20160727| Genaerator command-5
- java的编码原理
- java排序之快排
- Mac sublime text3 快捷键
- struts2标签库详解