手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜Qcloud , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

datatables的一些常用的玩意

datatables现在也开始逐步用的多了。虽然用起来复杂了一点,但好歹还能减少一些开发量

1、语言包,这个就不用说了,直接找个中文语言包即可(就是有些用插件的要注意一下,还是多写)
 
2、表格居中居右,这些不太好控制 ,但可以在每个columns里定义一个:sClass,这时候你就想怎么样就行了。例
{data:"xxx",sClass:"text-right"}
然后你加一个样式.text-right{text-align:right}
轻轻松松
 
3、POST,默认datables的数据是用GET请求,如果你参数过多,会造成GET参数过长的问题,这时候就只能用POST了。只是用了POST,数据就没有缓存了(可以用cache自己处理,但是麻烦)
 
4、columns的render可以写自定义事件。能封装起来一起用是最好的,毕竟每个页面的每个表格的Render都有可能会复用,要是每个地方都写同一份就太累了
 
5、事件,这一块说容易 也容易 也麻烦也麻烦。还是根据实际情况吧。反正你只要 保持你在Render的时候将每行数据的主键写出来,到时候想怎么处理都OK

jquery的nestable组件在点击时如何不被拖动

nestable在点击的时候,有一个拖动的状态被触发,会导致你给nestable上加的链接都会无效。

只要在最外层的li里加入一个class为:dd-nodrag,就不会被触发了。然后你在子菜单中就可以为它们加入工具菜单了,比如编辑 、删除等。
 
又或者,你加入dd-handle,这样的话,只能点击最左侧的handle部位才能被拖动
参考 :http://dbushell.github.io/Nestable/ 最下面
 

select 的 placeholder

select的placeholder其实是无效的。所以很多人想了一些奇技淫巧,比如利用HTML的标签:

XML/HTML代码
  1. <select>  
  2.     <option value="" disabled selected hidden>Please Choose</option>  
  3.     <option value="0">Open when powered (most valves do this)</option>  
  4.     <option value="1">Closed when powered, auto-opens when power is cut</option>  
  5. </select>  
这样就可以看得到,但点击下拉框的时候,就不在选项里了,可以到这里看效果:http://cssdeck.com/labs/hxovifav,
但其实这不应该出现在前端面前,prompt不就是针对select的吗?
 
select的placeholder的属性确实无效,它应该使用prompt!!!
象上面的代码就应该写成:
XML/HTML代码
  1. <select prompt="Plaese Choose">  
  2.     <option value="0"> 0 </option>  
  3.     <option value="1" 1 </option>  
  4. </select>  
很多资料里都应该有吧?
 
上面关于prompt的资料都错了。对不住各位,主要是在用Yii框架的时候,直接加入"prompt"属性就可以有这个效果,导致我这个对HTML不熟悉的人误解 了,经过@Deeka的指正,我发现,这是Yii自己的实现。比如:
 
PHP代码
  1. if (isset($tagOptions['prompt'])) {  
  2.     $prompt = $encode ? static::encode($tagOptions['prompt']) : $tagOptions['prompt'];  
  3.     if ($encodeSpaces) {  
  4.         $prompt = str_replace(' '' '$prompt);  
  5.     }  
  6.     $lines[] = static::tag('option'$prompt, ['value' => '']);  
  7. }  
他自己实现了这么一条空信息,我没细看,对不住各位
 

fancybox with touchswip

 不多说,直接上代码,其实就是让Facybox支持手指滑动。。。fancybox3已经支持了,不过他的样式太丑了。。这个的样式设计的有点象微信。。。有意思

JavaScript代码
  1. $(document).ready(function() {  
  2.   
  3.     $('.js-fancybox').fancybox({  
  4.         width: "100%",  
  5.         margin: [0, 0, 0, 0],  
  6.         padding: [0, 0, 0, 0],  
  7.         openEffect  : 'none',  
  8.         closeEffect : 'none',  
  9.         prevEffect : 'fade',  
  10.         nextEffect : 'fade',  
  11.         closeBtn  : false,  
  12.         arrows: false,  
  13.         helpers : {  
  14.             title : null,  
  15.             overlay : {  
  16.                 css : {  
  17.                     'background' : 'rgba(0, 0, 0, 0.95)'   
  18.                 }  
  19.             },  
  20.             buttons : {  
  21.             }  
  22.         },  
  23.         afterShow: function() {  
  24.             $('.fancybox-wrap').swipe({  
  25.                 swipe : function(event, direction) {  
  26.                     if (direction === 'left' || direction === 'up') {  
  27.                         $.fancybox.prev( direction );  
  28.                     } else {  
  29.                         $.fancybox.next( direction );  
  30.                     }  
  31.                 }  
  32.             });  
  33.         },  
  34.         afterLoad : function() {  
  35.         }  
  36.     });  
  37.       
  38. });  
原文地址参考 :http://codepen.io/frontendstudio/pen/cixjm

 

 

【转】DataURL与File,Blob,canvas对象之间的互相转换的Javascript

本来以为不能转,因为原作者在文章头部写:未经许可不得转载,但又在文末留下了,转载请保留地址。因此,先保留地址转载,再申请一下授权,原文地址是: http://blog.csdn.net/cuixiping/article/details/45932793

之所以转这个,是因为最近在处理上传的时候遇到了问题,原来xhr可以直接将file对象提交,如果用fileReader,出来的其实是base64的string,这时候怎么办是个问题。
 
好了不说废话,上内容。。。。
 
canvas转换为dataURL (从canvas获取dataURL)
XML/HTML代码
  1. var dataurl = canvas.toDataURL('image/png');  
  2. var dataurl2 = canvas.toDataURL('image/jpeg', 0.8);  
File对象转换为dataURL、Blob对象转换为dataURL
 
File对象也是一个Blob对象,二者的处理相同。
XML/HTML代码
  1. function readBlobAsDataURL(blob, callback) {  
  2.     var a = new FileReader();  
  3.     a.onload = function(e) {callback(e.target.result);};  
  4.     a.readAsDataURL(blob);  
  5. }  
  6. //example:  
  7. readBlobAsDataURL(blob, function (dataurl){  
  8.     console.log(dataurl);  
  9. });  
  10. readBlobAsDataURL(file, function (dataurl){  
  11.     console.log(dataurl);  
  12. });  
dataURL转换为Blob对象
XML/HTML代码
  1. function dataURLtoBlob(dataurl) {  
  2.     var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],  
  3.         bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);  
  4.     while(n--){  
  5.         u8arr[n] = bstr.charCodeAt(n);  
  6.     }  
  7.     return new Blob([u8arr], {type:mime});  
  8. }  
  9. //test:  
  10. var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ==');  
dataURL图片数据绘制到canvas
 
先构造Image对象,src为dataURL,图片onload之后绘制到canvas
XML/HTML代码
  1. var img = new Image();  
  2. img.onload = function(){  
  3.     canvas.drawImage(img);  
  4. };  
  5. img.src = dataurl;  
File,Blob的图片文件数据绘制到canvas
 
还是先转换成一个url,然后构造Image对象,src为dataURL,图片onload之后绘制到canvas
 
利用上面的 readBlobAsDataURL 函数,由File,Blob对象得到dataURL格式的url,再参考 dataURL图片数据绘制到canvas
XML/HTML代码
  1. readBlobAsDataURL(file, function (dataurl){  
  2.     var img = new Image();  
  3.     img.onload = function(){  
  4.         canvas.drawImage(img);  
  5.     };  
  6.     img.src = dataurl;  
  7. });  
不同的方法用于构造不同类型的url (分别是 dataURL, objectURL(blobURL), filesystemURL)。这里不一一介绍,仅以dataURL为例。
 
filesystemURL不是指本地文件URL的形式(file:///….), 而是格式类似于 filesystem:http://... 的一种URL,支持沙盒文件系统的浏览器支持(目前仅Chrome)支持。
 
Canvas转换为Blob对象并使用Ajax发送
 
转换为Blob对象后,可以使用Ajax上传图像文件。
 
先从canvas获取dataurl, 再将dataurl转换为Blob对象
XML/HTML代码
  1. var dataurl = canvas.toDataURL('image/png');  
  2. var blob = dataURLtoBlob(dataurl);  
  3. //使用ajax发送  
  4. var fd = new FormData();  
  5. fd.append("image", blob, "image.png");  
  6. var xhr = new XMLHttpRequest();  
  7. xhr.open('POST', '/server', true);  
  8. xhr.send(fd);  
EOF--
整个世界清静 了
 
 
Records:24612345678910»