jQuery Modal Window opbygning

jQuery Modal Window udvidelser

jQuery Modal Window samarbejds API

jQuery Modal Window controller

• mwc.settings
  De settings, som ligger til grund for jQuery Modal Window. Det er endnu ikke muligt at ændre settings on the fly.
• mwc.modal
  Selve modal vinduet, som jQuery objekt
• mwc.modalContent
  Modal vinduets indhold. Altså det indhold du vælger skal vises.
• mwc.background
  Baggrunden bag modal vinduet. Madpapiret kaldes det også ofte.
• mwc.block
  jQuery Modal Window containeren, som indeholder både modal og background

• mwc.fireResizeModal(modalCss, ignoreStartEvent, noAnimate)
  Denne metode starter en gencalculering og placering af modal vinduet.
  modalCss giver mulighed for at sende egne mål med på vinduets størrelse og placering. ignoreStartEvent vil tvinge jQuery Modal Window til IKKE at fyre onModalResize eventen, hvis den sættes til true. noAnimate vil ignorere en eventuel animation når modal vinduet ændrer størrelse.
• mwc.calculateModalCSS()
  Denne metode udregner den plads og position modal vinduet vil kunne optage. Kan benyttes til at få nøjagtige mål på hvor stort ens indhold må være.
  returnerer en modalCss.
• mwc.deconstruct()
  Lukker og fjerner jQuery Modal Window.
• mwc.getScrollBarWidth()
  Returnerer størrelsen på browserens scrollbar bredde. Kan være nyttig info, hvis man har tænkt sig at lave scroll.

jQuery Modal Window plugin API

• jQuery.fn.openModalWindow(settings)
  Denne metode åbner et bestemt indhold i et nyt jQuery Modal Window. Intet nyt under solen her.
• jQuery.fn.closeModalWindow()
  Kaldes denne metode på et hvilket som helst element inde i jQuery Modal Window’s block element vil den lukke og fjerne sig selv.
• jQuery.fn.updateModalWindow(modalCss, ignoreStartEvent)
  Kaldes denne metode på et hvilket som helst element inde i jQuery Modal Window’s block element vil den udregne en ny størrelse og position.
• jQuery.fn.getModalWindowControl()
  Denne metode er ny og kaldes den på et hvilket som helst element inde i jQuery Modal Window’s block element vil den returnere jQuery Modal Window controlleren, hvis API man så kan benytte.

Ekstra indstillinger

• settings.noBackground
  Hvis sat til true vil der ikke kommer noget madpapir bag modal vinduet.
  Som standard sat til false.
• settings.enableModalScroll
  Hvis sat til false vil jQuery Modal Window ikke lave scroll hvis indholdet bliver for stort.
  Som standard sat til true.
• settings.onModalResize
  Denne event bliver fyret lige inden jQuery Modal Window skal til at ændre størrelse og position på modal vinduet.
  Ønsker man at benytte denne event skal man selv sørge for at ændre størrelsen på modal vinduet.
  Som standard sat til null.
• settings.onModalResized
  Denne event bliver fyret efter modal vinduet har ændret størrelse og position.
  Som standard sat til null.

jQuery Image Viewer

Løsningsmuligheder

Test 1: Indsætte elementer efterhånden som de bliver oprettet

1. Oprette et nyt element
2. Selecte insertIntoEle
3. Appende til insertIntoEle
4. Gentage 1, 2 og 3 indtil vi har oprettet og indsat alle elementer

Javascript til test 1

//Simpel test
function (numberOfElements) {
  var ele = null;
  for (var i = 0; i < numberOfElements; i++) {
    jQuery("#insertIntoEle .insertIntoEle").append(createSimpleEle(i));
  }
}
//Avanceret test
function (numberOfElements) {
  var ele = null;
  for (var i = 0; i < numberOfElements; i++) {
    jQuery("#insertIntoEle .insertIntoEle").append(createAdvancedEle(i));
  }
}
//UPDATE: Simple and advanced no elements creation
function (insertIntoEle, numberOfElements) {
  var ele = null;
  for (var i = 0; i < numberOfElements; i++) {
    jQuery("#insertIntoEle .insertIntoEle").append(preCreatedElements[i]);
  }
}

//createAdvancedEle() metoden
function createAdvancedEle(i) {
  var newEle = jQuery(document.createElement("dd"));
  newEle.html('Some text followed by a link <a href="http://rune.gronkjaer.dk"<Runes blog</a<')
          .attr("id", "eleID" + i)
          .attr("someWeirdAttribute", "someWeirdAttributeContent")
          .addClass("eleClass");
  return newEle;
}
//createSimpleEle() metoden
function createSimpleEle(i, createHtml) {
  var newEle;
  if (createHtml) {
    newEle = '<dd></dd>';
  } else {
    newEle = jQuery(document.createElement("dd"));
  }
  return newEle;
}

Test 2: Som i test 1 men med cache

1. Oprette et element af gangen
2. Selecte det element, der skal indsættes i, og gemme den i en variabel
3. Appende vores insertIntoEle
4. Gentage 1 og 3 indtil vi har oprettet og indsat alle elementer

Javascript til test 2

//Simpel test
function (insertIntoEle, numberOfElements) {
  var ele = null;
  for (var i = 0; i < numberOfElements; i++) {
    insertIntoEle.append(createSimpleEle(i));
  }
}
//Avanceret test
function (insertIntoEle, numberOfElements) {
  var ele = null;
  for (var i = 0; i < numberOfElements; i++) {
    var newEle = jQuery(document.createElement("dd"));
    insertIntoEle.append(createAdvancedEle(i));
  }
}
//UPDATE: Simple and advanced no elements creation
function (insertIntoEle, numberOfElements) {
  var ele = null;
  for (var i = 0; i < numberOfElements; i++) {
    insertIntoEle.append(preCreatedElements[i]);
  }
}

Test 3: Oprette midlertiddig container

1. Oprette det midlertidige container element
2. Oprette et element af gangen
3. Appende den midlertidige container
4. Gentage 2 og 3 indtil vi har oprettet og indsat alle elementer
5. Appende alle containerens children til insertIntoEle

Javascript til test 3

//Simpel test
function (insertIntoEle, numberOfElements) {
  var ele = null, jQContainer = jQuery("<dl>");
  for (var i = 0; i < numberOfElements; i++) {
    ele = createSimpleEle(i);
    jQContainer.append(ele);
  }
  insertIntoEle.append(jQContainer.children());
}
//Avanceret test
function (insertIntoEle, numberOfElements) {
  var ele = null, jQContainer = jQuery("<dl>");
  for (var i = 0; i < numberOfElements; i++) {
    jQContainer.append(createAdvancedEle(i));
  }
  insertIntoEle.append(jQContainer.children());
}
//UPDATE: Simple and advanced no elements creation
function (insertIntoEle, numberOfElements) {
  insertIntoEle.append(preCreatedElements.children());
}

Test 4: Skrive til en string og appende den til sidst

1. Oprette en string
2. Oprette et element af som en string
3. Konkatenere elementet til stringen
4. Gentage 2 og 3 indtil vi har oprettet alle elementer
5. Appende string'en til insertIntoEle

Javascript til test 4

//Simpel test
function (insertIntoEle, numberOfElements) {
  var ele = "";
  for (var i = 0; i < numberOfElements; i++) {
    ele += createSimpleEle(i, true);
  }
  insertIntoEle.append(ele);
}
//Avanceret test
function (insertIntoEle, numberOfElements) {
  var ele = "";
  for (var i = 0; i < numberOfElements; i++) {
    ele += '<dd id="eleID' + i + '" class="eleClass"<Some text followed by a link<a href="http://rune.gronkjaer.dk"<Runes blog</a<</dd<';
  }
  insertIntoEle.append(ele);
}
//UPDATE: Simple and advanced no elements creation
function (insertIntoEle, numberOfElements) {
  insertIntoEle.append(preCreatedElements);
}

Test 5: Udnytte at jQuery er et array med jQuery.add() metoden

1. Oprette et tomt jQuery objekt
2. Oprette et element
3. Tilføje elementet til jQuery objektet med jQuery.add()
4. Gentage 2 og 3 indtil vi har oprettet og indsat alle elementer
5. Appende den nu fyldte jQuery samling til insertIntoEle

Javascript til test 5

//Simpel test
function (insertIntoEle, numberOfElements) {
  var ele = jQuery([]);
  for (var i = 0; i < numberOfElements; i++) {
    ele = ele.add(createSimpleEle(i));
  }
  insertIntoEle.append(ele);
}
//Avanceret test
function (insertIntoEle, numberOfElements) {
  var ele = jQuery([]);
  for (var i = 0; i < numberOfElements; i++) {
    ele = ele.add(createAdvancedEle(i));
  }
  insertIntoEle.append(ele);
}
//UPDATE: Simple and advanced no elements creation
function (insertIntoEle, numberOfElements) {
  insertIntoEle.append(preCreatedElements);
}

Test med simple elementer

Konklusion

Hele koden

Javascript - Hele testkoden

var testIsRunning = false, preCreatedElements = [];
jQuery(function () {
  //Binding the event witch will start the simple test
  jQuery("#runTests").click(function () {
    //Henter antal
    if (!testIsRunning) {
      testIsRunning = true;
      var numberOfElements = parseInt(jQuery("#numberOfElements").val());
      runAllTests(numberOfElements, "appendTests", "resultsTable");
    }
  });
  //Binding the event witch will start the advanced test
  jQuery("#runAdvancedTests").click(function () {
    if (!testIsRunning) {
      testIsRunning = true;
      var numberOfElements = parseInt(jQuery("#numberOfElementsAdvanced").val());
      runAllTests(numberOfElements, "advancedAppendTests", "advancedResultsTable");
    }
  });
  //Binding the event witch will start the advanced test
  jQuery("#runTestsNoEleCreation").click(function () {
    if (!testIsRunning) {
      testIsRunning = true;
      var numberOfElements = parseInt(jQuery("#numberOfElementsNoEleCreation").val());
      runAllTests(numberOfElements, "appendTestsNoEleCreation", "resultsTableNoEleCreation", true);
    }
  });
  //Binding the event witch will start the advanced test
  jQuery("#runAdvancedTestsNoEleCreation").click(function () {
    if (!testIsRunning) {
      testIsRunning = true;
      var numberOfElements = parseInt(jQuery("#numberOfElementsAdvancedNoEleCreation").val());
      runAllTests(numberOfElements, "advancedAppendTestsNoEleCreation", "advancedResultsTableNoEleCreation", true);
    }
  });
});
/*
* Starts all tests of a certain type
*/
function runAllTests(numberOfElements, testMethodsName, resultsTableID, preCreateElements) {
  //The results table is cleared
  jQuery('#' + resultsTableID + ' tr:not(:first)').remove();
  //A Timeout secures the stability of the tests as the browsers will treat each test as a new process with its's own timeout period
  window.setTimeout('initializeTest(' + numberOfElements + ', "' + testMethodsName + '", "' + resultsTableID + '", ' + preCreateElements + ')', 10);
}
/*
* Initialises a series of tests with a given number of elements to create
*/
function initializeTest(numberOfElements, testMethodsName, resultsTableID, preCreateElements) {
  var testResultTable = jQuery('#' + resultsTableID),
      currentTr = testResultTable.find("tr:last"), 
      timeTaken = -1;
  //Starts the new table row
  currentTr = jQuery(document.createElement("tr"));
  currentTr.append('<td>' + numberOfElements + '</td>');
  testResultTable.append(currentTr);
  //Readies the first test in the series in a timeout
  window.setTimeout('runTest("test01", ' + numberOfElements + ', "' + testMethodsName + '", "' + resultsTableID + '", ' + preCreateElements + ')', 10);
}
/*
* Runs a test and then readies the next test
*/
function runTest(createMethodName, numberOfElements, testMethodsName, resultsTableID, preCreateElements) {
  if (preCreateElements) {
    preCreatedElements = window[testMethodsName + "PreCreate"][createMethodName](numberOfElements);
    var t = preCreatedElements;
  }
  var testResultTable = jQuery('#' + resultsTableID),
      currentTr = testResultTable.find("tr:last"),
      timeTaken = -1,
      insertIntoEle = jQuery("#insertIntoEle .insertIntoEle").html(""),
      startTime = (new Date()).getTime();
  //Gets the current set of tests (Simple or advanced)
  testMethods = window[testMethodsName];
  //Runs the current test
  testMethods[createMethodName](insertIntoEle, numberOfElements)
  //Clocks the runtime of the test
  timeTaken = (new Date()).getTime() - startTime;
  //Appends the test result to the test restult table
  currentTr.append('<td result="' + timeTaken + '">' + timeTaken + ' ms</td>');
  var currentMethodFound = false;
  //Find the next test
  for (methodName in testMethods) {
    if (currentMethodFound) {
      //The next test is found and is now being readied to run
      window.setTimeout('runTest("' + methodName + '", ' + numberOfElements + ', "' + testMethodsName + '", "' + resultsTableID + '", ' + preCreateElements + ')', 10);
      return;
    }
    //Checks to find the current test
    currentMethodFound = methodName === createMethodName;
  }
  //If we get to this point, no more tests can be run
  //Mark the looser and winner tests in the test result table
  markWinnerResult(resultsTableID);
  //If the number of elements have been counted down to 1, no mores tests can be run
  if (numberOfElements === 1) {
    testIsRunning = false;
    return;
  }
  //Number of elements is halved for the next test series
  numberOfElements = Math.ceil(numberOfElements / 2);
  //Next test series initialization is readied
  window.setTimeout('initializeTest(' + numberOfElements + ', "' + testMethodsName + '", "' + resultsTableID + '", ' + preCreateElements + ')', 10);
}
/*
* Below starts the actual tests
*/
//Two arrays are created to hold the variable number of tests
var appendTests = [],
    advancedAppendTests = [],
    appendTestsNoEleCreation = [],
    appendTestsNoEleCreationPreCreate = [],
    advancedAppendTestsNoEleCreation = [],
    advancedAppendTestsNoEleCreationPreCreate = [];
//Simple test 1
appendTests["test01"] = function test01(insertIntoEle, numberOfElements) {
  var ele = null;
  for (var i = 0; i < numberOfElements; i++) {
    jQuery("#insertIntoEle .insertIntoEle").append(createSimpleEle(i));
  }
};
//Simple test 2
appendTests["test02"] = function test02(insertIntoEle, numberOfElements) {
  var ele = null;
  for (var i = 0; i < numberOfElements; i++) {
    insertIntoEle.append(createSimpleEle(i));
  }
};
//Simple test 3
appendTests["test03"] = function test03(insertIntoEle, numberOfElements) {
  var ele = null, jQContainer = jQuery("<dl>");
  for (var i = 0; i < numberOfElements; i++) {
    ele = createSimpleEle(i);
    jQContainer.append(ele);
  }
  insertIntoEle.append(jQContainer.children());
};
//Simple test 4
appendTests["test04"] = function (insertIntoEle, numberOfElements) {
  var ele = "";
  for (var i = 0; i < numberOfElements; i++) {
    ele += createSimpleEle(i, true);
  }
  insertIntoEle.append(ele);
};
//Simple test 5
appendTests["test05"] = function (insertIntoEle, numberOfElements) {
  var ele = jQuery([]);
  for (var i = 0; i < numberOfElements; i++) {
    ele = ele.add(createSimpleEle(i));
  }
  insertIntoEle.append(ele);
};
//Advanced test 1
advancedAppendTests["test01"] = function (insertIntoEle, numberOfElements) {
  var ele = null;
  for (var i = 0; i < numberOfElements; i++) {
    jQuery("#insertIntoEle .insertIntoEle").append(createAdvancedEle(i));
  }
};
//Advanced test 2
advancedAppendTests["test02"] = function (insertIntoEle, numberOfElements) {
  var ele = null;
  for (var i = 0; i < numberOfElements; i++) {
    var newEle = jQuery(document.createElement("dd"));
    insertIntoEle.append(createAdvancedEle(i));
  }
};
//Advanced test 3
advancedAppendTests["test03"] = function (insertIntoEle, numberOfElements) {
  var ele = null, jQContainer = jQuery("<dl>");
  for (var i = 0; i < numberOfElements; i++) {
    jQContainer.append(createAdvancedEle(i));
  }
  insertIntoEle.append(jQContainer.children());
};
//Advanced test 4
advancedAppendTests["test04"] = function (insertIntoEle, numberOfElements) {
  var ele = "";
  for (var i = 0; i < numberOfElements; i++) {
    ele += createAdvancedEle(i, true);
  }
  insertIntoEle.append(ele);
};
//Advanced test 5
advancedAppendTests["test05"] = function (insertIntoEle, numberOfElements) {
  var ele = jQuery([]);
  for (var i = 0; i < numberOfElements; i++) {
    ele = ele.add(createAdvancedEle(i));
  }
  insertIntoEle.append(ele);
};
/********************************************************************************************/

//Simple NoEleCreation test 1
appendTestsNoEleCreation["test01"] = function test01(insertIntoEle, numberOfElements) {
  var ele = null;
  for (var i = 0; i < numberOfElements; i++) {
    jQuery("#insertIntoEle .insertIntoEle").append(preCreatedElements[i]);
  }
};
appendTestsNoEleCreationPreCreate["test01"] =
appendTestsNoEleCreationPreCreate["test02"] = function test01(numberOfElements) {
  preCreatedElements = [];
  for (var i = 0; i < numberOfElements; i++) {
    preCreatedElements.push(createSimpleEle(i));
  }
  return preCreatedElements;
};
//Simple NoEleCreation test 2
appendTestsNoEleCreation["test02"] = function (insertIntoEle, numberOfElements) {
  var ele = null;
  for (var i = 0; i < numberOfElements; i++) {
    insertIntoEle.append(preCreatedElements[i]);
  }
};
//Simple NoEleCreation test 3
appendTestsNoEleCreation["test03"] = function (insertIntoEle, numberOfElements) {
  insertIntoEle.append(preCreatedElements.children());
};
appendTestsNoEleCreationPreCreate["test03"] = function test01(numberOfElements) {
  var ele = null, preCreatedElements = jQuery("<dl>");
  for (var i = 0; i < numberOfElements; i++) {
    preCreatedElements.append(createSimpleEle(i));
  }
  return preCreatedElements;
};
//Simple NoEleCreation test 4
appendTestsNoEleCreation["test04"] = function (insertIntoEle, numberOfElements) {
  insertIntoEle.append(preCreatedElements);
};
appendTestsNoEleCreationPreCreate["test04"] = function (numberOfElements) {
  preCreatedElements = "";
  for (var i = 0; i < numberOfElements; i++) {
    preCreatedElements += createSimpleEle(i, true);
  }
  return preCreatedElements;
};
//Simple NoEleCreation test 5
appendTestsNoEleCreation["test05"] = function (insertIntoEle, numberOfElements) {
  insertIntoEle.append(preCreatedElements);
};
appendTestsNoEleCreationPreCreate["test05"] = function (numberOfElements) {
  preCreatedElements = jQuery([]);
  for (var i = 0; i < numberOfElements; i++) {
    preCreatedElements = preCreatedElements.add(createSimpleEle(i));
  }
  return preCreatedElements;
};

//Advanced NoEleCreation test 1
advancedAppendTestsNoEleCreation["test01"] = function (insertIntoEle, numberOfElements) {
  var ele = null;
  for (var i = 0; i < numberOfElements; i++) {
    jQuery("#insertIntoEle .insertIntoEle").append(preCreatedElements[i]);
  }
};
advancedAppendTestsNoEleCreationPreCreate["test01"] =
advancedAppendTestsNoEleCreationPreCreate["test02"] = function (numberOfElements) {
  preCreatedElements = [];
  for (var i = 0; i < numberOfElements; i++) {
    preCreatedElements.push(createAdvancedEle(i));
  }
  return preCreatedElements;
};
//Advanced NoEleCreation test 2
advancedAppendTestsNoEleCreation["test02"] = function (insertIntoEle, numberOfElements) {
  var ele = null;
  for (var i = 0; i < numberOfElements; i++) {
    insertIntoEle.append(preCreatedElements[i]);
  }
};
//Advanced NoEleCreation test 3
advancedAppendTestsNoEleCreation["test03"] = function (insertIntoEle, numberOfElements) {
  insertIntoEle.append(preCreatedElements.children());
};
advancedAppendTestsNoEleCreationPreCreate["test03"] = function (numberOfElements) {
  var ele = null, preCreatedElements = jQuery("<dl>");
  for (var i = 0; i < numberOfElements; i++) {
    preCreatedElements.append(createAdvancedEle(i));
  }
  return preCreatedElements;
};
//Advanced NoEleCreation test 4
advancedAppendTestsNoEleCreation["test04"] = function (insertIntoEle, numberOfElements) {
  insertIntoEle.append(preCreatedElements);
};
advancedAppendTestsNoEleCreationPreCreate["test04"] = function ( numberOfElements) {
  preCreatedElements = "";
  for (var i = 0; i < numberOfElements; i++) {
    preCreatedElements += createAdvancedEle(i, true);
  }
  return preCreatedElements;
};
//Advanced NoEleCreation test 5
advancedAppendTestsNoEleCreation["test05"] = function (insertIntoEle, numberOfElements) {
  insertIntoEle.append(preCreatedElements);
};
advancedAppendTestsNoEleCreationPreCreate["test05"] = function (numberOfElements) {
  preCreatedElements = jQuery([]);
  for (var i = 0; i < numberOfElements; i++) {
    preCreatedElements = preCreatedElements.add(createAdvancedEle(i));
  }
  return preCreatedElements;
};

/********************************************************************************************/
//A method for creating the advanced elements. This ensures that they are alike every time.
function createAdvancedEle(i, createHtml) {
  var newEle;
  if (createHtml) {
    newEle = '<dd id="eleID' + i + '" class="eleClass">Some text followed by a link<a href="http://rune.gronkjaer.dk">Runes blog</a></dd>';
  } else {
    newEle = jQuery(document.createElement("dd"));
    newEle.html('Some text followed by a link <a href="http://rune.gronkjaer.dk">Runes blog</a>')
          .attr("id", "eleID" + i)
          .attr("someWeirdAttribute", "someWeirdAttributeContent")
          .addClass("eleClass");
  }
  return newEle;
}
//A method for creating the simple elements. This ensures that they are alike every time.
function createSimpleEle(i, createHtml) {
  var newEle;
  if (createHtml) {
    newEle = '<dd></dd>';
  } else {
    newEle = jQuery(document.createElement("dd"));
  }
  return newEle;
}
//Helping method for marking the winning and loosing test of each test series
function markWinnerResult(resultsTableID) {
  var winner = -1, looser = -1, results = jQuery('#' + resultsTableID + ' tr:last td:not(:first)');
  for (var i = 0; i < results.length; i++) {
    var thisResult = parseInt(jQuery(results[i]).attr("result"));
    if (winner === -1 || winner > thisResult) {
      winner = thisResult;
    }
    if (looser < thisResult) {
      looser = thisResult;
    }
  }
  results.filter("[result=" + winner + "]").addClass("winner");
  results.filter("[result=" + looser + "]").addClass("looser");
}

Tak til

Tak til mine gamle kolleger

Tea Solutions bliver konkurrent

Omskrivning af jQuery Plugins

• Banner shifter (Lavet til at lade indhold skifte med et vist interval)
• Tooltip (Et lille let plugin, som viser noget indhold som tooltip for noget andet indhold)
• Validation (“Mit” formular valideringsplugin)
• Scrollarea (Et plugin der laver et område, som kan scrolles med en anden scrollbar end browserens medfødte)

Fremtiden med Tea Solutions

Hvad kan jQuery Modal Window?

• Vise alle slags html indhold i et modal vindue
• Styre placeringen af modal vinduet
• Styre baggrundens/madpapirets farve og gennemsigtighed
• Give adgang til vigtige events der bliver fyret når modalvinduet åbnes eller lukkes
• Give mulighed for at bestemme animationens tid

Hvordan gør den det?

Se jQuery Modal Window i aktion

Ny feature

Problem

Løsning

Bugfixes

vertikal placering af højre/venstre pile

Hurtigt eksempel

.getWeekNumber()

Date.prototype.getWeekNumber = function() {
  var date = this;
  date = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
  var IsoDayOfWeek = date.getDay() == 0 ? 7 : date.getDay(); // Søndag = 7
  date.setDate(date.getDate() + 4 - IsoDayOfWeek); // Ændre til nærmeste torsdag
  var DayOfYear = (date.getTime() - Date.UTC(date.getFullYear(), 0, 1)) / 864e5;
  var week = Math.floor(DayOfYear / 7) + 1;
  return week;
};

//getWeekNumber ekesmpel
var date = new Date();
jQuery("#UgeTest").html("Denne uges nummer: " + date.getWeekNumber());

Resultatet:

.getDayName()

Date.prototype.getDayName = function(language) {
  var days = [], supportetLanguages = ["da-DK", "en-US"];
  //Dansk som standard
  //Denne linie benytter en containsmetode på Arrayobjektet, som ikke er med i native koden.
  language = language && supportetLanguages.contains(language) ? language : "da-DK";
  
  //dansk
  days["da-DK"] = [];
  days["da-DK"][0] = "Søndag";
  days["da-DK"][1] = "Mandag";
  days["da-DK"][2] = "Tirsdag";
  days["da-DK"][3] = "Onsdag";
  days["da-DK"][4] = "Torsdag";
  days["da-DK"][5] = "Fredag";
  days["da-DK"][6] = "Lørdag";
  //Engelsk
  days["en-US"] = [];
  days["en-US"][0] = "Sunday";
  days["en-US"][1] = "Monday";
  days["en-US"][2] = "Tuesday";
  days["en-US"][3] = "Wedensday";
  days["en-US"][4] = "Thursday";
  days["en-US"][5] = "Friday";
  days["en-US"][6] = "Saturday";

  return days[language][this.getDay()];
};

//getDayName ekesmpel
var date = new Date();
jQuery("#UgedagTest").html(date.getDayName());

Resultatet:

.getMonthName()

Date.prototype.getMonthName = function(language) {
  var months = [], supportetLanguages = ["da-DK", "en-US"];

  //Dansk som standard
  //Denne linie benytter en containsmetode på Arrayobjektet, som ikke er med i native koden.
  language = language && supportetLanguages.contains(language) ? language : "da-DK";

  //Dansk
  months["da-DK"] = [];
  months["da-DK"][0] = "Januar";
  months["da-DK"][1] = "Februar";
  months["da-DK"][2] = "Marts";
  months["da-DK"][3] = "April";
  months["da-DK"][4] = "Maj";
  months["da-DK"][5] = "Juni";
  months["da-DK"][6] = "Juli";
  months["da-DK"][7] = "August";
  months["da-DK"][8] = "September";
  months["da-DK"][9] = "Oktober";
  months["da-DK"][10] = "November";
  months["da-DK"][11] = "December";
  //Engelsk
  months["en-US"] = [];
  months["en-US"][0] = "January";
  months["en-US"][1] = "February";
  months["en-US"][2] = "March";
  months["en-US"][3] = "April";
  months["en-US"][4] = "May";
  months["en-US"][5] = "June";
  months["en-US"][6] = "Juli";
  months["en-US"][7] = "August";
  months["en-US"][8] = "September";
  months["en-US"][9] = "Oktober";
  months["en-US"][10] = "November";
  months["en-US"][11] = "December";
  return months[language][this.getMonth()];
};

//getMonthName ekesmpel
var date = new Date();
jQuery("#MaanedNavnTest").html(date.getMonthName());

Resultatet:

.format()

var now = new Date();
var testTxt = "";
testTxt += '<br /><br />now.format("m/dd/yy"):<br />' + now.format("m/dd/yy");

//Kan også benyttes som en selvstændig metode
testTxt += '<br /><br />dateFormat(now, "dddd, mmmm dS, yyyy, h:MM:ss TT")<br />' + dateFormat(now, "dddd, mmmm dS, yyyy, h:MM:ss TT");

// Du kan benytte een af flere navngivne masker
testTxt += '<br /><br />now.format("isoDateTime")<br />' + now.format("isoDateTime");

// ...Eller tilføje dine egne
dateFormat.masks.hammerTime = 'HH:MM! "Can\'t touch this!"';
testTxt += '<br /><br />now.format("hammerTime")<br />' + now.format("hammerTime");

// Når man benytter den selvstændige dateFormat metode
// kan du også sende en dato med som string, smart
testTxt += '<br /><br />dateFormat("Jun 9 2007", "fullDate")<br />' + dateFormat("Jun 9 2007", "fullDate");

// Bemærk at hvis du ikke inkludere masken, som parameter,
// vil dateFormat.masks.default blive benyttet
testTxt += '<br /><br />now.format()<br />' + now.format();

// Og hvis du ikke inkluderer en dato som parameter,
// bliver dags dato og tid brugt
testTxt += '<br /><br />dateFormat()<br />' + dateFormat();

// Du kan også springe over dato objektet (så længe din maske ikke
// indeholder tal), hvor dags dato og tid igen vil blive benyttet
testTxt += '<br /><br />dateFormat("longTime")<br />' + dateFormat("longTime");

// Du kan også konvertere en lokal tid til UTC tid. For at gøre dette
// kan du sende true med som parameter (her er det ikke lovligt at springe parametre over):
dateFormat(now, "longTime", true);
testTxt += '<br /><br />now.format("longTime", true)<br />' + now.format("longTime", true);

// ...Eller du kan prefixe UTC: til din maske
testTxt += '<br /><br />now.format("UTC:h:MM:ss TT Z")<br />' + now.format("UTC:h:MM:ss TT Z");
jQuery("#StevenLevithan").html(testTxt);

Resultatet:

.trim(), .trimEnd(), trimStart()

//trim fjerner mellemrum både før og efter string'en
String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g,""); };
//trimEnd fjerner mellemrum i enden af string'en
String.prototype.trimEnd = function() { return this.replace(/\s+$/, ''); };
//trimStart fjerner mellemrum i starten af string'en
String.prototype.trimStart = function() { return this.replace(/^\s+/, ''); };

//trim eksempel
var trimString = "  Denne string har nogle dumme mellemrum i enderne   ",
    trimTest = jQuery("#TrimTest");
trimTest.html("'" + trimString + "'");
trimTest.html(trimTest.html() + "<br />'" + trimString.trim() + "'");
trimTest.html(trimTest.html() + "<br />'" + trimString.trimEnd() + "'");
trimTest.html(trimTest.html() + "<br />'" + trimString.trimStart() + "'");

.format()

//En ekstra format funktion til String objektet
//Kan bruges med parametre
String.format = function(text) {
  //Tjek om der er mere end 1 argumenter med som parametre
  if (arguments.length <= 1) {
    //Hvis der kun er een parameter med kan vi bare returnere, da der ikke er noget at formatere
    return text;
  }
  //Vi gør klar til at køre argumenterne igennem
  var tokenCount = arguments.length - 2;
  for (var token = 0; token <= tokenCount; token++) {
    //Der itereres igennem tekstens tokens og erstatter deres plads med argumenterne
    text = text.replace(new RegExp("\\{" + token + "\\}", "gi"), arguments[token + 1]);
  }
  return text;
};

//format eksempel
var formatString = "Hej {0}, har du en god dag? Hilsen {1}";
jQuery("#FormatTest").html("'Inden format: '" + formatString + "'<br />Efter format: '" + String.format(formatString, "Besøgende", "Rune") + "'");

.reverse()

//Spejlvender string'en.
String.prototype.reverse = function() { 
  return this.split('').reverse().join('');
};

//reverse eksempel
var reverseString = "evian mmh";
jQuery("#ReverseTest").html("Inden reverse: " + reverseString + "<br />Efter reverse: " + reverseString.reverse());

.contains()

//Returnerer true hvis teksten findes i string'en
String.prototype.contains = function(text, isCaseSensitive) {
  return !!(new RegExp(text, !isCaseSensitive ? "i" : "" + "g").test(this));
};

//contains eksempel
var containsString = "Den hurtige brune Rune hopper over den dovne hund";
jQuery("#ContainsTest").html(containsString.contains("Brune") + "<br />" + containsString.contains("Brune", true));

.endsWidth()

//Returnerer true hvis teksten findes i slutningen af string'en
String.prototype.endsWidth = function(text, isCaseSensitive) {
  return !!(new RegExp(text + "$", !isCaseSensitive ? "i" : "" + "g").test(this));
};

//endsWidth eksempel
var endsWidthString = "Den hurtige brune Rune hopper over den dovne hund";
jQuery("#EndsWidthTest").html(endsWidthString.endsWidth("Hund") + "<br />" + endsWidthString.endsWidth("Hund", true));

.startsWidth()

//Returnerer true hvis teksten findes i starten af string'en
String.prototype.startsWidth = function(text, isCaseSensitive) {
  return !!(new RegExp("^" + text, !isCaseSensitive ? "i" : "" + "g").test(this));
};

//startsWidth eksempel
var startsWidthString = "Den hurtige brune Rune hopper over den dovne hund"
jQuery("#StartsWidthTest").html(startsWidthString.startsWidth("den") + "<br />" + startsWidthString.startsWidth("den", true));

.toArray()

//Returnerer string'en, som array
String.prototype.toArray = function() {
  return this.split('');
}

//toArray eksempel
var toArrayString = "Den hurtige brune Rune hopper over den dovne hund";
jQuery("#ToArrayTest").html(toArrayString + "<br />" + toArrayString.toArray());

.toIntArray()

//returnerer string'en, som et array med hver chars unicode integer
String.prototype.toIntArray = function() {
  var returnArray = [];
  for (var i = 0; i < this.length; i++) {
    returnArray.push(this.charCodeAt(i));
  }
  return returnArray;
};

//toIntArray eksempel
var toIntArrayString = "Den hurtige brune Rune hopper over den dovne hund",
    intArray = toIntArrayString.toIntArray();
jQuery("#ToIntArrayTest").html(toIntArrayString + "<br />" + intArray + "<br />intArray[2] * intArray[7] = " + (intArray[2] * intArray[7]));

.remove()

//Fjerner en stump af string'en fra start og length frem
String.prototype.remove = function(start, length) {
  var s = '';
  if (start > 0)
    s = this.substring(0, start);

  if (start + length < this.length)
    s += this.substring(start + length, this.length);
  return s;
};

//remove eksempel
var removeString = "Den hurtige brune Rune hopper over den dovne hund";
jQuery("#RemoveTest").html(removeString + "<br />" + removeString.remove(11, 6));

.htmlEntities()

//Htmlencoder teksten
String.prototype.htmlEntities = function() {
  return this.replace(/&/g, '&').replace(//g, '>');
};

//htmlEntitiesString eksempel
var htmlEntitiesString = "<div>Den hurtige brune <strong>Rune</strong> hopper over den dovne hund</div>";
jQuery("#HtmlEntitiesTest").html(htmlEntitiesString + "<br />" + htmlEntitiesString.htmlEntities());

.stripTags()

//returnerer en string uden HTML tags
String.prototype.stripTags = function() {
  return this.replace(/<\/?[^>]+>/gi, '');
};

//stripTags eksempel
var stripTagsString = "<div>Den hurtige brune <strong>Rune</strong> hopper over den dovne hund</div>";
jQuery("#StripTagsTest").html(stripTagsString.htmlEntities() + "<br />" + stripTagsString.stripTags().htmlEntities());

Tanker og fakta om min valgte tutorial

Det lykkedes

Konklusion