my blog my blog

Tag: jquery
JavaScript操作浏览器Cookie

 

最近在构思一个企业站建设的中英文页面问题,想到双语,我觉得两种方法实现起来比较好,一种是ajax直接把数据调用过来,但是对于有很多个div块儿的像首页这种的页面的话,可能要有几个ajax请求,所以,我觉得还是使用预先在页面的html中填写后通过cookie来控制比较方便。

使用cookie定义一个language的项,使用cn/en来区分语言,在页面的class中添加cn/en作为区分中文英文的标志,这样子,需要中文英文切换的时候,直接调用jQuery就可以方便的搞定了。

  1. $('.cn').hide(); //关闭中文 
  2. $('.en').show(); //开启英文 
  3. $('.en').hide(); //关闭英文 
  4. $('.cn').show(); //开启中文 

默认情况下显示中文,在页面载入完成后对页面进行cookie的判断,判断是否有定义,如果没有定义就不管了,如果有定义language项,那么就通过js控制启用cookie记录的语言。当页面浏览的时候,监视页面的语言选择按钮,这样子,在切换语言的同时将对应的cookie记录下来,并设置一个较为长久的过期时限即可。对于cookie的操作呢,使用js的document.cookie也可,也可以使用轻量级封装的类库jquery.cookie,当然咯,还是类库方便一些,通过api直接查直接用,但是对于cookie的理解还需要知道两点的:

  1. cookie默认是以session为周期的,会话结束,cookie亦失效。 
  2. cookie可以设置过期日期的(常用的记住密码就是用这个实现) 
  3. cookie的删除操作其实就是将cookie的过期日期设置在过去,然后cookie就自动失效删除了 

剩下的就不多说了,直接去https://github.com/nenew/jquery-cookie 拿类库来用吧,要不复杂结构的cookie手动拆析分离太麻烦了。

Holo风格圆盘进度条knob使用教程

 

jQuery Knob是一款可以实现圆盘风格进度条的小插件,使用很方便,api也比较全面。先上个效果图:

jquery knob

这个是奶牛自己写的一个小效果图,下面说说knob。knob的实现的效果是HTML5的canvas。兼容性上Chrome, Safari, Firefox, IE 9.0都可以,还蛮不错的。更多效果可以看http://anthonyterrien.com/knob/。

下面说说使用:

1.下载knob可以去https://github.com/aterrien/jQuery-Knob,也可以直接

  1. git clone git://github.com/aterrien/jQuery-Knob.git 

2.嵌入html中js代码

  1. <script src="js/jquery.knob.js"></script> 

3.使用,knob是通过对<input>进行处理来实现canvas绘图的。先在页面中插入一个input

  1. <input class="knob" type="text" value="30" data-width="150" 
  2. data-fgColor="#009100" data-skin="tron" data-thickness=".1" 
  3. data-angleOffset="0">  

我这个里面已经加了一些参数,等下解释。

4.通过js脚本来对knob进行初始化

  1. $('.knob').knob(); 

这是最简单的操作,当然,根据官方的文档,初始化里面是可以提供参数的。也就是说上面input里面的data-的参数都可以通过初始化来完成。如格式:

  1. $(".knob").knob({ 
  2.                 'width':150 
  3.                 ,'fgColor':"#009100" 
  4.                 ,'thickness':".1" 
  5.                 ,'angleOffset':"0" 
  6.                 }); 

这样子,其实input里面只要标识出class或者id以及value供使用就可以了。

5.关于演示页面中的skin的使用,奶牛看了下代码,是通过如下方式实现的。

  1. $('.knob').knob({draw : function () { 
  2.  
  3.                     // "tron" case 
  4.                     if(this.$.data('skin') == 'tron') { 
  5.  
  6.                         var a = this.angle(this.cv)  // Angle 
  7.                             , sa = this.startAngle          // Previous start angle 
  8.                             , sat = this.startAngle         // Start angle 
  9.                             , ea                            // Previous end angle 
  10.                             , eat = sat + a                 // End angle 
  11.                             , r = true
  12.  
  13.                         thisthis.g.lineWidth = this.lineWidth; 
  14.  
  15.                         this.o.cursor 
  16.                             && (sat = eat - 0.3) 
  17.                             && (eateat = eat + 0.3); 
  18.  
  19.                         if (this.o.displayPrevious) { 
  20.                             ea = this.startAngle + this.angle(this.value); 
  21.                             this.o.cursor 
  22.                                 && (sa = ea - 0.3) 
  23.                                 && (eaea = ea + 0.3); 
  24.                             this.g.beginPath(); 
  25.                             thisthis.g.strokeStyle = this.previousColor; 
  26.                             this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false); 
  27.                             this.g.stroke(); 
  28.                         } 
  29.  
  30.                         this.g.beginPath(); 
  31.                         this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ; 
  32.                         this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false); 
  33.                         this.g.stroke(); 
  34.  
  35.                         this.g.lineWidth = 2
  36.                         this.g.beginPath(); 
  37.                         thisthis.g.strokeStyle = this.o.fgColor; 
  38.                         this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false); 
  39.                         this.g.stroke(); 
  40.  
  41.                         return false; 
  42.                     } 
  43.                 } 
  44.             }); 

这样子一个可行的绘图就出来了,下面说说怎么修改值:

  1. $('.change').change(function(){ 
  2.                 $('.knob').val($('.change').val()).trigger('change'); 
  3.             }) 

比如我们还有一个input的class为change,那么只要change以改变,就直接反馈到canvas绘图上了。更详细的api可以参考https://github.com/aterrien/jQuery-Knob。

jQuery实现页面内平滑回到顶部的过程分析及实现方法

 

jQuery可以实现一些很绚丽的网页效果,比如淡入淡出还有滑动效果等,它的动画自定义也很强大,animate()功能很出色,今天奶牛跟大家一起来看看那些网页中的回到顶部或者回到底部如何用jQuery来实现平滑滚动。

首先,我们需要知道,我们的滚动要到达的目的地,比如一个页面内的元素,我们要知道它距离窗口顶部的位置。这样子,比如我们的header的id就是header,footer的id就是footer。那么我们可以通过offset()方法来获得一个top跟left值。

  1. $('#header').offset() 
  2. $('#footer').offset() 

因为我们需要的是页面上下滚动,所以我们只需要offset()方法来获得的top值

  1. $('#header').offset().top 
  2. $('#footer').offset().top 

现在目的地已经有了,那么我们将来实现到达目的地的方法,就是scrollTop()方法,这个方法在没有参数的情况下,返回一个当前滚动距离top顶端的值,如果scrollTop(value)的话,我们将直接滚动到页面的那个位置

  1. $(window).scrollTop($('#header').offset().top) 
  2. $(window).scrollTop($('#footer').offset().top) 

这样子的实现太过僵硬,因为是直接到达目的地,所以我们下一步就是为它添加动画效果

  1. $('html').animate({scrollTop:$('#header').offset().top},800); 
  2. $('html').animate({scrollTop:$('#footer').offset().top},800); 

其中的800是动画持续的时间,在持续时间之后我们还可以增加’swing‘或者’linear’

  1. $('html').animate({scrollTop:$('#header').offset().top},800,'swing');  
  2. $('html').animate({scrollTop:$('#footer').offset().top},800,'linear');  

具体效果可以自己测试下,linear是匀速的运动,默认是swing

这样子,我们需要的功能就已经实现了。比如你可以固定一个元素并未其进行监听,然后当点击的时候执行上面的jquery代码。

  1. $(document).ready(function(){ 
  2.     $('#scroll').hide(); 
  3.     $(window).scroll(function() { 
  4.         if($(window).scrollTop() >= 100){ 
  5.             $('#scroll').fadeIn(400); 
  6.         } 
  7.         else 
  8.         { 
  9.             $('#scroll').fadeOut(200); 
  10.         } 
  11. }); 

下面的一段代码可以实现,当页面的滚动超过100px的时候,就会展现id为scroll的元素,如果不超过的话就隐藏。

参考文章:

http://docs.jquery.com/CSS

http://docs.jquery.com/CSS/scrollTop

http://api.jquery.com/offset/

http://api.jquery.com/scrollTop/

http://api.jquery.com/animate/

小结

 

1.button

js监听一个button的click事件,preventDefault()无效,不一定是js没写对,而是button有没有定义type=“button”,在一个form表单中,button如果不定义的话,默认就做submit处理了,所以请求直接就发出去了,监听也没用。

2.hibernate查询分页

最简单的还是hibernate的query直接在querystring中进行限定,限定setFirstResult()和setMaxResults()。比如我们要从第11条记录开始查询,那么我们可以这样子写

  1. String queryString = "select m from Profile as m where m." 
  2.                     + propertyName1 + "= ? and m." + propertyName2 + "= ?"
  3.             Query queryObject = getSession().createQuery(queryString) 
  4.                     .setFirstResult(10).setMaxResults(10); 
  5.             queryObject.setParameter(0, value1); 
  6.             queryObject.setParameter(1, value2); 
  7.             List<?> s = (List<?>) queryObject.list(); 
  8.             return s; 

这样子返回一个查询结果的list,然后迭代出来就可以了,当然,这只是查询部分的,如果要写分页的话,还需要count()等来辅助进行。

3.jquery的.on()

如果我们直接用$(document).ready(function(){})来做的话,对于使用ajax调用产生的新的dom元素,用一般的.click()等事件监听是不会起到作用的,在老版本的jQuery中使用.live()可以来进行对未来元素和现有元素的监听工作,但是新版本的建议是使用.on()来进行处理,这样子新生成的元素也就自然而然的可以监听到了。

4.jquery的遍历

遍历的话jquery的方法真的很好用,特别是选择器,很方便,.parent()、.children()、.prev()、.next()用起来非常省事儿。

5.jquery的ajax

  1. var data = {"userid" : $('input[name="userid"]').val(), 
  2. "phonenum" : $('input[name="phonenum"]').val(), 
  3. "email" : $('input[name="email"]').val() 
  4. }; 
  5. $.post('profile-update', data, function(data, textStatus, jqXHR) { 
  6. if (jqXHR.success(function() { 
  7.     alert("success"); 
  8. }) 
  9. ); 

当然,也可以直接连缀上一个.success()来处理,可以看http://api.jquery.com/jQuery.post/

6.hibernate的casecade级联

对于一对多或者多对多的情况,如果删除主表中的记录,那么以主表的主键做外键的其它表就会产生错误,导致删除失败,需要设置hibernate的配置文件casecade为delete,这样子删除的时候就可以自动把这些也删除了,当然还有其它的选项,感兴趣的话可以直接查找casecade的相关内容。

bootstrap的tooltip需要手动激活才会生效

 

我说怎么按照官方的代码写都不出效果呢,你妹,原来tooltip要手动激活的好不好,还有那个popover,需要tooltip跟手动激活。

下面来说说那个tooltip的使用,先引用下官方的原话:

  1. For performance reasons,  
  2. the tooltip and popover data-apis are opt in,  
  3. meaning you must initialize them yourself. 

翻译过来就是:出于性能原因的考虑,tooltip和popover的data-apis是可选的,这就意味着你必须手动初始化它们。好吧,手动就手动吧,让人好伤感的手动,而且也没有预留的可选api,就自己写了一个最简单的,js新手,能用就好了。

打开bootstrap.js,搜索tooltip,然后在tooltip的最后添加如下代码:

  1. /* TOOLTIP API 
  2.  * =================== */  
  3. $('a[data-toggle=tooltip]').mouseover(function() { 
  4.  $(this).tooltip('show'); 
  5.   }) 

然后使用方法是:

  1. <a href="#" data-toggle="tooltip" title="http://www.nenew.net">奶牛博客</a> 

在a标签中增加data-toggle=“tooltip”,title为描述,然后就可以看到tooltip的效果了。

PS:JQuery确实好用很多,比如依据tag的选择,而且代码更加简练,好吧,希望有时间可以细致的学习下,最近看了好多东西,脑子有点儿乱,实现一样是一样吧。