1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-08-31 14:42:10 +00:00

[@]improved menu position

This commit is contained in:
llj
2012-08-29 20:22:56 +08:00
parent cac0727eaa
commit 01bd71713e
3 changed files with 23 additions and 6 deletions

View File

@@ -206,7 +206,7 @@ $(function() {
member_list.push({value:nickname + pinyin, label:nickname});
{% endfor %}
addAtAutocomplete('#message', '#group-message-form', member_list);
addAtAutocomplete('#message', '#group-message-form', member_list, {'border':'1px solid #ddd', 'width':'600px', 'height': '80px', 'word-wrap':'break-word', 'overflow-y':'auto'});
});
$("table tr:gt(0)").hover(

View File

@@ -810,6 +810,8 @@ ul.with-bg li {
color:#333;
}
#message {
font: 13px/1.5 Arial, Helvetica, sans-serif;
word-wrap: break-word;
width: 600px;
height: 80px;
margin-top: 4px;
@@ -1030,4 +1032,4 @@ ul.with-bg li {
/* File comment */
#file-comment {
margin-top: 60px;
}
}

View File

@@ -78,11 +78,16 @@ function addAutocomplete(ele_id, container_id, data) {
/*
* func: add autocomplete for `@` to some input ele
* @param ele_id: autocomplete is added to this ele(ment), e.g-'#xxx'
* @param ele_css: {'xx':'xxx'}, to be added to ele_cp(a cp of ele)
* @param container_id: id of autocomplete's container, often container of element above
* @param data: tip data in array, e.g- ['xx', 'yy']
*/
function addAtAutocomplete(ele_id, container_id, data) {
function addAtAutocomplete(ele_id, container_id, data, ele_css) {
var pos = '';
var ele_cp = '<div id="' + ele_id.substring(1) + '-cp"></div>';
$('#main').append(ele_cp);
ele_cp = $(ele_id + '-cp');
ele_cp.css({'position':'absolute', 'left':0, 'bottom':0, 'z-index':-10000, 'visibility':'hidden', 'white-space':'pre-wrap'}).css(ele_css);
$(ele_id)
.bind("keydown", function(event) {
if (event.keyCode === $.ui.keyCode.TAB &&
@@ -92,13 +97,22 @@ function addAtAutocomplete(ele_id, container_id, data) {
})
.bind('keypress', function(e) {
if (String.fromCharCode(e.keyCode || e.charCode) == '@') {
var str = '';
pos = getCaretPos($(ele_id)[0]); // get cursor position
if (pos == $(this).val().length) {
cursor_at_end = true;
str = $(this).val();
} else {
cursor_at_end = false;
end_str = $(this).val().substring(pos);
str = $(this).val().substring(0, pos);
}
ele_cp.html(str + '<span id="' + ele_id.substring(1) + '-at">@</span>');
at_pos = $(ele_id + '-at').position();
var x = at_pos.left,
y = at_pos.top + parseInt(ele_cp.css('line-height')) - 2 - $(ele_id).scrollTop();
$(ele_id).autocomplete("option", "position", { my : "left top", at: "left top", offset: x + ' ' + y, collision: 'fit'});
ele_scrollTop = $(ele_id).scrollTop();
}
})
.autocomplete({
@@ -125,10 +139,10 @@ function addAtAutocomplete(ele_id, container_id, data) {
response(null); // when cursor is at the left of current @ or @ is deleted
}
},
focus: function(event, ui) {
focus: function(e, ui) {
return false;
},
select: function(event, ui) {
select: function(e, ui) {
var str = $(this).val().substring(0, pos + 1) + ui.item.label + ' ';
if (cursor_at_end) {
$(this).val(str);
@@ -136,6 +150,7 @@ function addAtAutocomplete(ele_id, container_id, data) {
$(this).val(str + end_str);
setCaretPos($(this)[0], pos + ui.item.label.length + 2);
}
$(ele_id).scrollTop(ele_scrollTop); // fix ff problem: ele scrolls to the top most.
return false;
}
});