jQuery 自动拉长的文件输入框实现代码_jquery_脚本之家

输入框 复制代码 代码如下: CSS代码 复制代码 代码如下: input.helpText { color:
#aaa;} 调换方法 复制代码 代码如下:
function switchText == $ $.removeClass; else if == ”) $.addClass.val);
} 具体贯彻 复制代码 代码如下:
$(‘input[type=text][title!=””]’).each { if == ”) $.attr; if == $
$.addClass.focus.blur;
$.submit.find(‘input[type=text][title!=””]’).each { if == $ $; 2.
参阅小说

【解决方案】

为了抓实顾客体验,笔者在午休时候想起了是还是不是能够用jQuery写个插件。想到比不上完结,果然,小编完结了这几个效应。在写这么些插件时自身无心里想到这么的插件英特网应该有人写过,可是本人并从未去搜索,你有意思味能够找大器晚成找。上边是插件的源代码。
源代码 复制代码 代码如下: ; {
$.fn.autoSizeText = function { var _defaultSettings = {min:20,max:40};
var _settings = $.extend(_defaultSettings, settings); var _handler =
function.keyup { if .attr { return false; } jQuery.attr(“size”,
_settings.min); var actLength = jQuery.length; if (actLength >
_settings.min && actLength < _settings.max) { jQuery.attr(“size”,
actLength + 1); } else if (actLength <= _settings.min) {
jQuery.attr(“size”, _settings.min); } }); }; return this.each;
调用艺术:$.autoSizeText();就能够。
本插件有多个可选参数:max(设置文本框最大的size,超越此值不再size增加,暗中认可值40)和min(设置文本框最小的size,同期也是文本框的开始size,默许值为20卡塔尔,在调用时能够修改。
举例:$.autoSizeText; $.autoSizeText;//min没有安装,取暗中认可值20
$.autoSizeText;//max未有安装,取暗中认可值40
你可以在那底子上连绵起伏强盛,比如能够协助textarea。 enjoy it!

呈现表格数据会涉及到部分事物,如字段展现掩没,数据状态,分页之类。

  1. 计划干活

是因为我们集团的付加物涉及到相当多的表格数据体现,并且每张表的字段数都游人如织,在干活经过中,整合出风度翩翩套自感到较为轻松的方案。如图:

  (1)输入框

中间提到到的插件首要有:jQuery.columnmanager.expand.jsjQuery.dropbox.jsjQuery.pager.expand.jsjQuery.cookie.js当中pager.expand.js,dropbox.js以至各插件间的结合在common.js里,代码如下:复制代码 代码如下: //定义全局命名空间 var
GLOBAL = {}; GLOBAL.Namespace = function { var arr = str.split, o =
GLOBAL; for (var i = ? 1 : 0; i < arr.length; i++) { o[arr[i]] =
o[arr[i]] || {}; o = o[arr[i]]; } } GLOBAL.Namespace; /*
******************************************************************
jQuery.pager
******************************************************************
*/ { $.fn.pager = function { var opts = $.extend({},
$.fn.pager.defaults, options); return this.each { // empty out the
destination element and then render out the pager with the supplied
options $.append(renderpager(parseInt, parseInt,
options.buttonClickCallback, options.rowcount)); // specify correct
cursor activity //$.mouseover { document.body.style.cursor = “pointer”;
}).mouseout { document.body.style.cursor = “auto”; }); }); }; // render
and return the pager with the supplied options function
renderpager(pagenumber, pagecount, buttonClickCallback, rowcount) { //
setup $pager to hold render var $pager = $; // add in the previous and
next buttons $pager.append(renderButton(‘|’); page == pagenumber ?
currentButton.addClass : currentButton.click { buttonClickCallback; });
currentButton.appendTo; } // render in the next and last buttons before
returning the whole rendered control back.
$pager.append(renderButton(‘>>’, pagenumber, pagecount,
buttonClickCallback)).append(renderButton(‘>|’, pagenumber,
pagecount, buttonClickCallback)); $pager.append(‘

复制代码 代码如下:

共’ + pagecount + “页

<input type=”text” name=”searchText” title=”请输入找出关键字” />

“); // if (rowcount != undefined) { // $pager.append(‘

  (2)CSS代码

共’ + rowcount + “条记下,最多展现600条

复制代码 代码如下:

“); // } if (rowcount != undefined) { $pager.append(‘

input.helpText { color: #aaa;}

‘ + rowcount + ‘条记录

(3卡塔 尔(阿拉伯语:قطر‎调换方法

‘); } return $pager; } // renders and returns a ‘specialized’ button, ie
‘next’, ‘previous’ etc. rather than a page number button function
renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) {
var $Button = $(‘

复制代码 代码如下:

‘ + buttonLabel + ‘

function switchText()
{
if ($(this).val() == $(this).attr(‘title’))
$(this).val(”).removeClass(‘helpText’);
else if ($.trim($(this).val()) == ”)
$(this).addClass(‘helpText’).val($(this).attr(‘title’));
}

‘); var destPage = 1; // work out destination page for required button
type switch { case “|>”: destPage = pagenumber + 1; break; case
“>|”: destPage = pagecount; break; } // disable and ‘grey’ out
buttons if not needed. if (buttonLabel == “|= pagecount ?
$Button.addClass : $Button.click { buttonClickCallback; } return
$Button; } // pager defaults. hardly worth bothering with in this case
but used as placeholder for expansion in the next version

(4卡塔 尔(阿拉伯语:قطر‎具体完成

$.fn.pager.defaults = { pagenumber: 1, pagecount: 1 }; }); /*

//组件功用:鼠标移上钦点指标弹出下拉框 — by flowerszhong //参数表明:
//target:事件目的Id //box:下拉框Id
//left:以事件指标最上的坐标左偏移量,默许为0;
//top:以事件指标最上的坐标上偏移量,暗中同意为事件目的的莫斯中国科学技术大学学//overClass:当前状态表格行保持高亮样式 //on:弹出框是不是有箭头
//arrow:自动调治的指向箭头
================================================================ */ var
dropbox = function(target, box, left, top, overClass, on, hasArrow) {
var obj, b, p; if (typeof target == “object”) obj = $; else obj = $; if
(typeof box == “object”) b = $; else b = $; p = obj.parent(); if top =
obj.height(); var defaults = { l: left || 0, t: top || 0, overClass:
overClass || “”, on: on || “”, hasArrow: hasArrow || “” }, offset =
obj.offset.height(), selectSet = function {
//在IE6中,幸免select控件遮罩下拉框 if ($.browser.msie &&
$.browser.version == “6.0”) { if .css(“visibility”, “visible”); } else {
$.css(“visibility”, “hidden”); } } }; $.resize { w = $; offset =
obj.offset.click { offset = obj.offset; //绑定mouseover事件
obj.bind(“mouseover”, function() { var diff, arrow, scrollTop; scrollTop
= $; diff = w – (offset.top – scrollTop); if { var subTop = 145 – diff;
b.css({ “display”: “block”, “left”: offset.left + defaults.l + “px”,
“top”: offset.top + defaults.t – subTop + “px” }); if { arrow =
b.children[0]; var arrTop = 35 + subTop; $.css; } } else { b.css({
“display”: “block”, “left”: offset.left + defaults.l + “px”, “top”:
offset.top + defaults.t + “px” }); if { arrow = b.children.css; } }
b.bind(“mouseover”, function.show; if { p.addClass; }
event.stopPropagation; b.bind(“mouseout”, function.hide; if {
p.removeClass; } event.stopPropagation; if { p.addClass; } selectSet;
//绑定mouseout事件 obj.bind(“mouseout”, function() { b.css; selectSet {

复制代码 代码如下:

p.removeClass; //debugger; }; GLOBAL.zyh.dropbox = dropbox; /*

//成效:Toggle Column
表格自定义列通用方法,基于jquery.columnmanager组件,GLOBAL.zyh.dropbox组件
//参数表明: //targetTable:表格Id
//columnManagerArgument:jquery.columnmanager需求参数 //btnSetColumn:
//targetfive: //left: 0 //top: 0
================================================================ */
GLOBAL.zyh.toggleTableColumn = function { var defaults = { targetTable:
”, columnManagerArgument: {}, btnSetColumn: ”, targetfive: ”, left:
0, top: 0 } var settings = $.extend({}, defaults, options); $(‘#’ +
settings.targetTable).columnManager(settings.columnManagerArgument);
GLOBAL.zyh.dropbox(settings.btnSetColumn, settings.targetfive,
settings.left, settings.top); }

$(‘input[type=text][title!=””]’).each(function() {
if ($.trim($(this).val()) == ”) $(this).val($(this).attr(‘title’));
if ($(this).val() == $(this).attr(‘title’))
$(this).addClass(‘helpText’);
}).focus(switchText).blur(switchText);

$(‘form’).submit(function() {
$(this).find(‘input[type=text][title!=””]’).each(function() {
if ($(this).val() == $(this).attr(‘title’)) $(this).val(”);
});
});

2. 参阅小说

1. 考虑工作 (1卡塔 尔(英语:State of Qatar)输入框 复制代码
代码如下: input type=”text” name=”searchText” title=”请输入搜索关键字” /
(2卡塔尔国CSS代码 复制代码 代…

相关文章