[jquery] plugin toevoegen html5boilerplate*

[Verwijderd]

Goedenavond allen,

Ik ben voor mezelf een website aan het maken die gebruikt maakt van de HTML5boilerplate. Een prachtig ding, maar ik versta het niet helemaal. De website is zo goed als klaar, maar om mijn tabellen er wat mooier uit te laten zien wou ik gebruik maken van de DataTables-jqueryplugin.

Ik kwam op de DataTablesplugin dankzij deze website.

Nu: Het is me niet echt duidelijk hoe ik Jquery en html5boilerplate goed moet combineren. Sinds vandaag is er al iets meer uitleg, maar nog niet alles is duidelijk.

[YouTube: http://www.youtube.com/watch?v=NMEB78VX2P0&feature=player_embedded]

Op ongeveer 4:47 ziet u de dame in beeld uitleggen hoe plugins.js en scripts.js werken. Al is dit niet helemaal voor mij duidelijk. Als ik het goed begrijp moet ik in plugins.js de code van de plugin copy pasten. In scripts.js moet ik deze dan dan aanroepen.

Hetgene dat ik dus heb gedaan is het volgende:

plugins.js

JavaScript:

// remap jQuery to $

(function($){
    /*
     * File:        jquery.dataTables.min.js
     * Version:     1.7.6
     * Author:      Allan Jardine (www.sprymedia.co.uk)
     * Info:        www.datatables.net
     * 
     * Copyright 2008-2011 Allan Jardine, all rights reserved.
     *
     * This source file is free software, under either the GPL v2 license or a
     * BSD style license, as supplied with this software.
     * 
     * This source file is distributed in the hope that it will be useful, but 
     * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY 
     * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
     */
function(j,ra,p){
j.fn.dataTableSettings=[];var D=j.fn.dataTableSe ....... Ga zo maar door, dit is de stripped versie van Datatables

})(this.jQuery);



// usage: log('inside coolFunc',this,arguments);
// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function(){
  log.history = log.history || [];   // store logs to an array for reference
  log.history.push(arguments);
  if(this.console){
    console.log( Array.prototype.slice.call(arguments) );
  }
};



// catch all document.write() calls
(function(doc){
  var write = doc.write;
  doc.write = function(q){ 
    log('document.write(): ',arguments); 
    if (/docwriteregexwhitelist/.test(q)) write.apply(doc,arguments);  
  };
})(document);

scripts.js

JavaScript:

/* Author: 

*/

$(document).ready(function() {
     oTable = $('#myTable').dataTable({
         "bJQueryUI": true,
         "sPaginationType": "full_numbers"
     });
} );

In de FAQ van Boilerplate staat dat ik vooral dit eens moet doorlezen, maar echt veel wijzer wordt ik er niet van. Ik ben trouwens niet de enige met het probleem, ik vond ook nog dit (zoekterm).

Maar, dit werkt dus niet ... wat doe ik fout en nog liever, hoe los ik dit op?

[BtM909]

HTML5Boilerplate is een template met daarin jQuery ingehangen. En vervolgens wil je een jQuery script toevoegen. Wat werkt er dan niet precies: het toevoegen van je plugin?

If so, pass eens een URI waarop je test-case staat

[Verwijderd]

Ik snap gewoon niet goed waarvoor de scripts.js en plugins.js dienen. Ik dacht dat ik in plugins.js de code moest zetten van de plugin en in scripts.js de aanroep hiervan.

Nu heb ik het gedaan zoals ik vroeger gewend was. Gewoon onder:

JavaScript:

!-- Grab Google CDN's jQuery. fall back to local if necessary -->
  
  <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

nog dit toegevoegd:

JavaScript:

<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                $('#users').dataTable();
            } );
        </script>

Dit werkt wel, maar nu wordt er totaal geen gebruik gemaakt van plugins.js en scripts.js ... En moet er dus een file meer gedownload worden ...

[RobIII]

Verwijderd schreef op dinsdag 22 maart 2011 @ 15:20:
En moet er dus een file meer gedownload worden ...

Het idee achter die boilerplate is juist dat je er uit sloopt wat je niet gebruikt; niet dat je 'm gewoon in z'n geheel overneemt.

[ Voor 39% gewijzigd door RobIII op 22-03-2011 15:47 ]

[Verwijderd]

RobIII schreef op dinsdag 22 maart 2011 @ 15:47:
[...]


Het idee achter die boilerplate is juist dat je er uit sloopt wat je niet gebruikt; niet dat je 'm gewoon in z'n geheel overneemt.

Ja, ik heb bijvoorbeeld enkel de .htacces nodig en niet de web.cofig. Die heb ik er dus uit gehaald. Voor de rest heb ik vrijwel alles nodig.

De boilerplate steekt er standaard 2 js-files in (plugins.js en scripts.js) en het lijkt me nogal raar als deze er in steken zonder nut ...

[RobIII]

Verwijderd schreef op dinsdag 22 maart 2011 @ 16:19:
De boilerplate steekt er standaard 2 js-files in (plugins.js en scripts.js) en het lijkt me nogal raar als deze er in steken zonder nut ...

Als ik hier kijk zie ik wel degelijk "nut" in plugins.js:

JavaScript:

// usage: log('inside coolFunc', this, arguments);
// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function(){
  log.history = log.history || [];   // store logs to an array for reference
  log.history.push(arguments);
  arguments.callee = arguments.callee.caller; 
  if(this.console) console.log( Array.prototype.slice.call(arguments) );
};
// make it safe to use console.log always
(function(b){function c(){}for(var d="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info, log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","),a;a=d.pop();)b[a]=b[a]||c})(window.console=window.console||{});
 
 
// place any jQuery/helper plugins in here, instead of separate, slower script files.

En in index.html zie ik:

HTML:

  <!-- scripts concatenated and minified via ant build script-->
  <script src="js/plugins.js"></script>
  <script src="js/script.js"></script>
  <!-- end scripts-->

Gebruik je het ant build script niet dan heeft 't dus "weinig" nut behalve dat je HTTP requests bespaart als je de jQuery plugins in plugins.js mikt. En of je de plugins.js/scipt.js überhaupt wil gebruiken is een tweede en aan jezelf; jij bent de developer... Ik zie je hele probleem dan ook niet. Sloop die regels uit de index.html en laat de bestanden achterwege en klaar. Als ik naar je TS kijk dan gebruik je echter de DataTables plugin; nou die mik je dan in plugins.js en be done with it.

/edit: Euh, je hebt toch niet de <script....>....</script> in de .js gezet he?

[ Voor 21% gewijzigd door RobIII op 22-03-2011 16:29 ]