分类目录归档:JavaScript
[原] 基本实现swfupload和easyui的结合
[原] 建了一个google code项目:jquery myhint plugin
在这里:http://code.google.com/p/jquery-myhint-plugin/
easy to use myhint plugin:
1 2 3 4 5 6 7 |
<script src="jquery.myhint.min.js" type="text/javascript"></script> <link href="jquery.myhint.css" type="text/css" rel="Stylesheet" /> ... <tag class="_hint" hint="text">...</tag> <tag class="_hint" hint="(left,top)text">...</tag> <tag class="_hint" hint="#tipid">...</tag><div id="tipid">text</div> <tag class="_hint" hint="(left,top)#tipid">...</tag><div id="tipid">text</div> |
效果:
[原] 一种将数据表DataTable转为JSON格式的新方法
最近实现一种将数据表转为JSON表示的新方法。
这种方法表示的JSON数据更省空间(尤其是网络传输,能省很多数据量),使用起来也很方便。
假设有这样一张数据表:
ID | Name | Location |
1 | 周杰伦 | 香港 |
2 | 侯佩岑 | 台湾 |
3 | 张靓颖 | 大陆 |
一般的JSON表示方法为:
1 2 3 4 5 |
[ {"ID":1, "Name": "周杰伦", "Location": "香港"}, {"ID":2, "Name": "侯佩岑", "Location": "台湾"}, {"ID":3, "Name": "张靓颖", "Location": "大陆"} ] |
可以看到,数据表的字段信息(column)在每条记录里都写了一遍,比较浪费空间。如果字段很多很长,甚至会比有效内容更多。随着记录数增加,浪费的数据量是很可观的。尤其像以前小百合BBS自己付流量费的时候,流量啊流量。。。。。。
我实现的表示方法产生的JSON格式是这样的:
1 2 3 4 5 6 7 8 |
{ "C":{"ID":0, "Name":1, "Location":2}, "D":[ [1, "周杰伦", "香港"], [2, "侯佩岑", "台湾"], [3, "张靓颖", "大陆"] ] } |
这种方法将字段信息单独提取到C属性里,而D属性是纯粹的记录数据。
其实D属性本身已经完全能表示记录内容,C属性只是为了使用时方便。
在这短短几个字段及几条数据的极端情况下,已经省下几十字节。
下面对比使用方法,我承认这种方法稍微比通用的方法复杂一点,但是带来的节省,个人认为还是值得的:
1 2 |
通用方法取周杰伦:[0].Name 我的方法取周杰伦:D[0][C.Name] |
下面是上述DataTable转JSON的C#代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
using System; using System.Text; using System.Web.Script.Serialization; /// <summary> /// 一种JSON表示DataTable的新方法 /// <see href="https://blog.bbdd.ltd/technology/javascript/361.html" /> /// </summary> public static class JsonUtil { static JavaScriptSerializer _jss = new JavaScriptSerializer(); /// <summary> /// DataTable 转换成 JSON string。 /// </summary> /// <param name="dt">需要转换的DataTable</param> /// <returns>JSON结构字符串</returns> public static string FromDataTable(System.Data.DataTable dt) { StringBuilder sb = new StringBuilder(256); FormDataTable(dt, sb); return sb.ToString(); } /// <summary> /// DataTable 转换成 JSON string。 /// </summary> /// <param name="dt">需要转换的DataTable</param> /// <param name="sb">StringBuilder</param> public static void FormDataTable(System.Data.DataTable dt, StringBuilder sb) { sb.Append("{C:{"); // -> {"ID":0, "Name":1} for (int j = 0; j < dt.Columns.Count; j++) { if (j > 0) sb.Append(','); sb.Append('"').Append(dt.Columns[j].ColumnName).Append('"') .Append(':').Append(j); } sb.Append("},D:["); for (int i = 0; i < dt.Rows.Count; i++) { if (i > 0) sb.Append(','); sb.Append('['); for (int j = 0; j < dt.Columns.Count; j++) { if (j > 0) sb.Append(','); _jss.Serialize(dt.Rows[i][j], sb); } sb.Append(']'); } sb.Append("]}"); } } |
[原] jquery-easyui的combotree在.net开发中不显示数据的问题
最近使用jquery-easyui 1.2,遇到一个问题。
一搜索,发现好多人在问:
问题见:http://jquery-easyui.wikidot.com/forum/t-248817/combotree-net
“combotree在.net开发中,一直不显示数据。
单独html页面就可以显示出来。同一数据文件,json格式绝对正确。”
解决问题首先要发现原因,用firebug试了一下,发现是combotree读取json的时候是用POST方法。
而.net环境不支持静态文件用POST方法获取内容。错误如下:
1 2 3 |
POST app_user.js http://localhost:9655/js/app_user.js 405 Method Not Allowed |
发现原因后,解决问题就简单很多。
找到easyui的js代码:
1 2 3 |
_41.addClass("tree-loading"); $.ajax({type:"post",url:_3e.url,data:_3c,dataType:"json",success:function(_42){ _41.removeClass("tree-loading"); |
在我的应用中,因为不需要POST方式获取json,就把type:”post”改为type:”get”即可。
已在easyui的官方论坛中说明这个问题,希望以后能多个method的设置选项。
2010.12.18 更新:
新版本jquery-easyui 1.2.1提供了tree组件的method方法设置,但是在用css自动解析方式时无效。
即通过《input class=”easyui-combotree” url=”…js” method=”get” /》调用时,仍然使用POST。
查看代码,原来是这里parseOptions时未对method进行解析:
1 2 3 4 5 6 |
$.fn.tree.parseOptions=function(_13c){ var t=$(_13c); return {url:t.attr("url"),... //加上对method的解析: return {url:t.attr("url"),method:(t.attr("method")?t.attr("method"):"post"),... |
问题解决。
[原] 基于jQuery的自动TAB选项卡实现
jQuery挺好用,我就不说啥了。
今天实现了“自动TAB”,下面分享一下。有人会问为啥不用jquery-ui,主要是页面css已经全弄好了,实在不想为ui再写一次;其次是ui毕竟是那么大个家伙,心疼我的性能。
HTML页面非常简单:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="tabBox"> <!--选项卡菜单--> <ul class="tabMenu"> <li class="on"><a>选项卡1</a></li> <li><a>选项卡2</a></li> </ul> <!-- 选项卡内容--> <div class="hide"> 选项卡1内容 </div> <div class="hide"> 选项卡2内容 </div> </div> |
之后就是用jQuery自动对这个.tabBox进行处理,加上鼠标点击自动切换的功能(当然可以加上鼠标移过的选项支持,作为示例,我就没写那么完善):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$(function () { //===== TAB自动切换 tabBox ===== // <div class="tabBox"> // <ul class="tabMenu"><li class="on"><a>选项卡1</a></li></ul> // <div class="hide">内容1</div> // </div> // (1) li增加"index"记录偏移量(第i项),给a增加click方法 $('.tabBox .tabMenu li').each(function(i, li) { li = $(li); li.attr('index', i) .children('a').attr('href', 'javascript:;').click(function() { //点击项的li的class设为on var li_on = $(this).parent(), index = li_on.attr('index'); li_on.parent().children().removeClass('on'); li_on.addClass('on'); //显示对应的div内容。注意get(index)返回的是DOM节点,因此需要再$()转为jQuery对象 $( li_on.parent().parent().children('div').addClass('hide').get(index) ).removeClass('hide'); }); //显示现有的li class=on对应的div内容 if (li.hasClass('on')) { li.children('a').click(); } }); }); |
[原] 给LilyBBS新增源代码语法高亮功能
使用方法:
[code]
代码
[/code]
目前支持:C/C++、Java、Python、Bash、SQL、HTML、XML、CSS、Javascript、Makefile、Ruby、PHP、Awk、Perl
效果示例:
#include <stdio.h>
int main() {
printf(“Many people think they are full of niubility,”);
}
import org.bianbian.code;
class CodeTest() {
public static void main(String[] args) {
System.out.println(“and like to play zhuangbility,”);
}
}
<?php
echo ‘which only reflect their shability.’;
?>
采用的是prettify,为LilyBBS的客户端解析UBB做了点修改。推荐一下,还是挺好用的。
[原] 关于正则表达式批量替换字符串解决方案答网友问
发信人: Net (BBS上没有什么事情是bg不能解决的), 信区: WebDesign
标 题: Re: 如何使用正则分别替换?
发信站: 南京大学小百合站 (Sun Apr 20 15:21:23 2008)
不太可能一句话搞定,不过有相对而言的解决办法:
1) 简单易懂
1 2 3 4 5 6 7 |
function arrayReplace(str, from, to) { for(var i=0; i < from.length; i++) str = str.replace(new RegExp(from[i], "g"), to[i]); return str; } var from = ["A", "B", "C"], to = ["asdf", "fdsa", "......"]; str = arrayReplace(str, from, to); |
2) 勉强算一句话吧。。。
1 2 3 |
str = str.replace(/(A|B|C)/g, function ($0, $1) { return {"A": "asdf", "B": "fdsa", "C": "......"}[$1] }); |
【 在 superphoenix (格云朱雀) 的大作中提到: 】
: 比如要将一个字符串中的A替换为asdf,B替换成fdsa,C替换成……
: 能不能用一个正则话就替换成功?
: 而不是写成str=str.replace(/A/g,”asdf”).replace(/B/g,”fdsa”)….
: 谢谢!
※ 来源:.南京大学小百合站 bbs.nju.edu.cn.[FROM: Net.nEt.neT.Orz]
[原] 关于web访问小百合BBS的脚本问题
最近发现个别网友访问小百合BBS会出现如下提示:
见到此文字可能是由于浏览器禁用了活动脚本或者脚本有误
请启用脚本支持后刷新本页;若仍有问题,请点击这里提问
原理:使用Javascript动态输出框架结构(好处是能缓存静态化网页,区别guest用户和登录用户)。因此,一旦这步出现错误,框架结构未建立成功,那么就会显示body里的提示内容。
原因:
(1)浏览器版本不支持。目前小百合BBS支持IE5.5(不保证全部功能有效),完美支持IE6+、Firefox 2.0+、Opera 9+等。如果您的浏览器不在此列,并且测试正常,欢迎反馈。
(2)浏览器脚本引擎未启用。您可以点击这里测试:如果能弹出“脚本启用”,那说明这项没有问题;否则,请修改设置如下:
Firefox: IE:
(3)脚本有误。可能性不是很大,除非刚好碰到更新的脚本确实存在错误。基本上我都会测试以后才放上去。不过万一你怀疑是这个问题,可以telnet方式到sysop版看看,如果其他人都没问题那基本就只是您的问题了。
(4)浏览器缓存内的脚本版本过旧。因为浏览器缓存脚本文件(这样不需要每次都下载,加快速度),如果服务器端已经更新了脚本文件,而您的浏览器缓存因为各种原因没有更新,可能也会导致这个问题。请清空浏览器缓存后刷新测试:
Firefox: IE:
(5)校内用户访问BBS请关闭代理服务器。
(6)浏览器或系统部分DLL(动态链接库)功能因为病毒或木马的原因失效(Windows系统),请点此下载修复程序,保存后运行,然后重新打开浏览器测试。
如果还有问题,请留言将您的操作系统、浏览器(基本是IE出问题)及版本、杀毒软件等告知。另外推荐使用Chrome
[译] JavaScript (XMLHttpRequest) 读取二进制数据流
译者注:原来想用JS直接处理C丢过来的struct数据,具体可以查看:[原] C的struct和JSON交互。
经过千辛万苦的查找,找到了这篇文章(作者应该比我更辛苦):Downloading Binary Streams with Javascript XMLHttpRequest
把关键点翻译如下(不过我还没有测试):
利用XMLHttpRequest的overrideMimeType方法设置charset为x-user-defined。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//fetches BINARY FILES synchronously using XMLHttpRequest load_url = function(url) { netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); var req = new XMLHttpRequest(); req.open('GET',url,false); //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com] req.overrideMimeType('text/plain; charset=x-user-defined'); req.send(null); if (req.status != 200) return ''; return req.responseText; } var filestream = load_url(url); var abyte = filestream.charCodeAt(x) & 0xff; |
IE不支持overrideMimeType方法,不过有评论者说VBScript可以实现:
1 2 3 4 5 6 |
Dim xhr Set xhr = CreateObject("Microsoft.XMLHTTP") xhr.Open "GET", "folder.bin", False xhr.setRequestHeader "Accept-Charset", "x-user-defined" xhr.setRequestHeader "Content-Type", "application/pdf" xhr.send Null |
[原] 支持IE和Firefox的鼠标滚轮事件JavaScript代码
滚轮IE和Firefox的代码不一样:
IE是mousewheel事件,Firefox是DOMMouseScroll事件
事件属性,IE是event.wheelDelta,Firefox是event.detail
属性的方向值也不一样,IE向上滚 > 0,Firefox向下滚 > 0
1 2 3 4 5 6 7 8 9 10 11 12 |
//滚轮放大或缩小,基于Prototype 1.6 var scrollfunc = function(event) { var direct = 0; if (event.wheelDelta) { direct = event.wheelDelta > 0 ? 1 : -1; } else if (event.detail) { direct = event.detail < 0 ? 1 : -1; } zoom(direct); }; Event.observe(document, 'mousewheel', scrollfunc); Event.observe(document, 'DOMMouseScroll', scrollfunc); //firefox |
[原] 模仿Google Map的FY2C实时云图平台上线~
模仿Google Map(图片切片载入在此平台不需要实现):
支持IE、Firefox等,支持鼠标移动、鼠标双击放大(左键)缩小(右键)、鼠标滚轮放大缩小
云图实时处理和发布(因为在学校内网,实时版本大家不能看到啦)
这里贴下演示地址(只有最后两个时次的图片):FY2C实时云图平台演示
[原] 关于Javascript的this关键字答网友问
发信人: Net (BBS上没有什么事情是bg不能解决的), 信区: WebDesign
标 题: Re: Javascript问题
发信站: 南京大学小百合站 (Tue Mar 25 01:16:03 2008)
Javascript里的this和其他OO语言不一样
Javascript其实并不适合做OO,其实OO也并不适合Javascript
扯远了。。。。。。
this你就当“执行函数的宿主”理解。因此在一串函数的执行过程中,this不停地在变。
1 2 3 4 5 6 7 8 9 10 |
A = { member: "OK", method: function () { alert(this.member); } }; B = A.method; A.method(); //弹出"OK". A是宿主,this.member == A.member B(); //弹出undefined. window(缺省)是宿主,this.member == window.member |
为了解决这个问题,很多框架对此进行了包装。
比如Prototype,用bind,实际是动态生成一个function,把宿主作为动态function的执行者,这样对用户来说,this似乎没有变化。
1 2 3 4 5 6 7 |
bind: function() { if (arguments.length < 2 && Object.isUndefined(arguments[0])) return this; var __method = this, args = $A(arguments), object = args.shift(); return function() { return __method.apply(object, args.concat($A(arguments))); } } |
实际只要明白this是执行者的指针,一切都可迎刃而解。
[原] IE模拟鼠标右键双击事件
IE实在太垃圾了,再鄙视一次。。。鼠标右键双击居然没有。。。。
只好用onmouseup事件模拟一个(基于Prototype 1.6):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
if (Prototype.Browser.IE) { mouseCount = 0; Event.observe(document, 'mouseup', function(event) { if (Event.isRightClick(event)) { if (++mouseCount > 1) { mouseCount = 0; var pxy = Event.pointer(event); alert("right mouse double click on: " + pxy.x + ", " + pxy.y); } else { setTimeout("mouseCount = 0", 1000); } } }); } |
[原] 也许是prototype框架的bug
不知道怎么给prototype提交bug report,就写在这里吧:
其实我没有测试过,只是看prototype源码的时候,觉得是个bug:
对String的原型(prototype)添加toJSON()函数只是转义了引号,未转义”\”:
1 2 |
if (useDoubleQuotes) return '"' + escapedString.replace(/"/g, '\\"') + '"'; return "'" + escapedString.replace(/'/g, '\\\'') + "'"; |
如果用户在input里输入\\,转成string应该是”\\\\”,如果没有转义,再写回去的时候就丢了一个\
应该在转义引号前先转义\:
1 |
.replace(/\\/g, '\\\\').replace(/"/g, '\\"') |