一、基于JavaScript框架布局

栅格布局

新建test.jsp
运行：

粘贴代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用一下栅格布局</title>
</head><link href="css/bootstrap.min.css" rel="stylesheet"><link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet"><link href="css/dashboard.css" rel="stylesheet"><script src="js/ie-emulation-modes-warning.js"></script>
<body  ><div class="container"><div  class="row"><div class="col-md-6"><button type="button" class="btn btn-primary">原始按钮</button></div><div class="col-md-6"><button type="button" class="btn btn-primary">原始按钮</button></div></div><div  class="row"><div class="col-md-3"><button type="button" class="btn btn-primary">原始按钮</button></div><div class="col-md-6">------------------------------------</div><div class="col-md-3"><button type="button" class="btn btn-primary">原始按钮</button></div></div></div><!-- Placed at the end of the document so the pages load faster --><script src="js/jquery.min.js"></script><script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script><script src="js/bootstrap.min.js"></script><!-- Just to make our placeholder images work. Don't actually copy the next line! --><script src="js/holder.min.js"></script><!-- IE10 viewport hack for Surface/desktop Windows 8 bug --><script src="js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

二、button设置id 样式

1、插入界面加载函数：

$(function(){})

2、把下面代码段中后面<script src="js/jquery.min.js"></script>这句话移到图中位置：

它的作用是：声明“$”符号
(因为页面布局是从上往下读代码，后面虽然声明了配置，但前面超前引用时显示为空)

3、设置button上的字体内容：

关键语句：

  <script src="js/jquery.min.js"></script><script type="text/javascript">$(function(){$("#button1").text("name")})</script>...略...<button id="button1" type="button" class="btn btn-primary">功能一</button>

4、设置button名称：

5、列表排列

关键代码：

  <ul class="nav nav-sildebar"><li><button type="button" class="btn btn-primary">原始按钮</button></li><li><button type="button" class="btn btn-primary">原始按钮</button></li></ul>

三、button点击事件

1、点击button1、2改变 div1的内容：

关键代码：

    $(function(){$("#button1").click(function(){$("#div1") .text("1111")    })$("#button2").click(function(){$("#div1") .text("2222")    })}).......略.......<div  class="row"><div class="col-md-6 col-sm-3"><!-- 功能列表 --><button id="button1" type="button" class="btn btn-primary">功能一</button>     <button id="button2" type="button" class="btn btn-primary">功能二</button>           </div><div class="col-md-6 col-sm-3" id="div1"></div></div>

2、引用一个新的页面

首先新建一个b1.jsp，在<body 中输入b1。
；回到test.jsp,编辑如下：

<iframe id="myFrameId" name="myFrameName" scrolling="no" frameborder="0"  width="800" height="800" src="b1.jsp"></iframe>

Day2实验全部源码：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用一下栅格布局</title>
</head><link href="css/bootstrap.min.css" rel="stylesheet"><link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet"><link href="css/dashboard.css" rel="stylesheet"><script src="js/ie-emulation-modes-warning.js"></script><!-- 移动过来 --><script src="js/jquery.min.js"></script><script type="text/javascript">$(function(){$("#button1").click(function(){$("#div1") .text("1111")    })$("#button2").click(function(){$("#div1") .text("2222")    })})</script>
<body  ><div class="container"><!-- 下午内容 --><div  class="row"><div class="col-md-6 col-sm-3"><!-- 功能列表 --><button id="button1" type="button" class="btn btn-primary">功能一</button>     <button id="button2" type="button" class="btn btn-primary">功能二</button>           </div><div class="col-md-6 col-sm-3" id="div1"><iframe id="myFrameId" name="myFrameName" scrolling="no" frameborder="0"  width="800" height="800" src="b1.jsp"></iframe></div></div><!-- 上午内容 ><div  class="row"><div class="col-md-6"><button type="button" class="btn btn-primary">原始按钮</button></div><div class="col-md-6"><button type="button" class="btn btn-primary">原始按钮</button></div></div><div  class="row"><div class="col-md-3"><button type="button" class="btn btn-primary">原始按钮</button></div><div class="col-md-6">------------------------------------</div><div class="col-md-3"><button type="button" class="btn btn-primary">原始按钮</button></div></div--></div><!-- Placed at the end of the document so the pages load faster --><script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script><script src="js/bootstrap.min.js"></script><!-- Just to make our placeholder images work. Don't actually copy the next line! --><script src="js/holder.min.js"></script><!-- IE10 viewport hack for Surface/desktop Windows 8 bug --><script src="js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

附上我们老师讲解时的样式文件：（其中404的是你未新建的页面）

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><meta name="description" content=""><meta name="author" content=""><title>功能分析</title></head><link href="css/bootstrap.min.css" rel="stylesheet"><link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet"><link href="css/dashboard.css" rel="stylesheet"><script src="js/ie-emulation-modes-warning.js"></script>
<script type="text/javascript">function changePage(w) {if(w == 1){document.getElementById("myFrameId").src ='b1.jsp'}else if(w == 2){document.getElementById("myFrameId").src ='b2.jsp'}else if(w == 3){document.getElementById("myFrameId").src ='b3.jsp'}else if(w == 4){document.getElementById("myFrameId").src ='b4.jsp'}else{document.getElementById("myFrameId").src ='b5.jsp'}
}</script><body><nav class="navbar navbar-inverse navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="https://v3.bootcss.com/examples/dashboard/#">舆情分析</a></div></div></nav><div class="container-fluid"><div class="row"><div class="col-sm-3 col-md-2 sidebar"><ul class="nav nav-sidebar"><li ><a href="javascript:changePage(1)"  >词云生成 </a></li><li><a href="javascript:changePage(2)"   >关键字统计</a></li><li><a href="javascript:changePage(3)"   >文件上传</a></li><li><a href="javascript:changePage(4)"   >审查结果展现</a></li><li><a href="javascript:changePage(5)"   >历史记录</a></li></ul></div><div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"><h1 class="page-header">舆情分析</h1><iframe id="myFrameId" name="myFrameName" scrolling="no" frameborder="0"  width="800" height="800" src="b1.jsp"></iframe></div></div></div><!-- Bootstrap core JavaScript================================================== --><!-- Placed at the end of the document so the pages load faster --><script src="js/jquery.min.js"></script><script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script><script src="js/bootstrap.min.js"></script><!-- Just to make our placeholder images work. Don't actually copy the next line! --><script src="js/holder.min.js"></script><!-- IE10 viewport hack for Surface/desktop Windows 8 bug --><script src="js/ie10-viewport-bug-workaround.js"></script>
</body></html>

[JavaWeb实训Day3]__button_框架布局点击事件相关推荐

东软JavaWeb实训记-DAY5-MyBatis框架+jsp传值+登录过滤器
1.Mybatis:jdbc操作数据库的封装持久化框架 a)创建 Mybatis 的配置文件: b)sql语句放入映射文件中 2.持久化 :把瞬时状态的数据和持久状态数据转换的机制瞬时状态:存放在 ...
[JavaWeb实训Day4]__jsoup爬虫(爬新闻页面)词云的生成( kumo库)
目录一.本次实验分析过程二.Jee连接MySQL数据库三.异步传值及界面设计四.jsoup爬虫爬取新闻网页五.新闻词云的生成( kumo库) 六.存入数据库快速链接:[JavaWeb项目实 ...
JavaWeb实训项目：基于SSM框架的CRM客户关系管理系统（文章最后有源码）
JavaWeb实训项目:基于SSM框架的CRM客户关系管理系统(附部分源码) 一.项目背景项目演示二.项目介绍三.涉及技术总结源码地址一.项目背景 "世上本来没有CRM,大家的生 ...
java web开发实训心得,【JavaWeb实训心得体会材料】
JavaWeb实训心得体会材料 <JavaWeb实训心得体会材料.doc>由会员分享,可免费在线阅读全文,更多与<JavaWeb实训心得体会材料>相关文档资源请在帮帮文库(ww ...
JavaWeb实训项目河南省旅游指南
1 基本信息 1.1 系统名称河南省旅游指南的设计与实现 1.2 开发运行环境 Window 10 64位 JDK 1.8.0 IDEA 2019版本 MySql 5.1.47 Tomcat 8.5 ...
c语言atm实训报告总体框架图,实训报告-ATM.doc
实训报告-ATM 河南理工大学计算机科学与技术学院实训报告 2009 - 2010学年第2学期课程名称 Java编程技术设计题目 ATM取款机学生姓名亢凯航学号 4109200101 ...
实训小结---Java框架学习心得
学习小结为期两个星期的实训结束了,在这两周的时间里,我学到了不少之前没有接触过的知识,这也是我第一次正式接触前端后端的开发.在学习开发的过程中,出现过不少问题,自己能够解决的.自己不能解决的都有,下 ...
实训班学员求职与唐骏事件引发的思考
缘起早晨某培训班的老师在群里宣传该班最近在网上免费开讲就业课程. 由此我想到去年的往事,有个实训班老师鼓励学生在简历里说谎作弊,不以为耻反以为荣,再联想起最近比较热的唐骏学历事件,于是催生了本文. ...
jQuery入门实操-css操作，鼠标点击事件，页面计算器
前言本文是学习jQuery中的一些实践,是jQuery入门的实操案例.更多语法可参考w3school的jQuery参考手册 jQuery是一个快速.简洁的JavaScript框架,是继Prototy ...

[JavaWeb实训Day3]__button_框架布局点击事件

目录

一、基于JavaScript框架布局

二、button设置id 样式

三、button点击事件

[JavaWeb实训Day3]__button_框架布局点击事件相关推荐

最新文章

热门文章