Tablerow met contextmenu gezocht
Ik ben op zoek naar een contextmenu voor de tablerow.
Ik weet dat er veel van YUI zijn maar dat vind ik echt troep.
Daarnaast is er ook wel van jQuery maar nadeel van jQuery vind ik dat het framework te groot is.
Ik heb al voor elkaar per row, alleen deze is niet crossbrowser nog (IE7 niet zichtbaar).
Misschien kunnen evt hier reacties op worden gegeven...
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
function showPopupContext() {
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (rightedge < ie8menu.offsetWidth) {
ie8menu.style.left = document.body.scrollLeft + event.clientX - ie8menu.offsetWidth;
} else {
ie8menu.style.left = document.body.scrollLeft + event.clientX;
}
ie8menu.style.top = document.body.scrollTop + event.clientY;
ie8menu.style.display = "block";
return false;
}
function hidePopupContext() {
ie8menu.style.display = "none";
}
function buildMenu() {
ie8menu = document.createElement('div');
ie8menu.setAttribute('id',"ie8menu");
ie8menu.setAttribute('class', 'skin1');
document.body.appendChild(ie8menu);
addItems();
}
function addItems() {
for(var i=0;i<arrItems.length;i++) {
newlink = document.createElement('a');
newlink.setAttribute('class', 'menuitems');
newlink.setAttribute('href', arrItemsLink[i]);
newlink.innerHTML = arrItems[i];
ie8menu.appendChild(newlink);
}
return;
}
/*TABLE*/
// detect IE
var IE = false; /*@cc_on IE=true; @*/
// rows
var r;
// 1 row on 2 are colored (by adding a class name)
function setRows(){
r = document.getElementsByTagName('TR');
}
// to select or unselect, adding or not, row
function selectRow(aRow,add){
var c = aRow.className;
if(add) {
setRows();
hidePopupContext();
}
var b = aRow.className;
//Set value voor straks
//alert();
selected_id = aRow.id;
showPopupContext();
}
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (rightedge < ie8menu.offsetWidth) {
ie8menu.style.left = document.body.scrollLeft + event.clientX - ie8menu.offsetWidth;
} else {
ie8menu.style.left = document.body.scrollLeft + event.clientX;
}
ie8menu.style.top = document.body.scrollTop + event.clientY;
ie8menu.style.display = "block";
return false;
}
function hidePopupContext() {
ie8menu.style.display = "none";
}
function buildMenu() {
ie8menu = document.createElement('div');
ie8menu.setAttribute('id',"ie8menu");
ie8menu.setAttribute('class', 'skin1');
document.body.appendChild(ie8menu);
addItems();
}
function addItems() {
for(var i=0;i<arrItems.length;i++) {
newlink = document.createElement('a');
newlink.setAttribute('class', 'menuitems');
newlink.setAttribute('href', arrItemsLink[i]);
newlink.innerHTML = arrItems[i];
ie8menu.appendChild(newlink);
}
return;
}
/*TABLE*/
// detect IE
var IE = false; /*@cc_on IE=true; @*/
// rows
var r;
// 1 row on 2 are colored (by adding a class name)
function setRows(){
r = document.getElementsByTagName('TR');
}
// to select or unselect, adding or not, row
function selectRow(aRow,add){
var c = aRow.className;
if(add) {
setRows();
hidePopupContext();
}
var b = aRow.className;
//Set value voor straks
//alert();
selected_id = aRow.id;
showPopupContext();
}
en in de header heb ik dit staan:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
function init() {
setHeight("AccordionContainer","outer");
setRows();
for(var i=0;i<r.length;i++) {
r[i].oncontextmenu = function(){ selectRow(this,1); }
}
buildMenu();
}
window.onload = init;
setHeight("AccordionContainer","outer");
setRows();
for(var i=0;i<r.length;i++) {
r[i].oncontextmenu = function(){ selectRow(this,1); }
}
buildMenu();
}
window.onload = init;
Er zijn nog geen reacties op dit bericht.