my blog my blog

Monthly 5月 2013
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。

Eclipse插件ERMaster离线安装附下载

 

ERMaster奶牛以前介绍过一次,但是发上来的安装网址是http://ermaster.sourceforge.net/update-site/,说sf吧其实挺蛋疼的,墙哇,不解释,不过有sf的源就能顺利安装么,NO。把ermaster的目录整个wget了下来,看了下,根下一个文件是site.xml。文件内容是

  1. <?xml version="1.0" encoding="UTF-8"?> 
  2. <site> 
  3.    <description url="/"> 
  4.       update-site at sourceforge.net 
  5.    </description> 
  6.    <feature url="features/org.insightech.er.feature_1.0.0.v20121127-2328.jar" id="org.insightech.er.feature" version="1.0.0.v20121127-2328"> 
  7.       <category name="ermaster"/> 
  8.    </feature> 
  9.    <category-def name="ermaster" label="ERMaster"/> 
  10. </site> 

看url直接指向了目录features下的那个jar文件,打开之,得到文件feature.xml,内容

  1. <?xml version="1.0" encoding="UTF-8"?> 
  2. <feature 
  3.       id="org.insightech.er.feature" 
  4.       label="ERMaster" 
  5.       version="1.0.0.v20121127-2328" 
  6.       provider-name="Insightech.org" 
  7.       plugin="org.insightech.er"> 
  8.  
  9.    <description url="http://ermaster.sourceforge.net"> 
  10.         <!--- ... ---> 
  11.    </description> 
  12.     
  13.    <copyright url="http://ermaster.sourceforge.net"> 
  14.         <!--- ... ---> 
  15.    </copyright> 
  16.     
  17.    <license url="http://ermaster.sourceforge.net"> 
  18.         <!--- ... ---> 
  19.    </license> 
  20.  
  21.    <url> 
  22.       <update label="ERMaster" url="http://downloads.sourceforge.net/project/ermaster/ermaster"/> 
  23.    </url> 
  24.  
  25.    <requires> 
  26.       <import plugin="org.eclipse.ui"/> 
  27.       <import plugin="org.eclipse.core.runtime"/> 
  28.       <import plugin="org.eclipse.gef"/> 
  29.       <import plugin="org.eclipse.ui.views"/> 
  30.       <import plugin="org.eclipse.ui.ide"/> 
  31.       <import plugin="org.eclipse.core.resources"/> 
  32.       <import plugin="org.eclipse.core.expressions"/> 
  33.    </requires> 
  34.  
  35.    <plugin 
  36.          id="org.insightech.er" 
  37.          download-size="0" 
  38.          install-size="0" 
  39.          version="1.0.0.v20121127-2328" 
  40.          unpack="false"/> 
  41.  
  42. </feature> 

继续看url行,又绕回去了对不对对不对,好嘛,饶了一圈,还是去http://downloads.sourceforge.net/project/ermaster/ermaster更新嘛,但是这个有plugin的信息,那么我们把这个url直接替换成"/"更换到文件中,然后把目录结构打包下就可以直接eclipse装了,那样子文件就都本地了。好了,直接附上包,把包解压缩后用那个local文件安装的方法选择目录安装就可以了。

点击下载ERMaster离线安装包

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的相关内容。