模仿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%;
}
点击前的效果：
点击之后的效果：
