jQuery补充之jQuery扩展/form表单提交/滚动菜单
jQuery扩展
为了避免重复造轮子,能高效使用别人的代码,所以有了扩展.
jQuery扩展有两种方式:
- 自执行函数方式
- 定义函数,并执行函数.
自执行函数:
(function(jq){
jq.extend({
'dalong1': function(arg){
console.log(arg);
}
});
function f1(){
}
})(jQuery);
/*
a = function(jq){
jq.extend({
'dalong1': function(arg){
console.log(arg);
}
});
function f1(){
}
};
a(jQuery);
*/
定义函数并执行:
b = function(){
$.extend({
'dalong2': function(arg){
console.log(arg);
}
});
function f1(){
}
}
b();
如何使用jQuery扩展
很简单,就如导入jQuery插件一样,导入扩展文件即可:
<script src="jquery-1.12.4.js"></script>
<script src="extend1.js"></script>
<script>
$.dalong1('123');
</script>
form表单提交
表单提交时,需要确认input的值不为空,为空时下面的input不监测,中断循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.item{
width: 250px;
height: 60px;
position: relative;
}
.item input{
width: 200px;
}
.item span{
position: absolute;
top: 20px;
left: 0px;
font-size: 8px;
background-color: indianred;
color: white;
display: inline-block;
width: 200px;
}
</style>
</head>
<body>
<div>
<form>
<div class="item">
<input class="c1" type="text" name="username" label="用户名"/>
<!--<span>用户名不能为空</span>-->
</div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码"/>
<!--<span>密码不能为空</span>-->
</div>
<!--<input type="submit" value="提交" onclick="return CheckValid();" />-->
<input type="submit" value="提交" />
</form>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
// 当页面框架加载完成之后，自动执行
BindCheckValid();
});
function BindCheckValid(){
$('form :submit').click(function(){
//
$('form .item span').remove();
var flag = true;
$('form .c1').each(function () {
// 每一个元素执行次匿名函数
// this
//console.log(this,$(this));
var val = $(this).val();
if(val.length<=0){
var label = $(this).attr('label');
var tag = document.createElement('span');
tag.innerText = label + "不能为空";
$(this).after(tag);
flag = false;
return false;
}
});
return flag;
});
}
/* 第二种验证 */
function CheckValid(){
// 找到form标签下的所有需要验证的标签
// $('form .c1')
// $('form input[type="text"],form input[type="password"]')
// 循环所有需要验证的标签，获取内容
$('form .item span').remove();
var flag = true;
$('form .c1').each(function () {
// 每一个元素执行次匿名函数
// this
//console.log(this,$(this));
var val = $(this).val();
if(val.length<=0){
var label = $(this).attr('label');
var tag = document.createElement('span');
tag.innerText = label + "不能为空";
$(this).after(tag);
flag = false;
}
});
return flag;
}
</script>
</body>
</html>
滚动菜单
关键词:scrolltop 计算屏幕的高度和整个body的高度
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0px;
}
img {
border: 0;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.wrap{
width: 980px;
margin: 0 auto;
}
.pg-header{
background-color: #303a40;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.pg-header .logo{
float: left;
padding:5px 10px 5px 0px;
}
.pg-header .logo img{
vertical-align: middle;
width: 110px;
height: 40px;
}
.pg-header .nav{
line-height: 50px;
}
.pg-header .nav ul li{
float: left;
}
.pg-header .nav ul li a{
display: block;
color: #ccc;
padding: 0 20px;
text-decoration: none;
font-size: 14px;
}
.pg-header .nav ul li a:hover{
color: #fff;
background-color: #425a66;
}
.pg-body{
}
.pg-body .catalog{
position: absolute;
top:60px;
width: 200px;
background-color: #fafafa;
bottom: 0px;
}
.pg-body .catalog.fixed{
position: fixed;
top:10px;
}
.pg-body .catalog .catalog-item.active{
color: #fff;
background-color: #425a66;
}
.pg-body .content{
position: absolute;
top:60px;
width: 700px;
margin-left: 210px;
background-color: #fafafa;
overflow: auto;
}
.pg-body .content .section{
height: 500px;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="wrap clearfix">
<div class="logo">
<a href="#">
<img src="">
</a>
</div>
<div class="nav">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">功能一</a>
</li>
<li>
<a href="#">功能二</a>
</li>
</ul>
</div>
</div>
</div>
<div class="pg-body">
<div class="wrap">
<div class="catalog">
<div class="catalog-item" auto-to="function1"><a>第1张</a></div>
<div class="catalog-item" auto-to="function2"><a>第2张</a></div>
<div class="catalog-item" auto-to="function3"><a>第3张</a></div>
</div>
<div class="content">
<div menu="function1" class="section" style='background-color:green;'>
<h1>第一章</h1>
</div>
<div menu="function2" class="section" style='background-color:yellow;'>
<h1>第二章</h1>
</div>
<div menu="function3" class="section" style='background-color:red;'>
<h1>第三章</h1>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
// 自动执行
Init();
});
function Init(){
$(window).scroll(function() {
// 监听窗口滚动事件
// 获取滚动条高度
var scrollTop = $(window).scrollTop();
// 当滚动到50像素时，左侧带菜单固定
if(scrollTop > 50){
$('.catalog').addClass('fixed');
}else{
$('.catalog').children().removeClass('active');
$('.catalog').removeClass('fixed');
}
// 循环所有的内容
$('.content').children().each(function(){
// 当前标签距离顶部高度
var offSet = $(this).offset(); // 高度，左边有多远
// offSet.top
// offSet.left
// 自身高度
var height = $(this).height();
//offSet<滚动高度<offSet+height
// 当前内容位于用户阅览区
if(scrollTop>offSet.top && scrollTop< offSet.top + height){
// $(this) 当前内容标签
/*
var target = $(this).attr('menu');
$('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
return false;
*/
var docHeight = $(document).height();
var winHeight = $(window).height();
// 如果，滚轮到达底部，则显示最后一个菜单
if(docHeight == winHeight+scrollTop)
{
$('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active');
}else{
var target = $(this).attr('menu');
$('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
}
return false;
}
});
});
}
</script>
</body>
</html>
jQuery补充之jQuery扩展/form表单提交/滚动菜单的更多相关文章
- jQuery 实现最简单的form表单提交 Loding 功能
<html> <head><title></title></head> <body> <form name="e ...
- jQuery Form 表单提交插件-----formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的 应用
一.jQuery Form的其他api 1. formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...
- jQuery Form 表单提交插件----Form 简介，官方文档，官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- Checkbox框全选操作，form表单提交与jquery ajax提交两种处理方式
//1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...
- Jquery来对form表单提交（mvc方案）
来自:http://www.cnblogs.com/lmfeng/archive/2011/06/18/2084325.html 我先说明一下,这是asp.net mvc 里面的用法, Jquery来 ...
- jQuery判断 form表单提交时一些文本框的判断
一: form表单提交时如果表单里有input标签为空那么不提交form表单. <head> <script type="text/javascript"> ...
- 通过jquery实现form表单提交后不跳转页面，保留当前页面
jquery代码: <script type="text/javascript" src="../js/jquery-1.8.3.min.js">& ...
- jquery模拟form表单提交并新打开页面
/** * form表单提交本页面打开 * @param url * @param params */ function postCurrent(url,params){ var form = $(& ...
- ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
随机推荐
- 【基础搜索】poj-2676-Sudoku（数独）--求补全九宫格的一种合理方案
数独 时限:2000 MS 内存限制:65536K 提交材料共计: 22682 接受: 10675 特别法官 描述 数独是一个非常简单的任务.一个9行9列的正方形表被分成9个较小的3x ...
- plus代码闪光点
1. 快速变成 String 格式: { stamp: +new Date() } 2. 封装axios请求: axios.get(this.URI, { params: { }, withCrede ...
- Vmware Pro 14报错：无法连接 MKS: 套接字连接尝试次数太多；正在放弃。
软件环境: 虚拟机软件:VMware Pro 14 母机操作系统:win7 客户机操作系统:CentOS 7 问题详情: 报错:无法连接 MKS: 套接字连接尝试次数太多:正在放弃. ...
- 并发编程:Thread和Runable-01
1.继承Thread类(不推荐) 代码很简单,就不说了 public class ThreadTest02 { public static void main(String[] args) { n ...
- 一个 介绍 superset Kylin 以及大数据生态圈的 博文
superSet http://superset.apache.org/installation.html https://segmentfault.com/a/1190000005083953 ht ...
- 009——C#全局变量定义
(一)窗体二定义,static静态 public static byte[] waveform_data = { }; // 数据,在串口接收中变化 public static bool wavefo ...
- 使用webuploader实现大文件上传
javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求 1.通过form表单向后端发送请求 <form id=" ...
- bzoj 4319: cerc2008 Suffix reconstruction 贪心
如果字符集无限大的话直接按照 $sa$ 的顺序依次填即可. 由于字符集非常小,所以要尽量填相同的字符. 我们知道 $sa$ 数组,也就知道了 $rank$ 数组. 那么考虑添加排名为 $i$ 的字符: ...
- 使用Keras训练神经网络备忘录
小书匠深度学习 文章太长,放个目录: 1.优化函数的选择 2.损失函数的选择 2.2常用的损失函数 2.2自定义函数 2.1实践 2.2将损失函数自定义为网络层 3.模型的保存 3.1同时保持结构和权 ...
- django项目部署上线 nginx + uwsgi
一.安装python3 安装步骤:https://www.cnblogs.com/zhangqigao/p/11661875.html 二.修改django中的配置文件 修改settings.py ( ...