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

@ -89,4 +89,8 @@ body {
} }
/* ----------------------------- Buttons -------------------------------- */ /* ----------------------------- 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> <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"> <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/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"> <script type="text/javascript" charset="utf-8">
$(function() { $(function() {
$('#map-table').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="maps"></table>' ); $('#map-table').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="maps"></table>' );
$('#maps').dataTable( { var table = $('#maps').dataTable( {
"bProcessing" : true, "bProcessing" : true,
"sAjaxSource" : "json_source.txt", "sAjaxSource" : "json_source.txt",
"aoColumns": [ "aoColumns": [
{ {
"sTitle" : '<input type="checkbox"/>', "sTitle" : '<input type="checkbox" id="selectAll"/>',
"sClass" : "center", "sWidth" : "15px", "sClass" : "center select", "sWidth" : "15px",
"bSortable" : false, "bSearchable" : false, "bSortable" : false, "bSearchable" : false,
"fnRender" : function(obj) { "fnRender" : function(obj) {
return obj.aData[0]; var id = obj.aData[0];
return '<input type="checkbox" id="'+id+'"/>';
} }
}, },
{ {
@ -43,7 +44,7 @@
{ {
"sTitle" : "date", "sTitle" : "date",
"sType" : "es_date", "sType" : "es_date",
"bVisible" : false, "bVisible" : false, "bSearchable" : false,
"fnRender" :function(obj) { "fnRender" :function(obj) {
return obj.aData[4]; return obj.aData[4];
} }
@ -61,7 +62,7 @@
"sWidth" : "15px", "sWidth" : "15px",
"bSortable" : false, "bSearchable" : false, "bSortable" : false, "bSearchable" : false,
"fnRender" : function(obj) { "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"); $('#maps_filter').appendTo("#toolbar");
$('input:checkbox[id="selectAll"]').click(function() {
$("#maps").dataTableExt.selectAllMaps();
});
}); });
@ -93,15 +98,11 @@
$("#tags-list").html(html); $("#tags-list").html(html);
$("#tags-list button" ).button({ $("#tags-list button" ).button({
icons: { icons: { primary: "ui-icon-folder-collapsed" }
primary: "ui-icon-folder-collapsed"
}
}); });
$("#tags-actions button" ).button({ $("#tags-actions button" ).button({
icons: { icons: { primary: "ui-icon-plus" }
primary: "ui-icon-plus"
}
}); });
}); });
</script> </script>
@ -114,6 +115,40 @@
}) })
}); });
</script> </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> </head>
<body> <body>
@ -122,10 +157,13 @@
</div> </div>
<div id="map-table-actions"> <div id="buttons">
<button>Organiser</button> <div id="delete-dialog-modal" title="Delete maps" style="display: none">
<button>Partager</button> <p>Are you sure you want to delete maps <span></span> ?</p>
<button>Supprimer</button> </div>
<button class="show-tags">Organiser</button>
<button class="share">Partager</button>
<button class="delete">Supprimer</button>
</div> </div>
<div> <div>