Skip to content

Instantly share code, notes, and snippets.

@utensil

utensil/matrix.html

Created August 28, 2011 12:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save utensil/1176637 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save utensil/1176637 to your computer and use it in GitHub Desktop.
Download ZIP
A simple js page to do elementary transformation of matrix.
Raw
matrix.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>matrix</title>
<meta name="author" content="">
<link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/screen.css" _href="../stylesheets/blueprint/screen.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/redmond/jquery-ui.css" type="text/css" media="all"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://www.appelsiini.net/download/jquery.jeditable.mini.js" type="text/javascript"></script>
<!-- <script type="application/javascript" src="../javascripts/jquery.min.js"></script>
<script type="application/javascript" src="../javascripts/jquery-ui.min.js"></script> -->
<style type="text/css">
#matrix, tr.ui-sortable-helper
{
width: 30em;
}
#matrix td, tr.ui-sortable-helper td
{
text-align: center;
width: 10em;
height: 10em;
}
#matrix tbody tr:nth-child(even) td, #matrix tbody tr.even td
{
background: none;
}
input.text { margin-bottom:12px; width:95%; padding: .4em; }
</style>
<script type="application/javascript">
function mutiply_add_inner(from, k, to)
{
return parseInt(from) * parseInt(k) + parseInt(to);
}
function mutiply_add(from, k, to)
{
var from_array = [];
from.find('td').each(function(index)
{
from_array.push($(this).text());
});
to.find('td').each(function(index)
{
var result = mutiply_add_inner(from_array[index], k, $(this).text());
$(this).text(result);
});
}
$(function() {
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 270,
width: 350,
modal: true,
open: function(event, ui)
{
var scenario = $( "#dialog-form" ).dialog("option", "scenario");
$( "#dialog-form #transform-type").buttonset();
$( "#dialog-form #transform-type #transform-type-swap").click(function(e)
{
$('label[for="transform-k"]').hide();
$("#transform-k").hide();
$('#dialog-form #transform-type').attr('type_value', 'swap');
});
$( "#dialog-form #transform-type #transform-type-multiply-add").click(function(e)
{
$('label[for="transform-k"]').show();
$("#transform-k").show();
$('#dialog-form #transform-type').attr('type_value', 'multiply-add');
});
$( "#dialog-form #transform-type #transform-type-multiply").click(function(e)
{
$('label[for="transform-k"]').show();
$("#transform-k").show();
$('#dialog-form #transform-type').attr('type_value', 'multiply');
});
if(scenario == "DnD")
{
$('label[for="transform-type-swap"]').show();
$('label[for="transform-type-multiply-add"]').show();
$('label[for="transform-type-multiply"]').hide();
$( "#dialog-form #transform-type #transform-type-multiply").hide();
$( "#dialog-form #transform-type #transform-type-multiply-add").click();
}
else
{
$('label[for="transform-type-swap"]').hide();
$('label[for="transform-type-multiply-add"]').hide();
$('label[for="transform-type-multiply"]').show();
$( "#dialog-form #transform-type #transform-type-multiply").click();
}
},
buttons: {
"确定": function() {
var bValid = true;
var from = $( "#dialog-form" ).dialog("option", "from");
var to = $( "#dialog-form" ).dialog("option", "to");
var type_value = $('#dialog-form #transform-type').attr('type_value');
var k = $('#dialog-form #transform-k').attr('value');
if(/^[0-9]+$/.test(k) || type_value == 'swap')
{
bValid = true;
}
else
{
bValid = false;
}
if ( bValid )
{
$('#dialog-form #transform-k').removeClass('ui-state-error');
if(type_value == 'multiply-add')
{
mutiply_add(from, k, to);
//$(to).effect("pulsate");
$(from).effect("highlight", {speed: "slow"});
$(to).effect("highlight", {speed: "slow"});
}
else if(type_value == 'multiply')
{
to.find('td').each(function(index)
{
var result = parseInt(k) * parseInt($(this).text());
$(this).text(result);
});
}
else
{
clone = from.clone();
clone.insertAfter(to);
initRow(clone);
to.insertAfter(from);
from.remove();
$(clone).effect("highlight", {speed: "slow"});
$(to).effect("highlight", {speed: "slow"});
}
$('#dialog-form #transform-k').attr('value', '');
$( this ).dialog( "close" );
}
else
{
$('#dialog-form #transform-k').addClass('ui-state-error');
$( $( "#dialog-form" ).dialog('widget') )
//.effect('shake', {speed: 50});
.effect('bounce', {speed: 50});
}
},
Cancel: function() {
$('#dialog-form #transform-k').attr('value', '');
$('#dialog-form #transform-k').removeClass('ui-state-error');
$( this ).dialog( "close" );
}
},
close: function() {
}
});
$(".matrix-rows tr").addClass("ui-widget-content");
function initRow(this_row)
{
$('td', this_row).editable(function(value, settings)
{
return value;
},
{});
$(this_row).hover(function()
{
$(this).addClass("ui-state-hover");
},
function()
{
$(this).removeClass("ui-state-hover");
});
$(this_row).dblclick(function(event){
$( "#dialog-form" ).dialog( "option", "from", $(this_row));
$( "#dialog-form" ).dialog( "option", "to", $(this_row));
$( "#dialog-form" ).dialog("option", "scenario", "Single");
$( "#dialog-form" ).dialog( "open" );
});
$(this_row).draggable({ opacity: 0.7, helper: "clone"});
$(this_row).droppable({
drop: function( event, ui ) {
$( "#dialog-form" ).dialog( "option", "from", ui.draggable);
$( "#dialog-form" ).dialog( "option", "to", $(this_row));
$( "#dialog-form" ).dialog("option", "scenario", "DnD");
$( "#dialog-form" ).dialog( "open" );
},
hoverClass: "ui-state-hover"
});
}
$(".matrix-rows tr").each(function(index)
{
initRow(this);
});
});
// $( ".matrix-rows" ).sortable({
// change: function(event, ui)
// {
// //alert("change");
// }
// });
//
</script>
</head>
<body>
<div class="span-14 prepend-11 append-11 last">
<table class="" id="matrix">
<!-- <thead>
<tr>
<th>Rendering engine</th>
</tr>
</thead> -->
<tbody class="matrix-rows">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
</div>
<div>
<div id="dialog-form" title="行初等变换">
<div class="ui-widget">
<div class="ui-corner-all" >
<p><span class="ui-icon ui-icon-info" style="float: left"></span>请选择希望进行的初等变换：</p>
</div>
</div>
<form>
<fieldset>
<div id="transform-type">
<input type="radio" id="transform-type-swap" name="transform-type" />
<label for="transform-type-swap">交换两行</label>
<input type="radio" id="transform-type-multiply-add" name="transform-type"/>
<label for="transform-type-multiply-add">乘以k加上</label>
<input type="radio" id="transform-type-multiply" name="transform-type"/>
<label for="transform-type-multiply">当前行乘以k</label>
</div>
<label for="transform-k">k=</label>
<input type="text" name="transform-k" id="transform-k"
class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
</div>
</body>
</html>
@utensil

utensil commented Aug 28, 2011

Copy link
Copy Markdown
Author

Integrated jEditable so the datas in the matrix is now editable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment