Added basic modal dialog

This commit is contained in:
Gonzalo Bellver 2011-10-11 13:16:15 -03:00
parent fb40df5dac
commit a5dbd51be7
4 changed files with 103 additions and 43 deletions

View File

@ -90,3 +90,7 @@ body {
/* ----------------------------- Buttons -------------------------------- */
#buttons {
margin-left: 100% - @table-width;
margin-bottom: @base-margin;
}

View File

@ -1,25 +0,0 @@
jQuery.fn.dataTableExt.oSort['es_date-asc'] = function(a,b) {
var ukDatea = a.split('/');
var ukDateb = b.split('/');
var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['es_date-desc'] = function(a,b) {
var ukDatea = a.split('/');
var ukDateb = b.split('/');
var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};/**
* Created by IntelliJ IDEA.
* User: belbo
* Date: 10/11/11
* Time: 11:33 AM
* To change this template use File | Settings | File Templates.
*/

View File

@ -0,0 +1,43 @@
jQuery.fn.dataTableExt.oSort['es_date-asc'] = function(a,b) {
var esDatea = a.split('/');
var esDateb = b.split('/');
var x = (esDatea[2] + esDatea[1] + esDatea[0]) * 1;
var y = (esDateb[2] + esDateb[1] + esDateb[0]) * 1;
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['es_date-desc'] = function(a,b) {
var esDatea = a.split('/');
var esDateb = b.split('/');
var x = (esDatea[2] + esDatea[1] + esDatea[0]) * 1;
var y = (esDateb[2] + esDateb[1] + esDateb[0]) * 1;
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
jQuery.fn.dataTableExt.selectAllMaps = function() {
var total = $('.select input:checkbox[id!="selectAll"]').size();
var selected = $('.select input:checked[id!="selectAll"]').size();
if (selected < total) {
$('.select input:!checked[id!="selectAll"]').each(function(index) {
$(this).prop("checked", true);
});
}
else {
$('.select input:!checked[id!="selectAll"]').each(function(index) {
$(this).prop("checked", false);
});
}
}
jQuery.fn.dataTableExt.getSelectedMaps = function() {
var ids = [];
$('.select input:checked[id!="selectAll"]').each(function(index) {
ids.push($(this).attr("id"));
});
return ids;
}

View File

@ -16,20 +16,21 @@
<script type="text/javascript" language="javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<link href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet">
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="js/es_date.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.plugins.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$('#map-table').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="maps"></table>' );
$('#maps').dataTable( {
var table = $('#maps').dataTable( {
"bProcessing" : true,
"sAjaxSource" : "json_source.txt",
"aoColumns": [
{
"sTitle" : '<input type="checkbox"/>',
"sClass" : "center", "sWidth" : "15px",
"sTitle" : '<input type="checkbox" id="selectAll"/>',
"sClass" : "center select", "sWidth" : "15px",
"bSortable" : false, "bSearchable" : false,
"fnRender" : function(obj) {
return obj.aData[0];
var id = obj.aData[0];
return '<input type="checkbox" id="'+id+'"/>';
}
},
{
@ -43,7 +44,7 @@
{
"sTitle" : "date",
"sType" : "es_date",
"bVisible" : false,
"bVisible" : false, "bSearchable" : false,
"fnRender" :function(obj) {
return obj.aData[4];
}
@ -61,7 +62,7 @@
"sWidth" : "15px",
"bSortable" : false, "bSearchable" : false,
"fnRender" : function(obj) {
return ">";
return '<span class="ui-icon ui-icon-triangle-1-e" style="margin: 0 auto;"></span>';
}
}
@ -73,6 +74,10 @@
});
$('#maps_filter').appendTo("#toolbar");
$('input:checkbox[id="selectAll"]').click(function() {
$("#maps").dataTableExt.selectAllMaps();
});
});
@ -93,15 +98,11 @@
$("#tags-list").html(html);
$("#tags-list button" ).button({
icons: {
primary: "ui-icon-folder-collapsed"
}
icons: { primary: "ui-icon-folder-collapsed" }
});
$("#tags-actions button" ).button({
icons: {
primary: "ui-icon-plus"
}
icons: { primary: "ui-icon-plus" }
});
});
</script>
@ -114,6 +115,40 @@
})
});
</script>
<!--Buttons-->
<script type="text/javascript" charset="utf-8">
$(function() {
$("#buttons .show-tags").button({
icons: { primary: "ui-icon-folder-open" }
});
$("#buttons .share").button({
icons: { primary: "ui-icon-transferthick-e-w" }
});
$("#buttons .delete").button({
icons: { primary: "ui-icon-trash" }
}).click(function() {
var selectedMaps = $('#maps').dataTableExt.getSelectedMaps();
console.log("Delete maps: " +selectedMaps);
var html2 = $('#delete-dialog-modal p span').html(selectedMaps.toString());
console.log(html2);
$( "#delete-dialog-modal" ).dialog({
height: 140,
modal: true,
buttons: {
"Delete": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
})
</script>
</head>
<body>
@ -122,10 +157,13 @@
</div>
<div id="map-table-actions">
<button>Organiser</button>
<button>Partager</button>
<button>Supprimer</button>
<div id="buttons">
<div id="delete-dialog-modal" title="Delete maps" style="display: none">
<p>Are you sure you want to delete maps <span></span> ?</p>
</div>
<button class="show-tags">Organiser</button>
<button class="share">Partager</button>
<button class="delete">Supprimer</button>
</div>
<div>