Created
March 22, 2011 18:17
-
-
Save victusfate/881721 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>jQuery Data Table</title> | |
| <link rel="stylesheet" type="text/css" media="all" | |
| href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-darkness/jquery-ui.css"/> | |
| <style type="text/css"> | |
| body { | |
| font-family: sans-serif; | |
| } | |
| div#params-container { | |
| position: relative; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| table#params { | |
| font-size: 12px; | |
| border-collapse: collapse; | |
| } | |
| table#params th, table#params td { | |
| padding: 5px 8px; | |
| border: 1px solid #48B3FA; | |
| } | |
| table#params th.name { | |
| width: 148px; | |
| } | |
| table#params th.value { | |
| width: 271px; | |
| } | |
| table#params input.name { | |
| width: 142px; | |
| border: none; | |
| background-color: transparent; | |
| } | |
| table#params input.value { | |
| width: 265px; | |
| border: none; | |
| background-color: transparent; | |
| } | |
| ul#param-control { | |
| position: absolute; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| ul#param-control li { | |
| cursor: pointer; | |
| float: left; | |
| list-style: none outside none; | |
| margin: 1px; | |
| padding: 2px; | |
| } | |
| </style> | |
| <script type="text/javascript" | |
| src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> | |
| </script> | |
| <script type="text/javascript" | |
| src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"> | |
| </script> | |
| <script type="text/javascript"> | |
| $(function() { | |
| // mouseover param-control | |
| $('#param-control') | |
| .hide() | |
| .mouseenter(function() { | |
| $(this).show(); | |
| }) | |
| .find('li') | |
| .mouseenter(function() { | |
| $(this).addClass('ui-state-hover'); | |
| }) | |
| .mouseleave(function() { | |
| $(this).removeClass('ui-state-hover'); | |
| }); | |
| var paramRow = '<tr><td><input class="name" name="paramName"></td>' | |
| + '<td><input class="value" name="paramValue"></td></tr>'; | |
| // initialize table | |
| $('table#params') | |
| .append('<tr><th class="name">Name</th><th class="value">Value</th></tr>') | |
| .append(paramRow); | |
| // display/hide border | |
| $('#params') | |
| .delegate('input', 'focus', function() { | |
| $(this).css({border: '1px solid #AAAAAA'}); | |
| $('#param-control').hide(); | |
| }) | |
| .delegate('input', 'blur', function() { | |
| $(this).css({border: 'none'}); | |
| }) | |
| .delegate('tr:gt(0)', 'mouseenter', function() { | |
| var theRow = $(this), | |
| position = theRow.position(); | |
| $('#param-control') | |
| .css({ | |
| top: position.top + 1 + 'px', | |
| left: position.left + 398 + 'px' | |
| }) | |
| .show() | |
| .find('.add-param span') | |
| .unbind('click') | |
| .click(function() { | |
| $(paramRow) | |
| .insertAfter(theRow) | |
| .find('input.name') | |
| .focus(); | |
| }) | |
| .end() | |
| .find('.delete-param span') | |
| .unbind('click') | |
| .click(function() { | |
| if (theRow.siblings().length > 1) { | |
| theRow.remove(); | |
| $('#param-control').hide(); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Parameters</h1> | |
| <div id="params-container"> | |
| <table id="params"></table> | |
| <!-- control for adding or removing a parameter --> | |
| <ul id="param-control"> | |
| <li class="ui-state-default ui-corner-all add-param" title="Add"> | |
| <span class="ui-icon ui-icon-circle-plus">Add</span> | |
| </li> | |
| <li class="ui-state-default ui-corner-all delete-param" title="Delete"> | |
| <span class="ui-icon ui-icon-circle-close">Delete</span> | |
| </li> | |
| </ul> | |
| <!-- END control for adding or removing a parameter --> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment