模仿jquery的一些实现
wylUtil.js
//w作为window的形参，就表示window
(function(w) { // 定义一个全局的window.wyl变量，就类似于jquery里的$，Jquery对象
w.wyl;
/**
* 模仿$(domObj)的形式，通过wyl(domObj)的方式把一个dom转成wyl对象
*
* @param para
* @returns {wyl} 这里的selector暂时只能是dom对象
*/
wyl = function(selector) {
this._selector = selector;
if (this == window) {
// 我自己原来写的
// return this.wyl;
return new wyl(selector);
} else {
// 根据name获取dom
var dom_ = document.getElementsByName('' + selector);
/**
* 根据 document.getElementsByName('' +selector);的形式获取到的dom对象
* 有length属性，而通过getElementById获取的dom对象没有length属性
*
*/
if (dom_.length) {
alert(dom_.length);
} else {
alert(dom_.innerHTML + '目前这个框架只能通过传入name属性来使用，无法通过id来解析dom对象');
} var wyl_arr = [];
for (var i = 0; i < dom_.length; i++) {
wyl_arr.push(dom_.item(i));
}
// 作用：返回当前对象，即返回window.wyl这个对象
// return this;
var this_ = [].push.apply(this, wyl_arr);
// 注意这里返回的不是this_而是this
return this;
} }
// wyl.prototype.isArr的作用：在所有的wyl对象上加上isArr(para)的function，
wyl.prototype.isArr = wyl.isArr = function(para) {
/**
* 在wyl对象上添加工具方法isArr(obj) 实例：var flag = wyl.isArr(obj); 如果为true那么就说明是数组
*/
if (typeof para == 'object' && para instanceof Array) {
return true;
} else {
return false;
}
} /**
* 实现类似框架中的linkbutton()功能的方法 框架中的使用实例： $obj.linkbutton({ disabled:true });
*
*/
wyl.prototype.print = wyl.print = function(para) {
alert(para);
return this;
} wyl.prototype.linkbutton = wyl.linkbutton = function(para) {
var _type = typeof para;
if (_type != 'object') {
return this.print('传入的参数必须是object');
}
// 存放传入的obejct类型的参数
var para_ = para || {};
var f = para_.disabled;
if (f == true) {
$(this).removeClass();
$(this).addClass('l-btn-disabled');
return this;
} else {
$(this).removeClass();
$(this).addClass('l-btn-abled');
return this;
}
} // 传入window对象
})(window)
html:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://www.wyl.suneyaee" prefix="Wyl"%>
<!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>Insert title here</title>
<link href="<%=request.getContextPath()%>/js/ui/default.css"
rel="stylesheet" type="text/css">
</head>
<body>
<Wyl:getIP />
<br>
<input type="button" id="btn" name="btnn" value="我是保存按钮，点我1!"
onclick="testjquery(this);">
<input type="button" id="btn2" name="btnn" value="我是保存按钮，点我2!"
onclick="testjquery(this);">
<input type="button" id="btn3" name="btnn" value="我是保存按钮，点我3!"
onclick="testjquery(this);">
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/wylUtil.js"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/jquery.js"></script>
<script type="text/javascript">
function testjquery(para) {
/* var arr = new Array();
arr.push('abc');
arr.push(1234);
var a = wyl.isArr(arr);
var k = new wyl('mm');
alert('arr是否为数组：' + a);
var flag = k.isArr(arr);
alert('flag是否为数组：' + flag); */
//removeClass('l-btn-plain');
//addClass('xxx');通过给按钮添加样式结合引入的default.css这个css样式来实现按钮失效的视觉效果，
/* $(para).attr('onclick', null).addClass('l-btn-disabled'); */
//测试wylUtil.js的linkbutton方法
//linkbutton({disabled:false});
var _wyl_obj = wyl('btnn');
var opts = {
disabled : true
};
_wyl_obj.linkbutton(opts);
}
</script>
</body>
</html>
default.css:
body{
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
overflow-x:auto;
overflow-y:auto;
font-size:12px;
font-family:微软雅黑,宋体;
background-color:white;
}
p {
margin: 4px,auto;
}
form {
margin:0px;
}
body,div{
scrollbar-face-color: #C2E2FB;
scrollbar-highlight-color: #D1D7DC;
scrollbar-shadow-color: #98AAB1;
scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #EFEFEF;
}
a,table,td,tr,input,select,span,div,textarea,p{
font-size:12px;
font-family:微软雅黑,宋体;
}
/*FRAME上的导航栏 background-color:#dcdfe5;*/
.navigator{
position:absolute;
height:25px;
top:0px;
z-index:9900000;
width:100%;
background:#fafafa url('images/navigator_bg.gif');
}
.navigator_table{
padding-top:4px;
width:100%;
height:20px;
}
/*页面上导航栏*/
.content_navigator{
display:none;
width:100%;
background:#dcdfe5;
}
/*单记录表格背景*/
.dataTable{
background-color:white;
}
/*用于单记录表格*/
.fieldset {
border:#A6C9F7 1px solid;
}
/*用于多记录表格*/
.fieldset2 {
border:white;
}
.fieldset3 {
border:#A6C9F7 1px solid;
padding-top:4px;
padding-bottom:4px;
}
.tablediv{
display:block;
padding:4px,4px;
background-color:white;
}
.legend{
}
/*单记录表-信息单元格*/
.tdprompt{
text-align:right;
height:21px;
}
/*单记录表-录入单元格*/
.tdinput{
padding-left:5px;
padding-right:2px;
background-color:white;
height:21px;
text-align:left;
}
/*单记录表-信息单元格-必录项*/
.tdprompt_n{
text-align:right;
height:21px;
color:blue;
}
/*单记录表-信息单元格-基础项*/
.tdprompt_sn{
text-align:right;
height:21px;
color:#be0101;
}
/*文件上传*/
.filebox{
border: #B5B8C8 1px solid;
color: #000000;
width:100%;
height:21px;
background-color:white;
}
/*提示信息框*/
.labelbox{
text-align:center;
color: #000000;
width:100%;
}
/*单行文本输入框*/
.textbox{
border: #B5B8C8 1px solid;
color: #000000;
width:100%;
height:21px;
background-color:white;
}
/*银行账号输入文本，与textbox一样*/
.bankaccount{
border: #B5B8C8 1px solid;
color: #000000;
width:100%;
height:21px;
background-color:white;
}
/*单行文本输入框-不允许拷贝复制*/
.notpastebox{
border: #B5B8C8 1px solid;
color: #000000;
width:100%;
height:21px;
background-color:white;
}
/*快速检索列表-输入框*/
.searchgridbox{
border: #B5B8C8 1px solid;
color: #000000;
width:100%;
height:21px;
background-color:white;
}
/*下拉框*/
.combobox{
border: #B5B8C8 1px solid;
color: #000000;
width:100%;
background-color:white;
}
/*可录入下拉框*/
.incombox{
border: #B5B8C8 1px solid;
color: #000000;
width:100%;
background-color:white;
}
/*可录入远程查询下拉框*/
.dbcombox{
border: #B5B8C8 1px solid;
color: #000000;
width:100%;
background-color:white;
}
/*联动下拉框*/
.ldcombox{
border: #B5B8C8 1px solid;
color: #000000;
width:100%;
background-color:white;
}
/*证件号码下拉框*/
.zjcombox{
border: #B5B8C8 1px solid;
color: #000000;
width:100%;
background-color:white;
}
/*证件号码输入框*/
.zjtextbox{
border: #B5B8C8 1px solid;
color: #000000;
width:100%;
height:21px;
background-color:white;
}
/*日期输入框*/
.datebox{
border: #B5B8C8 1px solid;
color: #000000;
width:100%;
height:21px;
background-color:white;
}
/*日期以及时间输入框*/
.datetime{
border: #B5B8C8 1px solid;
color: #000000;
width:100%;
height:21px;
background-color:white;
}
/*单行文本-数值输入框*/
.numberbox{
border: #B5B8C8 1px solid;
color: #000000;
width:100%;
height:21px;
background-color:white;
text-align:right;
padding-right:5px;
ime-mode:disabled;
}
/*单行文本-浮点型输入框*/
.floatbox{
border: #B5B8C8 1px solid;
color: #000000;
width:100%;
height:21px;
background-color:white;
text-align:right;
padding-right:5px;
ime-mode:disabled;
}
/*单行文本-中文输入框*/
.chinessbox{
border: #B5B8C8 1px solid;
color: #000000;
width:100%;
height:21px;
background-color:white;
}
/*单行文本-年月输入框*/
.yearmonthbox{
border: #B5B8C8 1px solid;
color: #000000;
width:100%;
height:21px;
background-color:white;
}
/*单行文本-时分秒输入框*/
.timebox{
border: #B5B8C8 1px solid;
color: #000000;
width:100%;
height:21px;
background-color:white;
}
/*单行文本-邮政编码输入框*/
.postbox{
border: #B5B8C8 1px solid;
color: #000000;
width:100%;
height:21px;
background-color:white;
}
/*单行文本-电话号码输入框*/
.phonebox{
border: #B5B8C8 1px solid;
color: #000000;
width:100%;
height:21px;
background-color:white;
}
/*单行文本-身份证号码输入框*/
.idcardbox{
border: #B5B8C8 1px solid;
color: #000000;
width:100%;
height:21px;
background-color:white;
ime-mode:disabled;
}
/*多行文本输入框*/
.textareabox{
border: #B5B8C8 1px solid;
color: #000000;
width:100%;
background-color:white;
}
/*按钮的样式*/
a.buttonlink2 {
text-align: center;
background-position: center center;
height: 20px;
cursor: hand;
padding-top:2px;
padding-left:20px;
padding-right:20px;
word-spacing: 6px;
text-decoration: none;
background-image: url(images/button.gif);
border:#7b9ebd 1px solid;
margin-right:5px;
}
a.buttonlink2:link {
color: #5e78bd; text-decoration: none
}
a.buttonlink2:visited {
color: #5e78bd; text-decoration: none
}
a.buttonlink2:active {
color: #5e78bd; cursor: hand; text-decoration: none
}
a.buttonlink2:hover {
color: #003aa3;
text-decoration: none;
background-image: url(images/button_d.gif);
}
a.fdj{
height:16px;
width: 16px;
text-align: center;
background-image:url(images/search.png);
opacity:0.6;
filter:alpha(opacity=60);
}
a.fdj:hover {
opacity:0.8;
filter:alpha(opacity=80);
}
.erroricon{
background:url(images/error.gif) no-repeat 3px 3px;
width:40px;
height:40px;
overflow:hidden;
display:inline-block;
}
.errortitle{
height: 26px;
font-size: 15px;
color: black;
padding-top:1px;
padding-left:10px;
text-align: left;
vertical-align: middle;
background-image: url(images/msg_title_bg.gif);
}
.infoicon{
background:url(images/info.gif) no-repeat 3px 3px;
width:40px;
height:40px;
overflow:hidden;
display:inline-block;
}
.infotitle{
height: 26px;
font-size: 15px;
color: black;
padding-top:1px;
padding-left:10px;
text-align: left;
vertical-align: middle;
background-image: url(images/msg_title_bg.gif);
}
.succicon{
background:url(images/succ.gif) no-repeat 3px 3px;
width:40px;
height:40px;
overflow:hidden;
display:inline-block;
}
<!-- 首页的样式 -->
.blank_td_title{
padding-left:5px;
width:100%;
border:1px solid #ccc;
background-image:url(images/list_title_bg1.gif);
}
.blank_td_title2{
padding-left:5px;
width:100%;
border:1px solid #ccc;
background-image:url(images/list_title_bg2.gif);
}
.blank_td_content{
padding-left:5px;
width:100%;
cursor:hand;
border:1px solid #ccc;
}
.blank_td_content-over{
background:white;
color:gray;
}
.err_message_blank_board{
display:block;
position:absolute;
top:10px;
z-index:97;
right:10px;
max-width:768px%;
}
/*单条错误消息的样式*/
.err_message{
display:block;
position:relative;
z-index:99;
float:right;
clear:both;
height:16;
border:1 solid #FB7C46;
color: #000000;
background:#F3E26D;
}
/*快捷按钮样式*/
.menu_btn{
padding-left:5px;
padding-right:5px;
}
/*工作流引擎样式*/
.act{
width:120px;
border: 1px solid red;
margin: 6px;
text-align: center;
border: #A6C9F7 1px solid;
float: left;
}
.actTitle {
width:120px;
height:20px;
font-weight:bold;
margin: 2px;
background-color:#EEF1F7;
}
.orgSelect{
width:120px;
margin: 2px;
}
.accepter {
width:120px;
margin: 2px;
text-align:left;
}
.accepter select {
background-color:#FFF;
}
.wfDialogBtn{
width:100%;
text-align:right;
clear: both;
}
.div_wf {
text-align: center;
}
.chooseSelf a{
text-decoration: none;
}
.wftextarea{
border: #B5B8C8 1px solid;
color: #000000;
background-color:white;
}
.wf_btn{
color: blue!important;
}
/*linkbutton 主要是多记录表单的翻页栏用到*/
a.l-btn{
color:black;
background:url('images/button_a_bg.gif') no-repeat top right;
font-size:12px;
text-decoration:none;
display:inline-block;
zoom:1;
height:21px;
padding-right:17px;
cursor:pointer;
outline:none;
}
a.l-btn-plain{
background:transparent;
padding-right:5px;
border:1px solid transparent;
_border:0px solid #efefef;
_padding:1px 6px 1px 1px;
}
a.l-btn-disabled{
color:#9A1818;
opacity:0.5;
filter:alpha(opacity=50);
cursor:default;
}
/*
20160811添加添加
*/
.l-btn-disabled{
color:#579EBC;
opacity:0.5;
filter:alpha(opacity=50);
cursor:default;
}
/*
#E61A5F ：粉色
*/
.l-btn-abled{
color:#E61A5F;
opacity:0.5;
filter:alpha(opacity=50);
cursor:default;
}
a.l-btn span.l-btn-left{
display:block;
background:url('images/button_span_bg.gif') no-repeat top left;
padding:4px 0px 4px 18px;
line-height:13px;
}
a.l-btn-plain span.l-btn-left{
background:transparent;
padding-left:5px;
}
a.l-btn span span.l-btn-text{
display:inline-block;
height:14px;
line-height:14px;
padding:0px;
}
a.l-btn span span span.l-btn-empty{
display:inline-block;
padding:0px;
width:16px;
height:16px;
}
a:hover.l-btn{
background-position: bottom right;
outline:none;
}
a:hover.l-btn span.l-btn-left{
background-position: bottom left;
}
a:hover.l-btn-plain{
border:1px solid #7eabcd;
background:url('images/button_plain_hover.png') repeat-x left bottom;
_padding:0px 5px 0px 0px;
}
a:hover.l-btn-disabled{
background-position:top right;
}
a:hover.l-btn-disabled span.l-btn-left{
background-position:top left;
}
a.l-btn:active {color:blue;font-weight: bold}
input.focus,textarea.focus,select.focus{
/*border-color:red;
border-width: 1px;
border-style:outset; */
background-color: #FDFDBD;
}
input.readOnly,textarea.readOnly,select.readOnly{
background-color: #F0F0F0;
/*border-bottom-style:hidden;
border: 0;*/
}
input.valueInvalide,textarea.valueInvalide,select.valueInvalide{
background:#FFFFCC;
border:1px solid #FC0101;
}
/*批量单选按钮和多选按钮的表格布局样式*/
table.inputSet{
width:100%;
}
点击前的效果：
点击之后的效果：
模仿jquery的一些实现的更多相关文章
- js模仿jquery里的几个方法parent, parentUntil, children
有时工作需要, 也是接着上一章的方法, 用js模仿jquery里的几个方法parent, parentUntil, children. function parent(node){ return no ...
- Ajax学习（二）：模仿jQuery的Ajax封装工具
通过上一节的学习,基本了解Ajax的使用, 但是这样使用很麻烦,这里封装ajax为一个方法,作为一个ajax工具,传入相应参数就可以实现ajax的使用. 模仿jQuery的Ajax. 如下是jQuer ...
- 模仿JQuery封装ajax功能
需求分析 因为有时候想提高性能,只需要一个ajax函数,不想引入较大的jq文件,尝试过axios,可是get方法不支持多层嵌套的json,post方式后台接收方式似乎要变..也许是我不太会用吧..其实 ...
- JavaScript自己模仿jQuery的一点小代码
function seter(sId) { var obj = document.getElementById(sId); return new function () { ...
- 用原生js模仿jquery
阅读声明:本文档仅供学习,由于个人能力有限,文档中有错漏的地方还请指出,大家共同学习. 目前在学习怎么样写jquery,模仿阶段,有兴趣的同学可以和我一起学习,共同交流,在学习的路上希望有你做伴. 在 ...
- 模仿jquery的一些实现 第二版
具体如下: //w作为window的形参,就表示window (function(w) { // 定义一个全局的window.wyl变量,就类似于jquery里的$,Jquery对象 w.wyl; / ...
- 模仿jQuery的filter方法
对这类方法挺感兴趣的,因为方法的回调函数的返回值和jQuery变量好像没有什么关系.看了filter方法的源代码后,我就模仿了这个方法,自定义两个jQuery方法:some和every,类似于ES5新 ...
- 模仿jquery的data
jquery中,有这个方法 var obj = {}; $.data(obj,'name','jake'); console.info($.data(obj,'name')); console.inf ...
- Android模仿jquery异步请求
01 package com.xbl.task; 02 03 import java.io.BufferedReader; 04 import java.io.InputStream; 05 im ...
随机推荐
- extjs 4.0.7 Desktop 替换claaes.js
最近在学习Extjs 发现Demo 中有个Desktop的于是就尝试学习一下.结果发现怎么改都没效果后来偶然发现 默认采用的是classes.js 为压缩后的js 引入已经修改后的分开的js瞬间 一切 ...
- SPOJ 7258 Lexicographical Substring Search（后缀自动机）
[题目链接] http://www.spoj.com/problems/SUBLEX/ [题目大意] 给出一个字符串,求其字典序排名第k的子串 [题解] 求出sam上每个节点被经过的次数,然后采用权值 ...
- Highlight On Mouseover Effect With JQuery
How to get the xpath by clicking an html element How to get the xpath by clicking an html element Qu ...
- Asp.net MVC中关于@Html标签的使用
@Html帮助器简单说明,记录些基本的跟HTML中对应的@html帮助器,@Html基本包含了html中的表单控件和常用Html 在@Html中,带有For的主要是针对强类型的Html类型. 用于说明 ...
- 杭州电子科技大学Online Judge 之 “确定比赛名次（ID1285）”解题报告
杭州电子科技大学Online Judge 之 "确定比赛名次(ID1285)"解题报告 巧若拙(欢迎转载,但请注明出处:http://blog.csdn.net/qiaoruozh ...
- Android内存泄漏分析及调试
尊重原创作者,转载请注明出处: http://blog.csdn.net/gemmem/article/details/13017999 此文承接我的另一篇文章:Android进程的内存管理分析 首先 ...
- tomcat 部署web项目异常
项目部署到Tomcat报这样的异常:validateJarFile jar not loaded. See Servlet Spec 2.3, section 9.7.2. Offending cla ...
- ECharts的使用相关参考---转
ECharts图表组件初级入门之(一):如何将ECharts引入至项目中的几种方式 http://www.stepday.com/topic/?801 ECharts图表初级入门篇:如何配置EChar ...
- AOP annotation
1.xml文件 <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http ...
- mapreduce 关于小文件导致任务缓慢的问题
小文件导致任务执行缓慢的原因: 1.很容易想到的是map task 任务启动太多,而每个文件的实际输入量很小,所以导致了任务缓慢 这个可以通过 CombineTextInputFormat,解决,主要 ...