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 lang="en">
<head>
<meta charset="UTF-8" />
  <title>jQuery UI Select</title>
  <style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
​
<style>
​
  #list { background-image: url('https://www.google.com/images/srpr/logo11w.png');}
  #list { width: 300px; list-style: none; margin: 0; padding: 0; }
  div { background: white; position:relative;margin: 1em 0; padding: 1em; border: 2px solid gray; list-style: none; padding-left: 42px; }
  div .handle { width:100; background: #000; position: absolute; left: 0; top: 0; bottom: 0; padding:8px; }
  .ui-selecting { background: #eee; }
  .ui-selecting .handle { background: #ccc; }
  .ui-selected { background: #def; }
  .ui-selected .handle { background: #cde; }
​
</style>
​
</head>
<body>
​
<div id="list">
  <div>Item 1 <a href="">x</a></div>
  <div><select><option>1</option><option>2</option></select>Item 2</div>
  <div>Item 3</div>
  <div id="aa">Item 4</div>
  <div>Item 5</div>
</div>
​
</body>
</html>
​
 
$(function(){ // on dom ready
​
$('#cy').cytoscape({
  layout: {
    name: 'cose',
    padding: 10
  },
  
  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'shape': 'data(faveShape)',
        'width': 'mapData(weight, 40, 80, 20, 60)',
        'content': 'data(name)',
        'text-valign': 'center',
        'text-outline-width': 2,
        'text-outline-color': 'data(faveColor)',
        'background-color': 'data(faveColor)',
        'color': '#fff'
      })
    .selector(':selected')
      .css({
        'border-width': 3,
        'border-color': '#333'
      })
    .selector('edge')
      .css({
        'opacity': 0.666,
        'width': 'mapData(strength, 70, 100, 2, 6)',
        'target-arrow-shape': 'triangle',
        'source-arrow-shape': 'circle',
        'line-color': 'data(faveColor)',
        'source-arrow-color': 'data(faveColor)',
        'target-arrow-color': 'data(faveColor)'
      })
    .selector('edge.questionable')
      .css({
        'line-style': 'dotted',
        'target-arrow-shape': 'diamond'
      })
    .selector('.faded')
      .css({
        'opacity': 0.25,
        'text-opacity': 0
      }),
  
  elements: {
    nodes: [
      { data: { id: 'j', name: 'ng-one-r1', weight: 200, faveColor: '#6FB1FC', faveShape: 'rectangle' } },
      { data: { id: 'e', name: 'ng-one-r2', weight: 200, faveColor: '#EDA1ED', faveShape: 'ellipse' } },
      { data: { id: 'k', name: 'RTI', weight: 75, faveColor: '#86B342', faveShape: 'octagon' } },
    ],
    edges: [
      { data: { source: 'j', target: 'e', faveColor: '#6FB1FC', strength: 50 } },
      { data: { source: 'j', target: 'k', faveColor: '#6FB1FC', strength: 70 } },
     
      { data: { source: 'e', target: 'j', faveColor: '#EDA1ED', strength: 55 } },
      { data: { source: 'e', target: 'k', faveColor: '#EDA1ED', strength: 60 }, classes: 'questionable' },
      
      { data: { source: 'k', target: 'j', faveColor: '#86B342', strength: 40 } },
      { data: { source: 'k', target: 'e', faveColor: '#86B342', strength: 30 } },
      
    ]
  },
  
  ready: function(){
    window.cy = this;
    
    // giddy up
  }
});
​
}); // on dom ready
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers