Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  
<script src="http://finom.github.io/js/matreshka.min.js"></script>
  
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
​
​
<meta charset=utf-8 />
<title>Matreshka Example</title>
  
</head>
  
<body>
  <select class="my-select">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
  <input type="text" class="my-text-input" value="input value">
  <input type="checkbox" class="my-checkbox">
  <input type="radio" class="my-radio" name="my-radio" value="1">
  <input type="radio" class="my-radio" name="my-radio" value="2" checked>
  <input type="radio" class="my-radio" name="my-radio" value="3">
  <textarea class="my-textarea">textarea value</textarea>
  <div class="output">
      x1 is <span class="x1"></span>
    <br>
      x2 is <span class="x2"></span>
    <br>
      x3 is <span class="x3"></span>
    <br>
      x4 is <span class="x4"></span>
    <br>
      x5 is <span class="x5"></span>
  </div>
  
</body>
</html>
 
var mk = new Matreshka();
​
mk.bindElement({
  x1: '.my-select',
  x2: '.my-text-input',
  x3: '.my-checkbox',
  x4: '.my-radio',
  x5: '.my-textarea'
});
​
mk.bindElement({
  x1: '.output .x1',
  x2: '.output .x2',
  x3: '.output .x3',
  x4: '.output .x4',
  x5: '.output .x5'
}, MK.binders.innerHTML() );
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers