Clever Geek Handbook

Create Reusable HTML Control with Javascript

So, I've been looking for some existing questions regarding reusable elements in HTML and Javascript and I'm not sure if there is anything that gives me the start that I'm looking for. I'm not very good with js, but instead of re-writing the same code over and over and I need to do an add-on, I would rather create a reusable framework that I can apply in multiple places.

The basic layout is like this: there is an input field with an "Add" button, every time you add a name, it is displayed under the input with a checkbox. When you uncheck the box, the name will be removed from the list.

I'm fine with HTML styling and construction, what I lost is developing an object in js that I can apply in multiple places. I meant the following:

function createInputControl(targetElementId) {
    var newInputControl = new ItemInputControl();
    newInputControl.onItemAdded = customItemAddedCallback;
    newInputControl.onItemRemoved = customItemRemovedCallback;
    newInputControl.createInElement(targetElementId);
}

This is the beginning that I am looking for. An object that I can create that has callbacks assigned when an element is added or removed via user interaction, and a way to render it within an existing element on my page.

EDIT: I'm looking here for a javascript object skeleton (named ItemInputControl above) with these functions / properties that I can reuse on my site.

+3


source to share


2 answers


So, if I understand you correctly - you are looking for help on how to make a globally accessible variable that can be used throughout your application, like jQuery. You have two main options for what you want to do

First you can use Object Literal, which provides one global variable and all your methods are contained inside:

(function (window) {
    var inputControl = {
        onItemAdded: function () {
            // do stuff
        },
        onItemRemoved: function () {
            // do stuff
        },
        createInElement: function (targetElementId) {
            // do stuff
        }
    };
    window.ItemInputControl = inputControl;
})(window);

It is used like this:

ItemInputControl.createInElement("elementId");


The second option is to use Prototype:

(function (window) {
    var inputControl = function () {
        // Constructor logic
        return this;
    };
    inputControl.prototype.onItemAdded = function () {
        // do stuff
        return this;
    };
    inputControl.prototype.onItemRemoved = function () {
        // do stuff
        return this;
    };
    inputControl.prototype.createInElement = function (elementId) {
        // do stuff
        return this;
    };
    window.ItemInputControl = inputControl;
})(window);

It will be used like this:

var newInputControl = new ItemInputControl();
newInputControl.createInElement("elementId");

Most of the time in standalone applications, I prefer to use Object Literals for my structure. If I was building a widely used javascript framework, I would probably use a sample prototype. You can read more about prototypes here: http://www.htmlgoodies.com/beyond/javascript/some-javascript-object-prototyping-patterns.html

+1


source


Well, I'm not sure if this is very useful, but maybe it will contain a few ideas for you.

The two required HTML elements are stored as format strings and everything is dynamically added / removed to the DOM.

var listid = 0;

    $(document).ready(function() {

        var controlHtml = + // {0} = mainid
            '<div>' +
                '<input id="text-{0}" type="text" />' +
                '<div id="add-{0}" class="addButton">Add</div>' +
            '</div>' +
            '<div id="list-{0}"></div>';

        var listHtml = +  // {0} = mainid, {1} = listid, {2} = suplied name
            '<div id="list-{0}-{1}"><input id="checkbox-{0}-{1}" type="checkbox class="checkboxClass" checked />{2}<div>';

        $('#content').append(controlHtml.f('0'));

        $('.addButton').click(function(e) { addClick(e); });

    });

    function addClick(e) {
        var id = e.currentTarget.id.split('-')[1];
        var name = $('text-' + id).val();
        $('.list-' + id).append(listHtml.f(id, listid, name));
        listid++;
        $('.checkboxClass').click(function() { checkboxClick(e); });
    }

    function checkboxClick(e) {
        $('#' + e.currentTarget.id).remove();
    }

    String.prototype.f = function () { var args = arguments; return this.replace(/\{(\d+)\}/g, function (m, n) { return args[n]; }); };


And, of course, very minimal HTML to enable your control:

<body>
    <div id="content"></div>
</body>
0


source






More articles:


All Articles