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");