JS学习笔记相关代码-测试代码
JS学习笔记相关文档 Login.html学习 placeholder 属性规定可描述输入字段预期值的简短的提示信息(比如:一个样本值或者预期格式的短描述)。 该提示会在用户输入值之前显示在输入字段中。 注意:placeholder 属性适用于下面的 input 类型:text、search、url、tel、email和password。 测试样例参见test/placeholder.html 局部刷新 class="toolbar clearfix" ToolBar 隐藏掉系统原先的导航栏 clearfix 主要是用在浮动层的父层,而 clear 主要是用在浮动层与浮动层之间,和浮动层同一级,如果想要撑开父层的高度,clear 就要放在最后。 Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 如果需要引用该插件功能,需要引入modal.js OR bootstrap.js OR bootstrap.min.js 用法:通过 data 属性在控制器元素(比如按钮或者链接)上设置属性data-toggle="modal",同时设置 data-target="#identifier"或href="#identifier"来指定要切换的特定的模态框(带有 id="identifier")。 测试样例参见test/Modal.html function($) javascript中(function($){...})(jQuery)写法是指的是是匿名函数。 function(arg){...}这也定义了一个匿名函数,参数为arg。 测试样例参见test/AnonymousFunction.html .navbar-fixed-top使导航条固定在顶部 Index.html学习 Font Awesome 图标 Font Awesome 是一套绝佳的图标字体库和CSS框架。 Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。 如果需要该插件功能,需要引入font-awesome.css OR font-awesome.min.css <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> </head> <body> <i class="fa fa-car"></i> <i class="fa fa-car" <i class="fa fa-car" </body> </html> 测试样例参见test/tubiao.html 1、列表图标 <ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List icons</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li> <li><i class="fa-li fa fa-square"></i>List icons</li> </ul> 2、动态图标 <i class="fa fa-spinner fa-spin"></i> <i class="fa fa-circle-o-notch fa-spin"></i> <i class="fa fa-refresh fa-spin"></i> <i class="fa fa-cog fa-spin"></i> <i class="fa fa-spinner fa-pulse"></i> 3、旋转和翻转的图标 <i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180"></i> <i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class="fa fa-shield fa-flip-vertical"></i> 4、图标抖动√ <!-- 测试图标抖动--> 测试<i class="ace-icon fa fa-envelope icon-animated-vertical"></i> <p> 经测试:图标抖动与bootstrap.min.css;font-awesome.min.css;ace.min.css相关联</p> 测试样例参见test/tubiao2.html PS:fa-angle-double-down双箭头向下指示的图标,展开操作时用。 任务折叠+进度控制 主要是li标签的循环嵌套,浮于上层的列表需要引入jquery-2.1.4.min.js,bootstrap.min.js以使用dropdown等属性实现展开与折叠特性 进度控制, 除了使用<div class="progress-bar progress-bar-success"></div>直接控制进度条的长度外,还可以使用如下功能: <progress value="50" max="100"></progress>以实现进度条的变更控制,从后台获取数据,并计算其百分比并显示在前端。 分别使用progress-bar,progress-bar-warning,progress-bar-danger,progress-bar-success表示其安全与否等级。 测试样例分别参见test/liTag.html, test/progress.html 评论与回复 评论区的滚动:设置定量高度,在文字被排满的情下,自动加入滚动条 <div class="test"></div> <input type="text" id="test"/><input type='button' value='提交' [removed] function fun(){ var str = document.getElementById("test").value; var divs = document.getElementsByTagName("div"); for(i=0;i<divs.length;i++){ if(divs[i].className == "test"){ divs[i][removed] += "" +str+"</br>"; } }} [removed] 可实现评论提交功能。 也可通过与后台交互的方式,如发送post请求,提交给后台,后台审核通过后,通过servlet机制再传送给前端。 测试样例分别参见test/comment.html, test/comment2.html
- 1
- 2
- 3
- 4
- 5
- 粉丝: 6
- 资源: 10
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C# 西门子S7 TCP协议客户端设计工程源码带注释,开源dll文件,包括打包完的安装包
- 电网行测冲刺讲义-学生版-纯图版
- 基于磁链锁相环控制的双向逆变器Simulink仿真,无需 电压采样进行锁相控制
- 工程管理:长沙理工大学2021级工程造价咨询综合实践指导-课程设计实施方案及细则
- 黑龙江省各市、县、区及街镇网页版SVG图
- json-c-0.17.tar.gz
- 前端全套面试题资料,包含js、css、vue等相关资料
- C#上位机 APP监控西门子S7-1200 C#全套源代码 1,C#开发上位机手机APP,自己写的程序可提供部分 2,通过VS2019开发安卓手机app 3,全套源代码,现场运行设备实测有效 4
- 综合能源耦合微网优化程序matlab 程序基于冷热电联供综合能源耦合模型,采用cchp,并且含有压缩空气储能,采用粒子群优化求解
- 2025电网行测基础讲义-学生版-纯图版
- chromedriver-win64_133.0.6939.0.zip
- chromedriver-win64_133.0.6941.0.zip
- FOC电机控制,一份基于国产风机量产程序,包含龙博格电机状态观测器,SVPWM,顺逆风启动,五段式与七段式调制等源码,完全可以移植到别的MCU平台 适合电机算法研究
- chromedriver-win64_133.0.6943.2.zip
- chromedriver-win64_133.0.6942.0.zip
- chromedriver-win64_133.0.6943.0.zip