diff --git a/selectpage.css b/selectpage.css index 6c4e57e..308f299 100644 --- a/selectpage.css +++ b/selectpage.css @@ -136,7 +136,7 @@ div.sp_clear_btn.sp_align_right { margin: 0; padding: 0; position: absolute; - z-index: 100; + z-index: 1040; width: 300px; border-radius: 2px; } diff --git a/selectpage.js b/selectpage.js index 053b3df..1be8f82 100644 --- a/selectpage.js +++ b/selectpage.js @@ -17,7 +17,7 @@ /** * Data source * @type {string|Object} - * + * * string:server side request url address * Object:JSON array,format:[{a:1,b:2,c:3},{...}] */ @@ -25,54 +25,54 @@ /** * Language ('cn', 'en', 'ja', 'es', 'pt-br') * @type string - * @default 'cn' + * @default 'cn' */ lang: 'cn', /** - * Multiple select mode(tags) + * Multiple select mode(tags) * @type boolean - * @default false + * @default false */ multiple: false, - /** - * pagination or not - * @type boolean - * @default true - */ - pagination: true, - /** - * Show up menu button - * @type boolean - * @default true - */ - dropButton: true, - /** - * Result list visible size in pagination bar close - * @type number - * @default 10 - */ - listSize : 10, + /** + * pagination or not + * @type boolean + * @default true + */ + pagination: true, + /** + * Show up menu button + * @type boolean + * @default true + */ + dropButton: true, + /** + * Result list visible size in pagination bar close + * @type number + * @default 10 + */ + listSize : 10, /** * Show control bar in multiple select mode * @type boolean - * @default true + * @default true */ multipleControlbar: true, /** - * Max selected item limited in multiple select mode + * Max selected item limited in multiple select mode * @type number - * @default 0(unlimited) + * @default 0(unlimited) */ maxSelectLimit: 0, /** * Select result item to close list, work on multiple select mode * @type boolean - * @default false + * @default false */ selectToCloseList: false, /** - * Init selected item key, the result will match to option.keyField option - * @type string + * Init selected item key, the result will match to option.keyField option + * @type string */ initRecord: undefined, /** @@ -81,72 +81,72 @@ */ dbTable: 'tbl', /** - * The value field, the value will fill to hidden element + * The value field, the value will fill to hidden element * @type string - * @default 'id' + * @default 'id' */ keyField: 'id', /** - * The show text field, the text will show to input element or tags(multiple mode) + * The show text field, the text will show to input element or tags(multiple mode) * @type string - * @default 'name' + * @default 'name' */ showField: 'name', /** - * Actually used to search field + * Actually used to search field * @type string */ searchField : undefined, /** * Search type ('AND' or 'OR') * @type string - * @default 'AND' + * @default 'AND' */ andOr: 'AND', - /** - * Result sort type - * @type array|boolean - * @example - * orderBy : ['id desc'] - */ - orderBy: false, + /** + * Result sort type + * @type array|boolean + * @example + * orderBy : ['id desc'] + */ + orderBy: false, /** * Page size * @type number - * @default 10 + * @default 10 */ pageSize: 10, /** - * Server side request parameters + * Server side request parameters * @type function * @return object * @example params : function(){return {'name':'aa','sex':1};} */ params : undefined, /** - * Custom result list item show text + * Custom result list item show text * @type function * @param data {object} row data * @return string */ formatItem : undefined, - /** - * Have some highlight item and lost focus, auto select the highlight item - * @type boolean - * @default false - */ - autoFillResult: false, /** - * Auto select first item in show up result list or search result - * depend on `autoFillResult` option set to true + * Have some highlight item and lost focus, auto select the highlight item + * @type boolean + * @default false + */ + autoFillResult: false, + /** + * Auto select first item in show up result list or search result + * depend on `autoFillResult` option set to true * @type boolean - * @default false + * @default false */ autoSelectFirst: false, /** - * Whether clear input element text when enter some keywords to search and no result return + * Whether clear input element text when enter some keywords to search and no result return * @type boolean - * @default true + * @default true */ noResultClean: true, /** @@ -154,34 +154,34 @@ * @type boolean */ selectOnly: false, - /** - * Input to search delay time, work on ajax data source - * @type number - * @default 0.5 - */ - inputDelay: 0.5, + /** + * Input to search delay time, work on ajax data source + * @type number + * @default 0.5 + */ + inputDelay: 0.5, /** * -----------------------------------------Callback-------------------------------------------- */ /** * Result list item selected callback - * @type function + * @type function * @param object - selected item json data * @param self - plugin object */ eSelect : undefined, - /** - * Before result list show up callback, you can do anything prepared - * @param self - plugin object - */ - eOpen : undefined, /** - * Server side return data convert callback + * Before result list show up callback, you can do anything prepared + * @param self - plugin object + */ + eOpen : undefined, + /** + * Server side return data convert callback * @type function * @param data {object} server side return data - * @param self {object} plugin object + * @param self {object} plugin object * @return {object} return data format: - * @example + * @example * { * list : [{name:'aa',sex:1},{name:'bb',sex:1}...], * totalRow : 100 @@ -189,23 +189,23 @@ */ eAjaxSuccess : undefined, /** - * Close selected item tag callback (multiple mode) + * Close selected item tag callback (multiple mode) * @type function * @param removeCount {number} remove item count - * @param self {object} plugin object + * @param self {object} plugin object */ eTagRemove : undefined, - /** - * Clear selected item callback(single select mode) - * @type function - * @param self {object} plugin object - */ - eClear : undefined + /** + * Clear selected item callback(single select mode) + * @type function + * @param self {object} plugin object + */ + eClear : undefined }; /** - * SelectPage class definition + * SelectPage class definition * @constructor * @param {Object} input - input element * @param {Object} option @@ -239,7 +239,7 @@ SelectPage.prototype.setOption = function(option) { //use showField to default option.searchField = option.searchField || option.showField; - + option.andOr = option.andOr.toUpperCase(); if(option.andOr!=='AND' && option.andOr!=='OR') option.andOr = 'AND'; @@ -252,13 +252,13 @@ //set multiple order field //example: [ ['id ASC'], ['name DESC'] ] if(option.orderBy !== false) option.orderBy = this.setOrderbyOption(option.orderBy, option.showField); - //close auto fill result and auto select first in multiple mode and select item not close list + //close auto fill result and auto select first in multiple mode and select item not close list if(option.multiple && !option.selectToCloseList){ option.autoFillResult = false; option.autoSelectFirst = false; } - //show all item when pagination bar close, limited 200 - if(!option.pagination) option.pageSize = 200; + //show all item when pagination bar close, limited 200 + if(!option.pagination) option.pageSize = 200; if($.type(option.listSize) !== 'number' || option.listSize < 0) option.listSize = 10; this.option = option; @@ -284,7 +284,8 @@ if (typeof arg_order === 'object') { for (var i = 0; i < arg_order.length; i++) { orders = $.trim(arg_order[i]).split(' '); - if(orders.length) arr.push((orders.length === 2) ? orders.concat(): [orders[0], 'ASC']); + if(orders.length) + arr.push((orders.length === 2) ? orders.concat(): [orders[0], 'ASC']); } } else { orders = $.trim(arg_order).split(' '); @@ -299,197 +300,197 @@ SelectPage.prototype.setLanguage = function() { var message, p = this.option; switch (p.lang) { - // German - case 'de': - message = { - add_btn: 'Hinzufügen-Button', - add_title: 'Box hinzufügen', - del_btn: 'Löschen-Button', - del_title: 'Box löschen', - next: 'Nächsten', - next_title: 'Nächsten' + p.pageSize + ' (Pfeil-rechts)', - prev: 'Vorherigen', - prev_title: 'Vorherigen' + p.pageSize + ' (Pfeil-links)', - first_title: 'Ersten (Umschalt + Pfeil-links)', - last_title: 'Letzten (Umschalt + Pfeil-rechts)', - get_all_btn: 'alle (Pfeil-runter)', - get_all_alt: '(Button)', - close_btn: 'Schließen (Tab)', - close_alt: '(Button)', - loading: 'lade...', - loading_alt: '(lade)', - page_info: 'page_num von page_count', - select_ng: 'Achtung: Bitte wählen Sie aus der Liste aus.', - select_ok: 'OK : Richtig ausgewählt.', - not_found: 'nicht gefunden', - ajax_error: 'Bei der Verbindung zum Server ist ein Fehler aufgetreten.', - clear: 'Löschen Sie den Inhalt', - select_all: 'Wähle diese Seite', - unselect_all: 'Diese Seite entfernen', - clear_all: 'Alles löschen', - max_selected: 'Sie können nur bis zu max_selected_limit Elemente auswählen' - }; - break; - - // English - case 'en': - message = { - add_btn: 'Add button', - add_title: 'add a box', - del_btn: 'Del button', - del_title: 'delete a box', - next: 'Next', - next_title: 'Next' + p.pageSize + ' (Right key)', - prev: 'Prev', - prev_title: 'Prev' + p.pageSize + ' (Left key)', - first_title: 'First (Shift + Left key)', - last_title: 'Last (Shift + Right key)', - get_all_btn: 'Get All (Down key)', - get_all_alt: '(button)', - close_btn: 'Close (Tab key)', - close_alt: '(button)', - loading: 'loading...', - loading_alt: '(loading)', - page_info: 'Page page_num of page_count', - select_ng: 'Attention : Please choose from among the list.', - select_ok: 'OK : Correctly selected.', - not_found: 'not found', - ajax_error: 'An error occurred while connecting to server.', - clear: 'Clear content', - select_all: 'Select current page', - unselect_all: 'Clear current page', - clear_all: 'Clear all selected', - max_selected: 'You can only select up to max_selected_limit items' - }; - break; - - // Spanish - case 'es': - message = { - add_btn: 'Agregar boton', - add_title: 'Agregar una opcion', - del_btn: 'Borrar boton', - del_title: 'Borrar una opcion', - next: 'Siguiente', - next_title: 'Proximas ' + p.pageSize + ' (tecla derecha)', - prev: 'Anterior', - prev_title: 'Anteriores ' + p.pageSize + ' (tecla izquierda)', - first_title: 'Primera (Shift + Left)', - last_title: 'Ultima (Shift + Right)', - get_all_btn: 'Ver todos (tecla abajo)', - get_all_alt: '(boton)', - close_btn: 'Cerrar (tecla TAB)', - close_alt: '(boton)', - loading: 'Cargando...', - loading_alt: '(Cargando)', - page_info: 'page_num de page_count', - select_ng: 'Atencion: Elija una opcion de la lista.', - select_ok: 'OK: Correctamente seleccionado.', - not_found: 'no encuentre', - ajax_error: 'Un error ocurrió mientras conectando al servidor.', - clear: 'Borrar el contenido', - select_all: 'Elija esta página', - unselect_all: 'Borrar esta página', - clear_all: 'Borrar todo marcado', - max_selected: 'Solo puedes seleccionar hasta max_selected_limit elementos' - }; - break; - - // Brazilian Portuguese - case 'pt-br': - message = { - add_btn: 'Adicionar botão', - add_title: 'Adicionar uma caixa', - del_btn: 'Apagar botão', - del_title: 'Apagar uma caixa', - next: 'Próxima', - next_title: 'Próxima ' + p.pageSize + ' (tecla direita)', - prev: 'Anterior', - prev_title: 'Anterior ' + p.pageSize + ' (tecla esquerda)', - first_title: 'Primeira (Shift + Left)', - last_title: 'Última (Shift + Right)', - get_all_btn: 'Ver todos (Seta para baixo)', - get_all_alt: '(botão)', - close_btn: 'Fechar (tecla TAB)', - close_alt: '(botão)', - loading: 'Carregando...', - loading_alt: '(Carregando)', - page_info: 'page_num de page_count', - select_ng: 'Atenção: Escolha uma opção da lista.', - select_ok: 'OK: Selecionado Corretamente.', - not_found: 'não encontrado', - ajax_error: 'Um erro aconteceu enquanto conectando a servidor.', - clear: 'Limpe o conteúdo', - select_all: 'Selecione a página atual', - unselect_all: 'Remova a página atual', - clear_all: 'Limpar tudo', - max_selected: 'Você só pode selecionar até max_selected_limit itens' - }; - break; - - // Japanese - case 'ja': - message = { - add_btn: '追加ボタン', - add_title: '入力ボックスを追加します', - del_btn: '削除ボタン', - del_title: '入力ボックスを削除します', - next: '次へ', - next_title: '次の' + p.pageSize + '件 (右キー)', - prev: '前へ', - prev_title: '前の' + p.pageSize + '件 (左キー)', - first_title: '最初のページへ (Shift + 左キー)', - last_title: '最後のページへ (Shift + 右キー)', - get_all_btn: '全件取得 (下キー)', - get_all_alt: '画像:ボタン', - close_btn: '閉じる (Tabキー)', - close_alt: '画像:ボタン', - loading: '読み込み中...', - loading_alt: '画像:読み込み中...', - page_info: 'page_num 件 (全 page_count 件)', - select_ng: '注意 : リストの中から選択してください', - select_ok: 'OK : 正しく選択されました。', - not_found: '(0 件)', - ajax_error: 'サーバとの通信でエラーが発生しました。', - clear: 'コンテンツをクリアする', - select_all: '当ページを選びます', - unselect_all: '移して当ページを割ります', - clear_all: '選択した項目をクリアする', - max_selected: '最多で max_selected_limit のプロジェクトを選ぶことしかできません' - }; - break; - // 中文 - case 'cn': - default: - message = { - add_btn: '添加按钮', - add_title: '添加区域', - del_btn: '删除按钮', - del_title: '删除区域', - next: '下一页', - next_title: '下' + p.pageSize + ' (→)', - prev: '上一页', - prev_title: '上' + p.pageSize + ' (←)', - first_title: '首页 (Shift + ←)', - last_title: '尾页 (Shift + →)', - get_all_btn: '获得全部 (↓)', - get_all_alt: '(按钮)', - close_btn: '关闭 (Tab键)', - close_alt: '(按钮)', - loading: '读取中...', - loading_alt: '(读取中)', - page_info: '第 page_num 页(共page_count页)', - select_ng: '请注意:请从列表中选择.', - select_ok: 'OK : 已经选择.', - not_found: '无查询结果', - ajax_error: '连接到服务器时发生错误!', - clear: '清除内容', - select_all: '选择当前页项目', - unselect_all: '取消选择当前页项目', - clear_all: '清除全部已选择项目', - max_selected: '最多只能选择 max_selected_limit 个项目' - }; - break; + // German + case 'de': + message = { + add_btn: 'Hinzufügen-Button', + add_title: 'Box hinzufügen', + del_btn: 'Löschen-Button', + del_title: 'Box löschen', + next: 'Nächsten', + next_title: 'Nächsten' + p.pageSize + ' (Pfeil-rechts)', + prev: 'Vorherigen', + prev_title: 'Vorherigen' + p.pageSize + ' (Pfeil-links)', + first_title: 'Ersten (Umschalt + Pfeil-links)', + last_title: 'Letzten (Umschalt + Pfeil-rechts)', + get_all_btn: 'alle (Pfeil-runter)', + get_all_alt: '(Button)', + close_btn: 'Schließen (Tab)', + close_alt: '(Button)', + loading: 'lade...', + loading_alt: '(lade)', + page_info: 'page_num von page_count', + select_ng: 'Achtung: Bitte wählen Sie aus der Liste aus.', + select_ok: 'OK : Richtig ausgewählt.', + not_found: 'nicht gefunden', + ajax_error: 'Bei der Verbindung zum Server ist ein Fehler aufgetreten.', + clear: 'Löschen Sie den Inhalt', + select_all: 'Wähle diese Seite', + unselect_all: 'Diese Seite entfernen', + clear_all: 'Alles löschen', + max_selected: 'Sie können nur bis zu max_selected_limit Elemente auswählen' + }; + break; + + // English + case 'en': + message = { + add_btn: 'Add button', + add_title: 'add a box', + del_btn: 'Del button', + del_title: 'delete a box', + next: 'Next', + next_title: 'Next' + p.pageSize + ' (Right key)', + prev: 'Prev', + prev_title: 'Prev' + p.pageSize + ' (Left key)', + first_title: 'First (Shift + Left key)', + last_title: 'Last (Shift + Right key)', + get_all_btn: 'Get All (Down key)', + get_all_alt: '(button)', + close_btn: 'Close (Tab key)', + close_alt: '(button)', + loading: 'loading...', + loading_alt: '(loading)', + page_info: 'Page page_num of page_count', + select_ng: 'Attention : Please choose from among the list.', + select_ok: 'OK : Correctly selected.', + not_found: 'not found', + ajax_error: 'An error occurred while connecting to server.', + clear: 'Clear content', + select_all: 'Select current page', + unselect_all: 'Clear current page', + clear_all: 'Clear all selected', + max_selected: 'You can only select up to max_selected_limit items' + }; + break; + + // Spanish + case 'es': + message = { + add_btn: 'Agregar boton', + add_title: 'Agregar una opcion', + del_btn: 'Borrar boton', + del_title: 'Borrar una opcion', + next: 'Siguiente', + next_title: 'Proximas ' + p.pageSize + ' (tecla derecha)', + prev: 'Anterior', + prev_title: 'Anteriores ' + p.pageSize + ' (tecla izquierda)', + first_title: 'Primera (Shift + Left)', + last_title: 'Ultima (Shift + Right)', + get_all_btn: 'Ver todos (tecla abajo)', + get_all_alt: '(boton)', + close_btn: 'Cerrar (tecla TAB)', + close_alt: '(boton)', + loading: 'Cargando...', + loading_alt: '(Cargando)', + page_info: 'page_num de page_count', + select_ng: 'Atencion: Elija una opcion de la lista.', + select_ok: 'OK: Correctamente seleccionado.', + not_found: 'no encuentre', + ajax_error: 'Un error ocurrió mientras conectando al servidor.', + clear: 'Borrar el contenido', + select_all: 'Elija esta página', + unselect_all: 'Borrar esta página', + clear_all: 'Borrar todo marcado', + max_selected: 'Solo puedes seleccionar hasta max_selected_limit elementos' + }; + break; + + // Brazilian Portuguese + case 'pt-br': + message = { + add_btn: 'Adicionar botão', + add_title: 'Adicionar uma caixa', + del_btn: 'Apagar botão', + del_title: 'Apagar uma caixa', + next: 'Próxima', + next_title: 'Próxima ' + p.pageSize + ' (tecla direita)', + prev: 'Anterior', + prev_title: 'Anterior ' + p.pageSize + ' (tecla esquerda)', + first_title: 'Primeira (Shift + Left)', + last_title: 'Última (Shift + Right)', + get_all_btn: 'Ver todos (Seta para baixo)', + get_all_alt: '(botão)', + close_btn: 'Fechar (tecla TAB)', + close_alt: '(botão)', + loading: 'Carregando...', + loading_alt: '(Carregando)', + page_info: 'page_num de page_count', + select_ng: 'Atenção: Escolha uma opção da lista.', + select_ok: 'OK: Selecionado Corretamente.', + not_found: 'não encontrado', + ajax_error: 'Um erro aconteceu enquanto conectando a servidor.', + clear: 'Limpe o conteúdo', + select_all: 'Selecione a página atual', + unselect_all: 'Remova a página atual', + clear_all: 'Limpar tudo', + max_selected: 'Você só pode selecionar até max_selected_limit itens' + }; + break; + + // Japanese + case 'ja': + message = { + add_btn: '追加ボタン', + add_title: '入力ボックスを追加します', + del_btn: '削除ボタン', + del_title: '入力ボックスを削除します', + next: '次へ', + next_title: '次の' + p.pageSize + '件 (右キー)', + prev: '前へ', + prev_title: '前の' + p.pageSize + '件 (左キー)', + first_title: '最初のページへ (Shift + 左キー)', + last_title: '最後のページへ (Shift + 右キー)', + get_all_btn: '全件取得 (下キー)', + get_all_alt: '画像:ボタン', + close_btn: '閉じる (Tabキー)', + close_alt: '画像:ボタン', + loading: '読み込み中...', + loading_alt: '画像:読み込み中...', + page_info: 'page_num 件 (全 page_count 件)', + select_ng: '注意 : リストの中から選択してください', + select_ok: 'OK : 正しく選択されました。', + not_found: '(0 件)', + ajax_error: 'サーバとの通信でエラーが発生しました。', + clear: 'コンテンツをクリアする', + select_all: '当ページを選びます', + unselect_all: '移して当ページを割ります', + clear_all: '選択した項目をクリアする', + max_selected: '最多で max_selected_limit のプロジェクトを選ぶことしかできません' + }; + break; + // 中文 + case 'cn': + default: + message = { + add_btn: '添加按钮', + add_title: '添加区域', + del_btn: '删除按钮', + del_title: '删除区域', + next: '下一页', + next_title: '下' + p.pageSize + ' (→)', + prev: '上一页', + prev_title: '上' + p.pageSize + ' (←)', + first_title: '首页 (Shift + ←)', + last_title: '尾页 (Shift + →)', + get_all_btn: '获得全部 (↓)', + get_all_alt: '(按钮)', + close_btn: '关闭 (Tab键)', + close_alt: '(按钮)', + loading: '读取中...', + loading_alt: '(读取中)', + page_info: '第 page_num 页(共page_count页)', + select_ng: '请注意:请从列表中选择.', + select_ok: 'OK : 已经选择.', + not_found: '无查询结果', + ajax_error: '连接到服务器时发生错误!', + clear: '清除内容', + select_all: '选择当前页项目', + unselect_all: '取消选择当前页项目', + clear_all: '清除全部已选择项目', + max_selected: '最多只能选择 max_selected_limit 个项目' + }; + break; } this.message = message; }; @@ -502,7 +503,7 @@ container: 'sp_container', container_open: 'sp_container_open', re_area: 'sp_result_area', - result_open: 'sp_result_area_open', + result_open: 'sp_result_area_open', control_box: 'sp_control_box', //multiple select mode element_box: 'sp_element_box', @@ -513,18 +514,18 @@ select: 'sp_over', select_ok: 'sp_select_ok', select_ng: 'sp_select_ng', - selected: 'sp_selected', + selected: 'sp_selected', input_off: 'sp_input_off', message_box: 'sp_message_box', - disabled: 'sp_disabled', - + disabled: 'sp_disabled', + button: 'sp_button', - caret_open: 'sp_caret_open', + caret_open: 'sp_caret_open', btn_on: 'sp_btn_on', btn_out: 'sp_btn_out', input: 'sp_input', - clear_btn : 'sp_clear_btn', - align_right : 'sp_align_right' + clear_btn : 'sp_clear_btn', + align_right : 'sp_align_right' }; this.css_class = css_class; }; @@ -534,8 +535,8 @@ */ SelectPage.prototype.setProp = function() { this.prop = { - //input disabled status - disabled : false, + //input disabled status + disabled : false, current_page: 1, //total page max_page: 1, @@ -546,10 +547,10 @@ key_select: false, //last selected item value prev_value: '', - //last selected item text - selected_text : '', + //last selected item text + selected_text : '', last_input_time: undefined, - init_set: false + init_set: false }; this.template = { tag: { @@ -557,72 +558,72 @@ textKey : '#item_text#', valueKey : '#item_value#' }, - page: { - current: 'page_num', - total: 'page_count' - }, - msg: { - maxSelectLimit: 'max_selected_limit' - } + page: { + current: 'page_num', + total: 'page_count' + }, + msg :{ + maxSelectLimit: 'max_selected_limit' + } }; }; - /** - * Get the actual width/height of invisible DOM elements with jQuery. - * Source code come from dreamerslab/jquery.actual - * @param element - * @param method - * @returns {*} - */ - SelectPage.prototype.elementRealSize = function(element, method){ - var defaults = { - absolute : false, - clone : false, - includeMargin : false, - display : 'block' - }; - var configs = defaults, $target = element.eq( 0 ),fix, restore,tmp = [], style = '', $hidden; - - fix = function (){ - // get all hidden parents - $hidden = $target.parents().addBack().filter( ':hidden' ); - style += 'visibility: hidden !important; display: ' + configs.display + ' !important; '; - - if( configs.absolute === true ) style += 'position: absolute !important;'; - - // save the origin style props - // set the hidden el css to be got the actual value later - $hidden.each( function (){ - // Save original style. If no style was set, attr() returns undefined - var $this = $( this ), thisStyle = $this.attr( 'style' ); - tmp.push( thisStyle ); - // Retain as much of the original style as possible, if there is one - $this.attr( 'style', thisStyle ? thisStyle + ';' + style : style ); - }); - }; - - restore = function (){ - // restore origin style values - $hidden.each( function ( i ){ - var $this = $( this ), _tmp = tmp[ i ]; - - if( _tmp === undefined ) $this.removeAttr( 'style' ); - else $this.attr( 'style', _tmp ); - }); - }; - - fix(); - // get the actual value with user specific methed - // it can be 'width', 'height', 'outerWidth', 'innerWidth'... etc - // configs.includeMargin only works for 'outerWidth' and 'outerHeight' - var actual = /(outer)/.test( method ) ? - $target[ method ]( configs.includeMargin ) : - $target[ method ](); - - restore(); - // IMPORTANT, this plugin only return the value of the first element - return actual; - }; + /** + * Get the actual width/height of invisible DOM elements with jQuery. + * Source code come from dreamerslab/jquery.actual + * @param element + * @param method + * @returns {*} + */ + SelectPage.prototype.elementRealSize = function(element, method){ + var defaults = { + absolute : false, + clone : false, + includeMargin : false, + display : 'block' + }; + var configs = defaults, $target = element.eq( 0 ),fix, restore,tmp = [], style = '', $hidden; + + fix = function (){ + // get all hidden parents + $hidden = $target.parents().addBack().filter( ':hidden' ); + style += 'visibility: hidden !important; display: ' + configs.display + ' !important; '; + + if( configs.absolute === true ) style += 'position: absolute !important;'; + + // save the origin style props + // set the hidden el css to be got the actual value later + $hidden.each( function (){ + // Save original style. If no style was set, attr() returns undefined + var $this = $( this ), thisStyle = $this.attr( 'style' ); + tmp.push( thisStyle ); + // Retain as much of the original style as possible, if there is one + $this.attr( 'style', thisStyle ? thisStyle + ';' + style : style ); + }); + }; + + restore = function (){ + // restore origin style values + $hidden.each( function ( i ){ + var $this = $( this ), _tmp = tmp[ i ]; + + if( _tmp === undefined ) $this.removeAttr( 'style' ); + else $this.attr( 'style', _tmp ); + }); + }; + + fix(); + // get the actual value with user specific methed + // it can be 'width', 'height', 'outerWidth', 'innerWidth'... etc + // configs.includeMargin only works for 'outerWidth' and 'outerHeight' + var actual = /(outer)/.test( method ) ? + $target[ method ]( configs.includeMargin ) : + $target[ method ](); + + restore(); + // IMPORTANT, this plugin only return the value of the first element + return actual; + }; /** * Dom building @@ -638,13 +639,13 @@ elem.combo_input = input.attr({'autocomplete':'off'}).addClass(css.input).wrap('
'); - elem.control.append(elem.control_text); + elem.control.append(elem.control_text); elem.result_area.prepend(elem.control); - } + } elem.container.addClass('sp_container_combo'); elem.combo_input.addClass('sp_combo_input').before(elem.element_box); var li = $('
");o.control.append(o.control_text);o.result_area.prepend(o.control)}o.container.addClass("sp_container_combo");o.combo_input.addClass("sp_combo_input").before(o.element_box);var y=g("
'+n+"
");elem.control.append(elem.control_text);elem.result_area.prepend(elem.control)}elem.container.addClass("sp_container_combo");elem.combo_input.addClass("sp_combo_input").before(elem.element_box);var li=$("