my blog my blog

Tag: js
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手动拆析分离太麻烦了。

小结

 

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

TinyMCE多输入框手动激活解决方案

 

昨晚弄那个TinyMCE编辑器,对于单输入框的时候还是比较好处理的,直接自动生成实例就激活了,但是当一个页面有多个输入框的时候就变得很复杂了。比如有三个四个的输入框,默认生成实例激活的话会很难看很乱,我们的目标是当一个输入框onfocus状态的时候激活TinyMCE编辑器,激活另一个输入框onfocus状态的时候,已激活的TinyMCE编辑器关闭,并在新的输入框中显示编辑器。

对于已经初始化好的textarea我们可以通过如下调用textarea id的方法进行显示和关闭:

  1. tinyMCE.get('nenew').show(); 
  2. tinyMCE.get('nenew').hide(); 

但是如果直接在tinymce的tinymce.init()之后调用会发生error,因为tinymce的实例可能还并没有初始化完成,所以我们需要一个回调,TinyMCE的API还是很全面的,虽然昨晚用的那个API有点儿小麻烦,不过已经折腾成功,经验分享下。

This option should contain a function name to be executed each time a editor instance is initialized. The format of this function is: initInstance(inst) where inst is the editor instance object reference.

Example of usage of the init_instance_callback option:

  1. function myCustomInitInstance(inst) { 
  2.         alert("Editor: " + inst.editorId + " is now initialized."); 
  3. tinyMCE.init({ 
  4.         ... 
  5.         init_instance_callback : "myCustomInitInstance" 
  6. }); 

上面是init_instance_callback的回调接口,但是还是得仔细读读那段说明:“这个选项在每个编辑器实例初始化完成后都要执行一次,这个function的格式是function callback(inst),而这个inst就是刚刚初始化完成的实例。”

可能看到上面的话你会觉得有些绕,对于后半句的那个功能是针对实例初始化完成后调用的,这是我们所需要的,但是请注意,这个回调是在每个实例初始化完成后都执行的,换句话说,你有4个textarea这个callback就要执行四次,但是如果你在这个callback中执行了针对未初始化的实例的操作,就会发生错误导致js无法继续进行初始化。

针对我们上面所说的,我们的目的是在所有textarea实例初始化完成后执行对于实例的隐藏,所以如果我们有三个实例的话,我们只要在第三个实例初始化完成后执行一次就可以了。直接上代码:

  1. <form> 
  2. <textarea id="1"  
  3. onfocus="tinyMCE.get('1').show();tinyMCE.get('1').focus();tinyMCE.get('2').hide();tinyMCE.get('3').hide();"> 
  4. </textarea> 
  5. <textarea id="2"  
  6. onfocus="tinyMCE.get('2').show();tinyMCE.get('2').focus();tinyMCE.get('1').hide();tinyMCE.get('3').hide();"> 
  7. </textarea> 
  8. <textarea id="3"  
  9. onfocus="tinyMCE.get('3').show();tinyMCE.get('3').focus();tinyMCE.get('1').hide();tinyMCE.get('2').hide();"> 
  10. </textarea> 
  11. </from> 

这个是表单的形式,也就是在每次onfocus状态的时候tinymce的激活关闭与选中,下面是javascript的初始化

  1. <script src="editor/tinymce.min.js"></script> 
  2. <script type="text/javascript"> 
  3.     tinymce 
  4.             .init({ 
  5.                 selector : "textarea", 
  6.                 plugins : [ 
  7.                         "advlist autolink lists link image charmap print preview anchor", 
  8.                         "searchreplace visualblocks code fullscreen", 
  9.                         "insertdatetime media table contextmenu paste" ], 
  10.                 toolbar : "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 
  11.                 autosave_ask_before_unload : false, 
  12.                 max_height : 200, 
  13.                 min_height : 160, 
  14.                 height : 180, 
  15.                 init_instance_callback : "hidetinymce" 
  16.  
  17.             }); 
  18.     var i = 3
  19.     function hidetinymce(inst) { 
  20.         if (--i == 0) { 
  21.             try { 
  22.                 tinyMCE.get('1').hide(); 
  23.                 tinyMCE.get('2').hide(); 
  24.                 tinyMCE.get('3').hide(); 
  25.             } catch (error) { 
  26.  
  27.             } 
  28.         } 
  29.     } 
  30. </script> 

我们用一个变量i来做计数器,当实例3初始化完成后执行try内的内容,然后即可完成实例初始化完成后执行隐藏。

PS:tinymce的新版本还是蛮好看的,跟bootstrap的白色主题很搭,让人很喜欢。

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的选择,而且代码更加简练,好吧,希望有时间可以细致的学习下,最近看了好多东西,脑子有点儿乱,实现一样是一样吧。

毕设来了

 

2013年的毕业设计,比以往时候来得更晚一些。认识的人早早的都拿到毕设题目神马的了,只有我们学校还迟迟的到开学才抽签选题目。学校压根儿就没安排神马实习,这是我觉得大学比较大的遗憾,哪怕实习水点儿也好哇,总比没有得强。

说说毕设,毕设选的嵌入式软件方向的宿老师,说真心话,大学里面论教学,我最喜欢宿老师的教学风格,有问题直接查官方文档,对于教学的内容也很好的把握,从基础开始,但并不缺少对于后期的一些提要,java课是我大学觉得最有意思的课。

毕设方向也是java相关的,可以选android应用开发,也可以选java web,奶牛想了不少,也开始看java web方面的书籍了,得寻思上手哇,然后js神马的后期也得学起,html5 css3的能用就用,咋说新东西还是会让人眼前一亮的吧。

只想踏踏实实的把毕设做好,大学就毕业了,总不想自己虚度最后的时光,浑浑噩噩混日子神马的是不可取的。