Question

I have a script inside of my HTML file. For example

<div id='mydiv'>Hello World</div>

<script>
$(document).ready(function(){
   var newtext = 'Bye-bye world';
   $('#mydiv').html(newtext);
});
</script>

Now I’d like to move the script to external file and make so, that user can define which html to add to which div. For example

<div id='mydiv'>Hello World</div>
<script>
$(document).ready(function(){
   $('#mydiv').changetext({
      'newtext':'My new text'
   });
});
</script>

How can it be done? Thx

Answer 1

To use the syntax of your second example you would need to create a plugin.

(function( $ ){
    $.fn.changetext = function( options ) {  
        var settings = $.extend( {
            'newtext'         : 'Default text'
        }, options);

        $(this).text(settings.newtext);
    };
})( jQuery );

See this link for more information: http://docs.jquery.com/Plugins/Authoring.