home/jQuery-Tags-Input
2
0
Fork 0
mirror of https://github.com/wahyd4/jQuery-Tags-Input.git synced 2026-08-09 04:46:44 +10:00
Code Issues Packages Projects Releases Wiki Activity

Working autosize

Browse Source
This commit is contained in:
David Haslem
2011-08-22 12:31:11 -04:00
parent 53ffc5f6ed
commit 37a4fb1e8e
1 changed files with 58 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jquery.tagsinput.js
+58 -7
View File
@@ -18,12 +18,60 @@
var delimiter = new Array();
var tags_callbacks = new Array();
$.fn.doAutosize = function(options){
alert(JSON.stringify(options));
}
$.fn.doAutosize = function(o){
var minWidth = $(this).data('minwidth'),
maxWidth = $(this).data('maxwidth'),
val = '',
input = $(this),
testSubject = $('#'+$(this).data('tester_id'));
if (val === (val = input.val())) {return;}
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,' ').replace(/</g, '&lt;').replace(/>/g, '&gt;');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
$.fn.resetAutosize = function(options){
alert(JSON.stringify(options));
}
// alert(JSON.stringify(options));
var minWidth = $(this).data('minwidth') || options.minInputWidth || $(this).width(),
maxWidth = $(this).data('maxwidth') || options.maxInputWidth || ($(this).closest('.tagsinput').width() - options.inputPadding),
val = '',
input = $(this),
testSubject = $('<tester/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap'
}),
testerId = $(this).attr('id')+'_autosize_tester';
if(! $('#'+testerId).length > 0){
testSubject.attr('id', testerId);
testSubject.appendTo('body');
}
input.data('minwidth', minWidth);
input.data('maxwidth', maxWidth);
input.data('tester_id', testerId);
input.css('width', minWidth);
};
$.fn.addTag = function(value,options) {
var options = jQuery.extend({focus:false,callback:true},options);
this.each(function() {
@@ -135,7 +183,9 @@
'unique':true,
removeWithBackspace:true,
placeholderColor:'#666666',
autosize: true
autosize: true,
comfortZone: 20,
inputPadding: 6*2,
},options);
this.each(function() {
@@ -181,7 +231,8 @@
}
if (settings.interactive) {
$(data.fake_input).val($(data.fake_input).attr('data-default'));
$(data.fake_input).css('color',settings.placeholderColor);
$(data.fake_input).css('color',settings.placeholderColor);
$(data.fake_input).resetAutosize(settings);
$(data.holder).bind('click',data,function(event) {
$(event.data.fake_input).focus();