js-template

Javascript Template

javascript 模板函数分享 /***** 模板字符串,格式为或,或 完全遵循javascript语法,内置输出函数为echo(string);函数 常用调用例子,可以用 如果下方法. js_template(document.getElementById(‘template_code’).value,{names:[‘tom’,’jerry’,’david’]}); 返回模板结合给定数据的结果字符串。 作者:浮山狼 邮箱:fushanlang@gmail.com 若使用中遇到问题,欢迎交流、切磋! */

function js_template(template_string, values_container) { var eval_result = “”; /**模板输出结果**/ //公共的输出函数 var echo = function (output) { eval_result += output; } //产生随机数,为建立唯一临时分隔做铺垫 var randNum = function () { var rnd = {}; rnd.today = new Date(); rnd.seed = rnd.today.getTime(); rnd.seed . . . → Read More: js-template

js图片上传本地预览兼容(IE7-8-9\firefox\chrome)

#preview{width:300px;height:300px;border:1px solid #000;overflow:hidden;} #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);} #preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸,无其它用途 */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); width:300px; visibility:hidden; overflow: hidden; } function previewImage(file) { var MAXWIDTH = 300; var MAXHEIGHT = 300; var div = document.getElementById(‘preview’); if (file.files && file.files[0]) { div.innerHTML = ”; var img = document.getElementById(‘imghead’); img.onload = function(){ var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); img.width . . . → Read More: js图片上传本地预览兼容(IE7-8-9\firefox\chrome)

jquery Masonry瀑布流插件(转)

如果你经常网上冲浪,这样参差不齐的多栏布局,就象砖块效果砌墙一样,错落有致,是不是很眼熟啊?

这种布局适合于小数据块,每个数据块内容相近且没有侧重。通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。所以,我们给这样的布局起了一个形象的名字 — 瀑布流式布局。

Masonry是一款很好用的jquery网页布局插件,它可以去掉不同高度div之间的空白,

让你的网页看上去更加的整齐、漂亮!

官网插件下载地址以及详解地址:

示例demo及文档说明:http://masonry.desandro.com/ (本站离线版下载)

你也可以下载打包的html文档在本地查阅:(内含jquery.masonry.min.js 和 jquery.masonry.js 和 实例) Viewing this project locally Via download

You can download a zip of all the flat HTML files from http://meta.metafizzy.co/files/masonry-site.zip. 本站下载

代码下载地址: https://github.com/desandro/masonry/downloads 本站下载 (里面的demo都有问题,建议还是看上面的官方demo或者本站提供的离线版)

以下是官网的实例截图:

从这2张图片中就能看到此插件的作用了把!

更鲜明的例子,chinaz.com的素材列表页也用了这个jQuery Masonry 插件

chinaz.com截图:

该如何使用呢,其实很简单,看下代码:

test1 test2 test3 test4

//

使用说明:

. . . → Read More: jquery Masonry瀑布流插件(转)

jquery autocomplete改进

最近在使用jquery 的 autocomplete 插件,遇到几个问题,分享一下解决方案。

firefox下的问题

1、支持中文输入: (在IE等非firefox浏览器下可以准确的匹配中文字符,但firefox下却没有任何匹配,该方案里利用firefox的oninput事件来修正hack一下,解决!)
修改199行处:

  }).bind("unautocomplete", function() {
    select.unbind();
    $input.unbind();
    $(input.form).unbind(".autocomplete");
}).bind("input", function() {
   // @hack by liqt:support for inputing  chinese characters  in firefox
   onChange(0, true);
});
       

Continue reading »jquery autocomplete改进

php表单双引号JSON交互

php 提交的表单中有双引号,单引号

可用stripslashes($string) 函数处理,处理之后可以正常的在非转义条件下使用。

尤其是当json数据和php交互时,以一个简单的交互为例:

//将简单的javascript hash Object转为json字符串 function simpleJSON (obj){ var jsonattr=[]; for (var i in obj) { if (obj.hasOwnProperty(i)) { jsonattr.push(‘”‘+i+'”:”‘+obj[i]+'”‘); } } return ‘{‘+jsonattr.join(‘,’)+’}'; } var jsonParam={}; jsonParam.name=”张三”; jsonParam.sex=”未知”; jsonParam.age=”-100″; $.ajax({ url : request_url.php data : ‘jsonParam=’+twinium.tool.simpleJSON(jsonParam), async : false, success : function(txt) {alert(“执行成功”);} });

上面运用的代码与request_url.php 交互,在php端需要将得到的jsonParam参数处理一下:

$jsonParam=stripslashes($_GET[‘jsonParam’]); $josnObj=json_decode($jsonParam); var_dump($jsonObj); //可以看到已经成功解析JSON . . . → Read More: php表单双引号JSON交互