Skip to content

This is a small library with their help you can HTML elements in connection with properties in a class or bring object.

License

Notifications You must be signed in to change notification settings

circy/UILink.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

60 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

UILink.js

UILink.js combines classes or objects with elements from the DOM, for example, Buttons, inputs and so on. Classes or objects with extended members that are generated from the html and it can simple events are bound. It is required JQuery. It can be used as query plugin, but can also be integrated into different module systems.

Include & Test

Install or include by HTML-Tag:

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/x.x/jquery.min.js"></script>
  <script type="text/javascript" src="lib/UIlink.js"></script>

Install from npm (Package manager. Installs, publishes and manages node programs.):

  npm install uilink.js

Test:

  npm test

Using:

To demonstrate the usage of uilink, I will show here a small example.

Step 1:

<html>
  <head>
    <title>UILink.js - simpleTest</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/x.x/jquery.min.js"></script>
    <script type="text/javascript" src="lib/UIlink.js"></script>
  </head>
  <body>
  
  <div id="Modul1">
    <button 
    data-uilinkname="Button1" 
    data-uilinkevent="click" 
    data-uilinkeventfunc="OnButton1Click">
    Click me...
    </button>
    
    <input 
    data-uilinkname="TextBox1" 
    data-uilinkevent="input" 
    data-uilinkeventfunc="OnTextBox1Input">
    ...
    </input>
  </div>
  
  <div id="Modul2">
    <button data-uilinkname="Button1" >
    Click me...
    </button>
    
    <input data-uilinkname="TextBox1">
    ...
    </input>
  </div>
  
  <script>
  // Here comes our javascript...
  </script>
  
  </body>
</html>

Step 2:

Now a few test modules. The modules look different also as the above html but both modules have completely the same radio tina quality. It is only to show that you can write much but little, reaching into compounds with UILink.js the same. ;-)

//Modul1 with probertis
function Modul1(){
  this._Button1;
  this._TextBox1;
}

Modul1.prototype.OnButton1Click = finction(sender){
  alert(sender.html());
  this._TextBox1.val(sender.html());
};

Modul1.prototype.OnTextBox1Input = finction(sender){
  this._Button1.html(sender.html());
};

//Modul2 without probertis
function Modul2(){
}

Modul2.prototype.OnButton1Click = finction(sender){
  alert(sender.html());
  this._TextBox1.val(sender.html());
};

Modul2.prototype.OnTextBox1Input = finction(sender){
  this._Button1.html(sender.html());
};

Step 3:

Using UILink.js! First way:

var test1 = new Modul1();
//and now UIlink
AddUILink(test1,$("#Modul1"));

and whit Jquery:

var test2 = new Modul2();
//and now UIlink
$("#Modul2").uiLink(test2);

That's it. Now both modules are on the same page and can respond to the evente that were set in the html.

Must be matched with the classes or objects If in addition there html new elements this again.

The first way in which class or object, a member named _UILink was created. And this can be called in the class or in the Object.

this._UILink.Update();

The next way is Jquery:

$("#Modul2").trigger("UILinkUpdate");

Other stuff:

NPM Repo: NPM version

License:

Copyright (c) 2014 Sebastian Kreissl

MIT (http://www.opensource.org/licenses/mit-license.php)

About

This is a small library with their help you can HTML elements in connection with properties in a class or bring object.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published