js 一些小技巧

hw1287789687

浏览: 5218989 次
性别:
来自: 北京

最近访客更多访客>>

DOCDOC

rbaggio10

zcm1205

morelily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

div居中 div拖拽回车触发回车导致 jquery

1,表单中,回车导致下一个表单元素聚焦

/***
enter to make next object focus
*/
var pressFocusNext=function(event,next22){
    if(!event ||event==undefined){
        event=window.event; 
    }
    if(event.keyCode==13){//Enter
	    if(typeof next22 == 'string'){
	        next22=com.whuang.hsj.$$one(next22);
	    }
	    if(next22 && next22!=undefined){
	    	next22.focus();
	    }
	    
    }
}

使用场景:

 <form id="leaveMessageForm" style="margin-bottom: 4px;width: 100%"  >
                    
                        <ul>
                            <li><label>单位名称</label><input type="text" name="company" placeholder="单位名称"  onkeypress="pressFocusNext(event,'username')" /></li>
                            <li><label>称呼</label><input type="text" name="username" placeholder="您的称呼" onkeypress="pressFocusNext(event,'email')" /></li>
                            <li><label>电话</label><input type="text" name="email" placeholder="您的电话号码"  onkeypress="pressFocusNext(event,'object')" /></li>
                            <li><label>留言标题</label><input type="text" name="object" placeholder="留言标题"  onkeypress="pressFocusNext(event,'content')" /></li>
                            <li class="ly" style="width:100%;" ><label  >留言内容</label>
                            
                                <textarea  name="content" placeholder="留言内容" ></textarea>
                            
                            </li>
                            <li class="submit"><input type="button" value="提交" onclick="ajaxSubmitMessage()"  /></li>
                            <li class="reset"><input type="reset"  id="resetId" value="重写"/></li>

                        </ul>
                        
                    </form>

2,对某个表单控件回车触发指定事件

/***
 enter to to something identified by responseEvent
 */
var pressEnterTo=function(event,responseEvent){
    if(!event ||event==undefined){
        event=window.event;
    }
    if(event.keyCode==13){//Enter
        responseEvent();
    }
};

使用场景:

<div id="register_user">

                                        <h2  style="margin-right: -15px;margin-left: -15px" ><span class="fontawesome-user"></span>注册</h2>

                                        <form action="#" method="POST">

                                            <fieldset class="submit2">

                                                <p><label for="username">用户名</label></p>

												<p><input type="text" name="username" placeholder="用户名"
														  onkeypress="pressFocusNext(event,$('#register_user input[name=password]'))"
														  required></p>

                                                <p><label for="password">密码</label></p>

												<p><input type="password" name="password" placeholder="密码"
														  onkeypress="pressFocusNext(event,$('#repassword'))" required>
												</p>

                                                <p><label for="repassword">确认密码</label></p>

												<p><input type="password" id="repassword" placeholder="确认密码"
														  onkeypress="pressFocusNext(event,$('#register_user input[name=email]'))"
														  required></p>

                                                <p><label for="email">电子邮箱</label></p>

												<p><input type="text" name="email" placeholder="电子邮箱"
														  onkeypress="pressEnterTo(event,user.register)" required></p>

                                                <p><input type="button" id="registerBtn" onclick="user.register();"
                                                          value="注册"></p>

                                            </fieldset>

                                        </form>

                                    </div> <!-- end login -->

对最后一个表单元素回车时触发登录

3,使div居中

/***
 * make dialog in center
 */
com.whuang.hsj.centerJQueryPos = function ($div22, isApplyVertical/*是否竖直方向也居中*/, isIncludeScroll/*是否包含滚动条高度*/) {
	var width = $div22.width();
	var height = $div22.height();


	var left = (getInner().width - width) / 2 + com.whuang.hsj.getScroll().left;
	var param = {'left': left};
	if (arguments.length === 1 || isApplyVertical) {//Vertical direction
		var top = (getInner().height - height) / 2;
		if (isIncludeScroll) {
			top = top + com.whuang.hsj.getScroll().top;
		}
		param['top'] = top;
	}
	$div22.css(param);
};//centerJQueryPos
com.whuang.hsj.centerX = function ($div22) {//只水平方向居中
	com.whuang.hsj.centerJQueryPos($div22, false, false);
};
com.whuang.hsj.centerXY = function ($div22) {//水平方向和竖直方向同时居中
	com.whuang.hsj.centerJQueryPos($div22, true, false);
};

//Cross browser gets the position of scroll
com.whuang.hsj.getScroll=function(){
    return {
        top:document.documentElement.scrollTop || document.body.scrollTop,
left:document.documentElement.scrollLeft || document.body.scrollLeft,
height:document.documentElement.scrollHeight ||document.body.scrollHeight
};
};

使用场景:

if (isCenter) {
			   jqueryObjParam.$dialogPanel.show('normal', function () {
				   com.whuang.hsj.centerXY(jqueryObjParam.$dialogPanel);
				   jqueryObjParam.$dialogPanel.css("position", 'fixed');//保证固定在可视范围内
			   });

		   }

注意:div的position的值必须是fixed或absolute

4,获取浏览器可视区域的大小,与是否有滚动条无关

//Cross browser gets the size of Visual area window,Have nothing to do with scroll bars
var getInner=(function() {
	// alert(typeof window.innerWidth !== 'undefined');
	if (typeof window.innerWidth !== 'undefined') {//Notice:'undefined' is right
		return function(){
			return {
				width : window.innerWidth,
				height : window.innerHeight
			}
		}
	} else {
		return function(){
			return {
				width : document.documentElement.clientWidth,
				height : document.documentElement.clientHeight
			}
		}
	}
})();

5,日期格式化

/***
format date or time
*/
Date.prototype.format =function(format)
{
	var o = {
		"M+" : this.getMonth()+1, //month
		"d+" : this.getDate(), //day
		"h+" : this.getHours(), //hour
		"m+" : this.getMinutes(), //minute
		"s+" : this.getSeconds(), //second
		"q+" : Math.floor((this.getMonth()+3)/3), //quarter
		"S" : this.getMilliseconds() //millisecond
	}
	if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
	(this.getFullYear()+"").substr(4- RegExp.$1.length));
	for(var k in o)if(new RegExp("("+ k +")").test(format))
	format = format.replace(RegExp.$1,
	RegExp.$1.length==1? o[k] :
	("00"+ o[k]).substr((""+ o[k]).length));
	return format;
}
Date.prototype.format2 = function(fmt)   
{ //author: meizz   
  var o = {   
    "%m" : this.getMonth()+1+'',                 //月份   
    "%d" : this.getDate() + '',                  //日   
    "%H" : this.getHours()+'',                   //小时   
    "%M" : this.getMinutes()+'',                 //分   
    "%S" : this.getSeconds()+''                //秒   
    //"q+" : Math.floor((this.getMonth()+3)/3), //季度   
  };   
  // 年份  2015
  if(/(%Y)/.test(fmt))   
    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"")); 

  // 两位年份  15
  if(/(%y)/.test(fmt))   
    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(2));     

  //getTime返回的是以毫秒为单位的，转为秒
  if(/(%s)/.test(fmt))   
    //fmt=fmt.replace(RegExp.$1, this.getTime()/1000); 
    fmt=fmt.replace(RegExp.$1, (this.getTime()+'').slice(0, 10)); 

  for(var k in o)   
    if(new RegExp("("+ k +")").test(fmt)){   
        fmt = fmt.replace(RegExp.$1, (o[k].length == 2 ? o[k] : '0' + o[k]));   
    }
  return fmt;   
}

常用场景:

var releaseDate=new Date(Number(obj.releaseTime)*1000).format('yyyy-MM-dd');//把毫秒数转化为日期

6,设置和获取html元素的自定义属性

com.whuang.hsj.getCustomAttr=function(htmlNode22,attr)
{
	var hospitalId=htmlNode22[attr];
	if(hospitalId==undefined||hospitalId==null){
        hospitalId=htmlNode22.getAttribute(attr);
    }
	if(hospitalId==undefined||hospitalId==null){
		if(htmlNode22.attributes){
			hospitalId=htmlNode22.attributes[attr].nodeValue;
		}
	}
    return hospitalId;
}
com.whuang.hsj.setCustomAttr=function(htmlNode22,attr22,attrValue)
{
	if(htmlNode22.setAttribute===undefined)
	{
		htmlNode22.attributes[attr22].nodeValue = attrValue;
	}else{
		htmlNode22.setAttribute(attr22,attrValue);  // 设置自定义属性的值
	}
}

使用场景:

var currentPage=com.whuang.hsj.getCustomAttr($ul_list.get(0),"currentPage");
        var isOver=Boolean.parse(com.whuang.hsj.getCustomAttr($ul_list.get(0),"isOver2"));
 com.whuang.hsj.setCustomAttr(newsPanel_ul,"currentPage",data.currentpage);
            com.whuang.hsj.setCustomAttr(newsPanel_ul,"isOver2",data.over);

7,使用jquery时如何判断元素是否为空呢?

错误:if($thisForm==null)

正确:

if ($thisForm.length == 0) {
        alert("can not get form ,maybe not pass on form object.");
        return;
    }

if(form.length==0){
		alert("没有找到表单");
		return;
	}

通过length来判断,因为使用jquery获取元素,就算元素不存在也会返回一个对象.

8,如何判断参数是否为空

bbs.add_bbsReply = function (self) {
    if (cardid == null) {
        alert("cardid is null");
        return;
    }
    var $thisForm = null;
    if (arguments.length > 0) {//说明传入了参数self
        $thisForm = $(self);
    } else {
        $thisForm = $("#formBBS_reply");
    }
}

范例:

function tabSelect(url, aHref, isNav, showslider) {
    showMask();
    if (isNav) {
        $('#nav li').removeClass("current")/*.removeClass("focus ")*/;
    }

    if (arguments.length > 3 && showslider) {
        $slider_carousel.show();
        $left_sidebar.show();
    } else {
        $slider_carousel.hide();
        $left_sidebar.hide();
    }
    ajaxHtml(url + "&recordsPerPage=5&random22=" + Math.random(), $exchangeDiv);//page.js
    if (isNav) {
        $(aHref).parent().addClass("current");
    }
    ui_tab_wh(jQuery);
}

通过arguments.length来判断比通过self==null||self==undefined要好

9,创建对象

var tip = {};

10 使悬浮的div可以拖动

com.whuang.hsj.drag = function ($obj, hn) {
    if (arguments.length == 0) {
        return;
    }
    if ($obj == null || $obj == undefined) {
        return;
    }
    if (typeof  $obj == 'string') {//when $obj is a string
        $obj = $($obj);
    }
    var $hn = null;
    if (arguments.length > 1) {
        $hn = $obj.find(hn);//div h1,h2...
    } else {
        $hn = $obj.find("h2");
    }
    $hn.on({
        mousedown: function (e) {
            e.preventDefault();
            var t = $obj.offset(),
                o = e.pageX - t.left,
                i = e.pageY - t.top;
            //$obj.css("position", 'fixed');
            $(document).on("mousemove.drag", function (e) {
                $obj.offset({
                    top: e.pageY - i,
                    left: e.pageX - o
                })
            })
        },
        mouseup: function () {
            $(document).unbind("mousemove.drag");
            $obj.css("position", 'fixed');
        }
    });
};//drag

使用场景:

 com.whuang.hsj.drag("#subPagePanel", "h2");//增加拖动对话框的功能
    com.whuang.hsj.drag("#subPageBBS", "h2");

查看图片附件

0
顶

0
踩

分享到：

js 一些小技巧 2 | js 让窗口居中

2015-03-27 12:12
浏览 1383
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js 一些小技巧

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js 一些小技巧

评论

发表评论

相关推荐

js 给文本框增加快捷键

判断微信浏览器

jquery 设置checkbox 不可用

浏览器本地缓存localStorage

js 获取链接地址中的参数

js 修改链接参数

ios Safari浏览器不支持 js 复制字符串

html5 多图预览

监听IE9中输入框点击小叉

工作中出现的问题

jquery 遍历dom节点

js截断指定长度

HTML5 sessionStorage 使用

js 数组相关操作

react 常用技术

react-hammerjs的应用

js 获取dom的class

mobx 常用注解

js toast库

判断IE 浏览器的几种方式

最近访客更多访客>>