前端页面常见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
原创粉丝点击