标签 jQuery 下的文章

Code on Web

Introduction

Code on Web,简称COW。是一个基于SyntaxHighlighter 3.0.83 将代码转换为HTML的在线小工具。

一般我们在网页上展示各种计算机语言(C、C++、C#、PHP、JAVA.......)的源代码有3个途径

  1. 将原始代码写在HTML标签(比如<pre>),然后通过客户端的JavaScript让原始代码转换为HTML让浏览器解析。SyntaxHighlighter就是其中一个很优秀的工具之一,其他的还有Google的Prettify等等。这是一种最为流行的方法, 优点:节省带宽、节省硬盘。 缺点:占用客户端资源较多。如果你使用了wordpress的tinymce等WYSIWYG编辑器,在可视和HTML视图之间切换的时候,你的所有原始代码将会被弄乱。
  2. 第二种方法是将存储在数据库、文件系统里面的代码通过正则表达式提取,然后在服务器端进行转换,直接将生成的HTML代码输出到浏览器。 优点:节省带宽、节省硬盘。 缺点:代码多了,需要考虑服务器性能。
  3. 第三种就是Code on Web这种将生成好的HTML代码直接贴到网页上。 优点:客户端CPU资源占用少,无需任何server/client端脚本支持。 缺点:需要耗费更多的硬盘、网络带宽。因为显然HTML代码大小是原始代码的数倍。。`

原理

原理很简单,就是将原始代码通过正则表达式、字符串替换等方法转化为可读性强的HTML代码。HTML代码标签只含有具有一定意义的class属性,后续可以通过修改引用的css来美化代码样式.可以说也是具有一定的灵活性.

小例子

/*
 *    check the time ,disable update post_name where it is already unix time
 *      newest version goto: http://tunps.com/code-on-web/
 */
function is_valid_unixtime($timestamp)
{
    return preg_match('/^[0-9]+$/',$timestamp) && strlen($timestamp)&gt;=10 && strlen($timestamp)&lt;=13;
}

Feature

  • 支持多种语言,AppleScript、ActionScript、Bash、CodeFushion、C++、C#、CSS、Delphi、Diff、Erlang、Groovy、Java、JavaFx、Javascript、Perl、PHP、Plaint、PowerShell、Python、Ruby、SASS、Scala、SQL、VB、XML等,如需更多语言,可以自己写Brush,规范是很简单的。
  • 支持行号显示、已经定义起始行号数字。
  • 支持0填充行号。
  • 支持单行或者多行的高亮显示。
  • 支持混合HTML语法高亮(PHP、ASP等脚本都可以混合HTML)。
  • 支持Smart-Tab,让缩进对其,并且可以自己Tab大小。

usage

首先需要在您贴代码的博客或者网站引用SyntaxHighlighter的主题CSS,默认的是shCoreDefault.css.

如果是wordpress,可以在主题文件夹里面的header.php适当位置添加代码:

<link rel="stylesheet" type="text/css" media="all" href="<?php echo site_url('/YourCSSPath/shCoreDefault.css'); ?>" />

最新版本请到 http://tunps.com/lab/cow/

在"源代码"文本框中输入代码,然后进行各种设置,点击"转换"按钮,复制生成的"HTML代码"文本框的内容到文章即可.

changelog

  1. r3 2011.06.13 using external css file instead of inline style , so we can generate less code and configuring code stylesheet can be more flexible.
  2. r2 2011.06.12 fix bug: white-space:nowrap didn't work on Opera
  3. r1 2011.06.07 initial release

feedback

如果在使用中有任何的问题,请在本文下面写上你的评论。谢谢支持

JsTree和jquery.validate冲突

I'm guessing you're using version 1.6 of the validation library, take a look at the source here: http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.js

All the way at the bottom:

$.extend($.fn, {
delegate: function(type, delegate, handler) {
return this.bind(type, function(event) {
var target = $(event.target);
if (target.is(delegate)) {
return handler.apply(target, arguments);
}
});
},
triggerEvent: function(type, target) {
return this.triggerHandler(type, [$.event.fix({ type: type, target: target })]);
}
})



The problem is that 1.6 created the <code>$(selector).delegate()</code> function above, which is <strong>not</strong> jQuery core <a href="http://api.jquery.com/delegate/" rel="nofollow"><code>.delegate()</code></a>, the main issue is a naming conflict and the arguments/behavior aren't the same:
  • jQuery.validate: .delegate(type, delegate, handler)
  • jQuery core: .delegate( selector, eventType, handler )

Barring other details like context, the first issue is the first and second arguments are backwards.

Including jQuery.validate 1.6 breaks the .delegate() function which jsTree relies on. If you just upgrade to version 1.7+ of the validation plugin, this issue should go away, it calls its function validateDelegate after that.

两个插件都有delegate函数,jquery.validate 1.6覆盖掉了jstree的delegate,造成冲突,1.7+以上的版本将函数名修改为validateDelegate解决了冲突。

来源:http://stackoverflow.com/questions/3079425/jstree-conflicts-with-jquery-validate

本地测试jqGrid环境

项目很多都地方都需要使用data grid,我参考了N久,还是jqGrid最为强大。当然不一定强大的就是最好的,看你的口味了,我反正是重口味。这个是 jQuery Grid Plugin的主页。首先下载jquery.jqGrid-3.6.4.zip,和jQuery UI 类似,可以根据所需模块自定义下载,达到文件的最小化,速度最优化,因为我比较菜,我全部选择,免得出问题。jquery.jqGrid-3.6.4.zip文件有283kB左右。是这样一个文件树结构(tree /f命令果然牛逼):

├─css
│ ellipsis-xbl.xml
│ ui.jqgrid.css

├─js
│ │ Changes.txt
│ │ install.txt
│ │ jquery-1.3.2.min.js
│ │ jquery.jqGrid.min.js
│ │
│ └─i18n
│ grid.locale-bg.js
│ grid.locale-bg1251.js
│ grid.locale-cat.js
│ grid.locale-cn.js
│ grid.locale-cs.js
│ grid.locale-de.js
│ grid.locale-dk.js
│ grid.locale-el.js
│ grid.locale-en.js
│ grid.locale-fa.js
│ grid.locale-fi.js
│ grid.locale-fr.js
│ grid.locale-he.js
│ grid.locale-is.js
│ grid.locale-it.js
│ grid.locale-ja.js
│ grid.locale-nl.js
│ grid.locale-no.js
│ grid.locale-pl.js
│ grid.locale-pt-br.js
│ grid.locale-pt.js
│ grid.locale-ro.js
│ grid.locale-ru.js
│ grid.locale-sp.js
│ grid.locale-sv.js
│ grid.locale-tr.js
│ grid.locale-ua.js

└─src
│ grid.base.js
│ grid.celledit.js
│ grid.common.js
│ grid.custom.js
│ grid.formedit.js
│ grid.import.js
│ grid.inlinedit.js
│ grid.jqueryui.js
│ grid.loader.js
│ grid.postext.js
│ grid.setcolumns.js
│ grid.subgrid.js
│ grid.tbltogrid.js
│ grid.treegrid.js
│ jqDnR.js
│ jqModal.js
│ jquery.fmatter.js
│ jquery.searchFilter.js
│ JsonXml.js
│ ui.multiselect.js

├─css
│ ellipsis-xbl.xml
│ jquery.searchFilter.cs
│ ui.jqgrid.css
│ ui.multiselect.css

└─i18n
grid.locale-bg.js
grid.locale-bg1251.js
grid.locale-cat.js
grid.locale-cn.js
grid.locale-cs.js
grid.locale-de.js
grid.locale-dk.js
grid.locale-el.js
grid.locale-en.js
grid.locale-fa.js
grid.locale-fi.js
grid.locale-fr.js
grid.locale-he.js
grid.locale-is.js
grid.locale-it.js
grid.locale-ja.js
grid.locale-nl.js
grid.locale-no.js
grid.locale-pl.js
grid.locale-pt-br.js
grid.locale-pt.js
grid.locale-ro.js
grid.locale-ru.js
grid.locale-sp.js
grid.locale-sv.js
grid.locale-tr.js
grid.locale-ua.js

src是给用来研究代码的,就需要js目录和css目录就ok了。再下载一个jqgrid_demo36.zip。需要用到demo包里面的example.html、example.php、dbconfig.php、database.sql。将dbconfig.php里面的数据库信息和自己的本地mysql账户相对应,然后新建一个名为griddemo的数据库。将database.sql导入griddemo。接下来到jqueryui.com下载一个主题,版本用1.7.2的,因为jqGrid基于jQuery 1.3.2开发。将jquery-ui-1.7.2.custom-1.zip的css目录下的文件jquery-ui-1.7.2.custom.css和images目录拷贝到example.html同目录下。修改example.html,将:

<link rel="stylesheet" type="text/css" media="screen" href="themes/sand/grid.css" />

改为:

<link rel="stylesheet" type="text/css" media="screen" href="/css/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/ui.jqgrid.css" />

第一个是jquery ui的css,第二个是jqgrid自带的css。

将:

<script src="js/jquery.jqGrid.js" type="text/javascript"></script>

改为:

<script src="/js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="/js/jquery.jqGrid.min.js" type="text/javascript"></script>

一定要在载入jqGrid之前载入locale。

这样jqGrid利用json传数据的例子就弄好了。

本地测试jqGrid环境

jQuery报错 uncaught exception type property can’t be changed

最近写了一个测试twiiter、嘀咕等api的测试程序,因为是测试,没有使用OAuth,直接采用HTTP Authentication 。

jQuery报错 uncaught exception type property can’t be changed

有两个文本框,分别用户输入用户名和密码,当鼠标焦点放在密码输入框上面的时候,改为将input的type属性由text改为password,就是输入的文字都变成"●●●●●●●"。语句就是

$("#pswd").focus(function(){
$(this).attr('type','password');
});

结果效果没有实现,报错

jQuery报错 uncaught exception type property can’t be changed

搜索到此文, jQuery的某段源代码如下

// We can't allow the type property to be changed (since it causes problems in IE)
if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode )
throw "type property can't be changed";

看样子是jQuery为了防止IE引发安全问题。所以只是jQuery不允许这样写,你如果你非要改变type,可以直接用javascript来完成:

var pass = document.createElement('input');
pass.type = 'password';
document.body.appendChild(pass);
pass.type = 'text';
pass.value = 'Password';

搞清楚了这样问题,那么我那个测试程序怎么做了,还是那篇文章给了灵感,可以放两个input,根据onfocus()和onblur()事件来show()或者hide()。

HTML code:

<input id="fakepswd" type="text" value="输入密码..." />
<input id="pswd" name="pswd" type="password" />

JS code:

//帐号
$("#user").focus(function(){
if($("#user").val()=="输入帐号...")
{
$("#user").val("");
}
});
$("#user").blur(function(){
if($("#user").val()=="")
{
$("#user").val("输入帐号...");
}
});
//密码
$("#fakepswd").focus(function(){
$(this).attr('type','password');
});
$("#pswd").blur(function(){
if($("#pswd").val()=="")
{
$("#fakepswd").show();
$("#pswd").hide();
}
});

(function($){})(jQuery)含义

这里实际上是匿名函数

function(arg){...}
这就定义了一个匿名函数,参数为arg

而调用函数时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,即:
(function(arg){...})(param)
这就相当于定义了一个参数为arg的匿名函数,并且将param作为参数来调用这个匿名函数

而(function($){...})(jQuery)则是一样的,之所以只在形参使用$,是为了不与其他库冲突,所以实参用jQuery

via