Respuesta: Object.extend() mas corto Concreto:
Mi problema es que hago esto:
var ClaseA = {
Create:function(url,Parm){
this.Parm = {
move: '10',
Default:'Convert',
Error: 'Ferror',
waitinterval:10
};
this.url = url || "";
this.Parm = Object.extend(this.Parm,Parm);
}
}
var obj = new ClaseA.Create('localhost',{move:'20',Default:'NN'} );
Si, este era uno de mis problemas y ya funciona como debería:
this.Parm = Object.extend(this.Parm,Parm);
2. Al efectuar la primera petición Ajax mediante obj todo funciona bien, la segunda vez lo que tenia move se me reinicia a 10 y debería permaneces en 20, (Por que? ). Y pensé que la solución podría estar extendiendo estas características a un nuevo objeto(Como una clonación- Por cierto, existe clonar para una etiqueta y es netamente compatible?)
Ahora, que si crean nuevas funciones javascript...puedan heredar lo que necesiten de la librería como métodos de crear ventanas, o validar campos...etc.
Mi archivo audAJX.js
La verdad, te paso algunas del AJAX:
Código:
var XMLHttpObject = [
function () {return new XMLHttpRequest()}, //Other
function () {return new ActiveXObject("Msxml2.XMLHTTP")}, //IE
function () {return new ActiveXObject("Msxml3.XMLHTTP")}, //IE
function () {return new ActiveXObject("Microsoft.XMLHTTP")} //IE
];
var auAJX = {
Create:function(url,Parm){//Definicion y configuración
url: '',
this.Parm = {
method: 'POST',
contentType:'application/x-www-form-urlencoded',
onComplete: HttpResp,
onSuccess: stateChange,
Paramt: '',
waitinterval:10,
asynchronous: true
};
this.url = url || "";
this.Parm = Object.extend(this.Parm,Parm);//Lo que tu agregaste
IE='\v'=='v'; //is IE
IEx=document.all?1:0; //is IE confirm
if(EstadoAjax!=1){ //Si esta disponible el servicio
try{
//...valida si existen las funciones definidas
}catch(exp){
alert('Error en la definición de parametros');
}
Invoca la petición al servidor...
Código:
//=================Initial:Server
try{
var xxmlhttp = false;
for (var i=0;i<XMLHttpObject.length;i++) {
try { xxmlhttp = XMLHttpObject[i](); }
catch (e) { continue; }
break;
}
if(this.xParm.method.toLowerCase()!='get'){var SndParm = this.xParm.Paramt;
}else{var SndParm=null; url = url+'?'+this.xParm.Paramt;}
//los procedimientos xmlhttp
ConnAJX.setRequestHeader('Content-Type',this.xParm.contentType); //Envio una cabecera
ConnAJX.send(SndParm); //falta escapar los caracteres
tiempo=setTimeout('ErrorConn()',this.xParm.waitinterval*1000);
}catch(err){
alert('MSG/Error de petición:'+err);
ResetOptions();
//============otras funciones...
function xVisible(idTag) {
var DTag = document.getElementById(idTag);
DTag.style.display=(DTag.style.display!='none')?'none':'';
}
String.prototype.replace = function(s1,s2){
return this.split(s1).join(s2);
};
function insertAfter(parent, node, referenceNode) {
parent.insertBefore(node, referenceNode.nextSibling);
}
function $() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
function ExtVlr(idobj){
var Cobj = document.getElementById(idobj);
var Mytag = Cobj.tagName.toLowerCase();
valor = (Mytag=='select')? Cobj.options[Cobj.selectedIndex].value:Cobj.name;
return valor;
}
y he temido que crear otros para cada componente:
Grid.js
DatePicker.js
CheckBox.js
Listbuttons.js
Window.js
MsgBox.js
...
scwLanguages.js
Formatos.js
y un CSS con los componentes generales
Código:
root {
display: block;
}
.ContTbl{
overflow:auto;
width:100%;
/*height:100%!important;*/
min-height:60px;
max-height:120px;
background-color:#fff;
border:1px solid #B5B8C8;
margin:2px;
}
/*Creo el estilo de la tabla*/
.Grid{
text-align:center;
width:100%;
background-color:#fff;
border:1px solid #ccc;
}
.Grid thead{
border-left:1px solid #fff;
width:100%;
}
.Grid tbody {
width:100%;
height:135px;
overflow-y:scroll;
overflow-x:hidden;
}
.tfooter {
color:#1C3D7C;
border-top:1px solid #99bbe8;
border-bottom:1px solid #99bbe8;
background: transparent url(images/grid/bg.gif) repeat-x 0 0;
margin: 0 auto;
padding:10px 0px 0px 0px; /*top top a h*/
font:bold Georgia, 'Times New Roman', Times, serif;
font-weight:bold;
height:16px;
}
.Grid th{
background: transparent url(images/grid/grid3-hrow.gif) repeat-x;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
height:25px;
#height:18px;
font-weight:bold;
}
.Grid tr{
height:15px;
}
.Grid tr:hover {
background: transparent url(images/grid/row-over.gif) repeat-x;
}
.Grid td{
padding-left: 6px;
padding-right: 6px;
padding-top: 5px;
padding-bottom: 5px;
border-left:1px solid #fff;
border-right:1px solid #fff;
height:15px;
border-top:1px solid #eee;
background-color:#fff;
}
/*
tr td:hover {
background:#F3F2ED;
}
tr:hover td {
background:#F8F8F8;
}*/
/*Fin del estilo tabla*/
#def_form input{
height:18px;
font-size: 12px;
font:bold Georgia, 'Times New Roman', Times, serif;
border:1px solid #6787b8;
padding:0;
}
textarea{
font-size: 12px;
font:bold Georgia, 'Times New Roman', Times, serif;
border:1px solid #6787b8;
padding:0;
}
select{
font-size: 12px;
font:bold Georgia, 'Times New Roman', Times, serif;
border:1px solid #B5B8C8;
padding:0;
margin:3px;
width:200px;
/*background: transparent url(images/text-bg.gif) repeat-x 0 0;*/
background: #fff url(images/text-bg.gif) repeat-x 0 0;
}
/*Date picker select*/
#scw select{
padding:0;
width:60px;
border:1px solid #B5B8C8;
}
/*Date picker Input submit*/
#scw input{
padding:0;
width:20px;
border:1px solid #1C3E7D;
background: #1C3E7D;
color:#fff;
}
.scwHead #scwHeadLeft{
background: url(images/Date/left-btn.gif) no-repeat;
cursor: pointer;
}
.scwHead #scwHeadRight{
background: url(images/Date/right-btn.gif) no-repeat;
cursor: pointer;
}
/*Date picker Input table*/
#scw table,tbody,th{
padding:0;
/*border-left:1px solid #fff;*/
background:url(images/window/hd-bg.gif) repeat-x 0 0 #1C3D7A;
}
#scw table,td{
background:#1C3D7A;
}
#scw thead,th{
color:#000;
background: #fff;
}
#scw iframe{
border:1px solid #fff;
}
/*Fin date picker*/
label:hover{
border-bottom:1px solid #6787b8;
border-top:1px solid #6787b8;
background: #BCD2EF;
padding-top:3px;
}
option:hover {
color : #333;
}
select:hover{
border:1px solid #87A1C5;
}
select:focus{
border:1px solid #1C3D7C;
}
/*Aplicar a todos los input text*/
textarea{
border:1px solid #B5B8C8;
margin-right:5px;
}
textarea:hover{
border:1px solid #87A1C5;
}
textarea:focus{
border:1px solid #1C3D7C;
}
input{
margin-left:4px;
}
input[type='submit'] {
margin-left:3px;
}
input[type='text'] {
border:1px solid #B5B8C8;
height:18px;
background: transparent url(images/text-bg.gif) repeat-x 0 0;
margin-top:2px;
}
input[disabled="disabled"] {
background: #eee;
}
input[type='text']:hover {
border:1px solid #87A1C5;
}
input[type='text']:focus {
border:1px solid #1C3D7C;
}
input[type='checkbox'] {
margin-left:5px;
height:15px;
}
input[type='checkbox']:focus {
border:1px solid #1C3D7C;
}
input[type='radio'] {
height:15px;
margin-top:3px;
margin-bottom:3px;
}
select[size='8'] {
width:100%;
}
.ColTbl{
background-color:#eee;
border-right:2px solid #fff;
border-bottom:1px solid #fff;
}
.Boton2{
margin-left:65%;
width:100px;
height:25px;
cursor:pointer;
}
#scwIE{
width:200px;
top:0px;
left:0px;
}
#Date1{
width:250px;
top:0px;
margin-left:52px;
}
#preload{
background:transparent url(images/Precarga_4.gif) no-repeat;
width:20px;
height:20px;
margin-left:10px;
margin-top:8px;
}
Barra.css
me crea una barra fija en la parte superior. Para opciones extra)
Código:
body { margin:0; padding:0; background-image:none; }
* html body { overflow:auto; }
#Fija { position:absolute; width:100%; z-index:2;
height:35px;
background:url(images/window/hd-bg.gif) repeat-x 0 0 #1C3D7A;
}
html>body #Fija { position:fixed; }
#Todo { position:absolute; top:0; left:0; width:100%; height:100%; overflow:auto; }
html>body #Todo { position:static; top:auto; left:auto; width:auto; height:auto; overflow:visible; }
#Todo p { margin:1em 1em 1em 120px; }
#Fija p { margin:0; padding:0; text-align:right; font-size:0.55em; }
.Volver { border-top:dotted #88A 3px; padding:0.5em 0; }
Reset.css
Código:
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,
cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,center,u,b,i{
margin:0;padding:0;border:0;outline:0;
font-weight:normal;font-style:normal;
font-size:100%;font-family:inherit;
vertical-align:baseline
}
body{line-height:1}
:focus {outline:0}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
blockquote:before,blockquote:after,q:before,q:after{content: ""}
blockquote,q{quotes: "" ""}
input,textarea{margin:0;padding:0}
hr{margin:0;padding:0;border:0;color:#000;background-color:#000;height:1px}
Última edición por SPAWN3000; 04/03/2009 a las 13:51 |