CODEWITHSUNDEEP
jqueryhtmlcssdom
soundr
soundr

Reputation: 21

How does the DOM initiate javascript calls though there seem to be no specific calls?

The HTML source does not have any specific calls to javascript functions but the DOM lists such calls. For instance, the code in source is : <div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
which translates in the DOM to: **

<div class="panel" style="width: 498px;">
    <div class="panel-header accordion-header accordion-header-selected"    style="height: 16px; width: 488px;">
    <div class="panel-title panel-with-icon">About </div>
    <div class="panel-icon icon-ok"> </div>
    <div class="panel-tool">
    <a href="javascript:void(0)" class="panel-tool-collapse" style="display: none;"></a>
    <a href="javascript:void(0)" class="accordion-collapse"></a>
    </div>
    </div>
    <div title="" data-options="iconCls:'icon-ok'" style="overflow: auto; padding: 10px; display: block; width: 478px; height: 170px;" class="panel-body accordion-body">

**

[the above is a specific example from the jeasyui demos]

How is the call to javascript initiated? Are the extra classes added only by such calls? (i tried to explore the minified js version but could not get a clue as to its actual processing).

Upvotes: 2

Views: 55

Answers (1)

xengravity
xengravity

Reputation: 3589

The JavaScript file: easyui.min.js is wrapped with a self invoking function:

(function($){/*body of code*/})(jQuery);

By simply inserting the file into your document, the JavaScript automatically calls itself and runs when the file loads.

You can view the source of their code here: http://www.jeasyui.com/easyui/jquery.easyui.min.js

When the script runs, it looks for specific classes that you've put into your HTML and wraps their logic around it e.g. 'accordion-header'.

Upvotes: 1

Related Questions