New Topic/Question
Reply
NOTE - This is not by any means meant to replacee jQuery, they have had more time spend in making their library, this is meant as a training thing that some people may find useful.
One of my general philosophies is to allow the developer as much leeway as possible. I don't want to force you to rename my library to use it (if you want) along side jQuery, so I went through and added a flag for whether or not you want to allow jQuery usage with the $ variable or not.
Without further ado, here is the source (so far):
var useInConjunctionWithJQuery = false;
//Required functions to get elements from the document
document.getElementsByClassName = function(tagName, className){
var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
var allElements = document.getElementsByTagName((tagName!='')?tagName:"*");
var results = [];
var element;
for(var i = 0; (element = allElements[i]) != null; i++){
var eClass = element.className;
if(eClass && eClass.indexOf(className) != -1 && hasClassName.test(eClass)){
results.push(element);
}
}
return results;
}
document.getElementsByName = function(tagName, Name){
var allElements = document.getElementsByTagName((tagName!='')?tagName:"*");
var results = [];
var element;
for(var i = 0; (element = allElements[i]) != null; i++){
var eName = element.name;
if(eName == Name){
results.push(element);
}
}
return results;
}
document.getElementsByID = function(tagName, ID){
var allElements = document.getElementsByTagName((tagName!='')?tagName:"*");
var element;
var results = [];
for(var i = 0; i<allElements.length; i++){
element = allElements[i];
var eId = element.id;
if(eId && eId == ID){
return element; // can modify easily to return an array or elements with the specified ID
//results.push(element);
}
}
return results.length<=0?null:results;
}
// start of library
jBeta = function(info){
var obj;
var parts;
if(info.split('.').length > 1){ // class
parts = info.split('.');
obj = document.getElementsByClassName(parts[0], parts[1]);
}
else if(info.split(':').length > 1){
parts = info.split(':');
obj = document.getElementsByName(parts[0], parts[1]);
}
else if(info.split('#').length > 1){
parts = info.split('#');
obj = document.getElementsByID(parts[0], parts[1]);
}
else{
obj = document.getElementsByTagName(info);
}
return (obj!=null)?(new $.Item(obj)):null;
}
jBeta.Item = function(obj){
this.data = obj;
this.getStyle = function(styleLookup){
returnValue = null;
if(this.data.length > 0){
for(var i=0; i<this.data.length; i++){
if(returnValue == this.data[i].style[styleLookup] && returnValue != null && i>0){
}
else if(returnValue == null){
returnValue = this.data[i].style[styleLookup];
}
else{
return '_mixed_';
}
}
}
else{
returnValue = this.data.style[styleLookup];
}
return returnValue;
};
this.getProperty = function(propertyLookup){
returnValue = null;
if(this.data.length > 0){
for(var i=0; i<this.data.length; i++){
if(returnValue == this.data[i][propertyLookup] && returnValue != null && i>0){
}
else if(returnValue == null){
returnValue = this.data[i][propertyLookup];
}
else{
return '_mixed_';
}
}
}
else{
returnValue = this.data[propertyLookup];
}
return returnValue;
}
this.show = function(){
if(this.data.length > 0){
for(var i=0; i<this.data.length; i++){
this.data[i].style.display = '';
}
}
else{
this.data.style.display = '';
}
};
this.hide = function(){
if(this.data.length > 0){
for(var i=0; i<this.data.length; i++){
this.data[i].style.display = 'none';
}
}
else{
this.data.style.display = 'none';
}
};
this.addEventListener = function(evt, func){
if(this.data.length > 0){
for(var i=0; i<this.data.length; i++){
this.data[i][evt] = func;
}
}
else{
this.data[evt] = func;
}
};
this.clearClass = function(){
if(this.data.length > 0){
for(var i=0; i<this.data.length; i++){
this.data[i].className = '';
}
}
else{
this.data.className = '';
}
};
this.setClass = function(className){
if(this.data.length > 0){
for(var i=0; i<this.data.length; i++){
this.data[i].className = className;
}
}
else{
this.data.className = className;
}
};
}
if(!useInConjunctionWithJQuery){
$ = jBeta;
}
Sample application made with this (along with debug script for dev purposes):
<style>
.test{
background: #0f0;
}
.t{
border: 1px solid #f00;
}
</style>
<script>
onerror=handleErr;
var txt="";
function handleErr(msg,url,l){
txt="There was an error on this page.\n\n";
txt+="Error: " + msg + "\n";
txt+="URL: " + url + "\n";
txt+="Line: " + l + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
return true;
}
document.getElementsByClassName = function(tagName, className){
var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
var allElements = document.getElementsByTagName((tagName!='')?tagName:"*");
var results = [];
var element;
for(var i = 0; (element = allElements[i]) != null; i++){
var eClass = element.className;
if(eClass && eClass.indexOf(className) != -1 && hasClassName.test(eClass)){
results.push(element);
}
}
return results;
}
document.getElementsByName = function(tagName, Name){
var allElements = document.getElementsByTagName((tagName!='')?tagName:"*");
var results = [];
var element;
for(var i = 0; (element = allElements[i]) != null; i++){
var eName = element.name;
if(eName == Name){
results.push(element);
}
}
return results;
}
document.getElementsByID = function(tagName, ID){
var allElements = document.getElementsByTagName((tagName!='')?tagName:"*");
var element;
var results = [];
for(var i = 0; i<allElements.length; i++){
element = allElements[i];
var eId = element.id;
if(eId && eId == ID){
return element;
//results.push(element);
}
}
return results.length<=0?null:results;
}
var useInConjunctionWithJQuery = false;
jBeta = function(info){
var obj;
var parts;
if(info.split('.').length > 1){ // class
parts = info.split('.');
obj = document.getElementsByClassName(parts[0], parts[1]);
}
else if(info.split(':').length > 1){
parts = info.split(':');
obj = document.getElementsByName(parts[0], parts[1]);
}
else if(info.split('#').length > 1){
parts = info.split('#');
obj = document.getElementsByID(parts[0], parts[1]);
}
else{
obj = document.getElementsByTagName(info);
}
return (obj!=null)?(new $.Item(obj)):null;
}
jBeta.Item = function(obj){
this.data = obj;
this.getStyle = function(styleLookup){
returnValue = null;
if(this.data.length > 0){
for(var i=0; i<this.data.length; i++){
if(returnValue == this.data[i].style[styleLookup] && returnValue != null && i>0){
}
else if(returnValue == null){
returnValue = this.data[i].style[styleLookup];
}
else{
return '_mixed_';
}
}
}
else{
returnValue = this.data.style[styleLookup];
}
return returnValue;
};
this.getProperty = function(propertyLookup){
returnValue = null;
if(this.data.length > 0){
for(var i=0; i<this.data.length; i++){
if(returnValue == this.data[i][propertyLookup] && returnValue != null && i>0){
}
else if(returnValue == null){
returnValue = this.data[i][propertyLookup];
}
else{
return '_mixed_';
}
}
}
else{
returnValue = this.data[propertyLookup];
}
return returnValue;
}
this.show = function(){
if(this.data.length > 0){
for(var i=0; i<this.data.length; i++){
this.data[i].style.display = '';
}
}
else{
this.data.style.display = '';
}
};
this.hide = function(){
if(this.data.length > 0){
for(var i=0; i<this.data.length; i++){
this.data[i].style.display = 'none';
}
}
else{
this.data.style.display = 'none';
}
};
this.addEventListener = function(evt, func){
if(this.data.length > 0){
for(var i=0; i<this.data.length; i++){
this.data[i][evt] = func;
}
}
else{
this.data[evt] = func;
}
};
this.clearClass = function(){
if(this.data.length > 0){
for(var i=0; i<this.data.length; i++){
this.data[i].className = '';
}
}
else{
this.data.className = '';
}
};
this.setClass = function(className){
if(this.data.length > 0){
for(var i=0; i<this.data.length; i++){
this.data[i].className = className;
}
}
else{
this.data.className = className;
}
};
}
if(!useInConjunctionWithJQuery){
$ = jBeta;
}
</script>
<div id="walal" class="test">Content</div>
<div name='none' id="asd" class="test">Content</div>
<div id="asdwalal" class="test">Content</div>
<div id="awalal" class="test">Content</div>
<div id="swalal" class="test">Content</div>
<div id="dwalal" class="test">Content</div>
<span id="asd" class="test">Content</span>
<a name="test" href="http://www.google.com" onclick="alert('test'); return false">Test</a>
<script>
$('div').hide();
$('.test').clearClass();
$("#asd").setClass('t');
$("div").setClass('test t');
$('div#asd').clearClass();
$('a:test').addEventListener('onclick', function(){
if($('div#asd').getStyle('display') == 'none'){
$('div#asd').show();
}
else{
$('div#asd').hide();
}
return false;
});
//$('#asd').addEventListener('onmouseover', function(){alert(this.id)});
</script>
So far I have tested this fully in IE 6, and have partially tested in Chrome; everything I have tested has worked on both.
Comments/ Suggestions welcome
MultiQuote
| 