jquery前端设计辅助工具js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery前端设计辅助工具js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jqueryǰ����Ƹ�������</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<style>
h3{ font-family:"Arial"; font-size:30px; color:#666; margin:20px 0 10px 0; text-shadow:2px 2px #fff;}
#content{ font-size:12px; border-radius: 2px; border:1px solid #bbb; *border-color:#bbb #e9e9e9 #e9e9e9 #bbb; color:#325AA3; box-shadow:0 0 5px #ddd inset; overflow:auto;width:900px; height:400px;  padding:5px; background-color:#fff; margin:5px 0;}
#code{ width:920px; height:auto; overflow:hidden; margin:50px auto;}
.btn1{outline:none; background:#82ce18; font-size:14px; cursor:pointer; display:inline-block; text-decoration:none; padding:10px; border:1px solid #82ce18; color:#fff; width:120px; border-radius:2px; margin:5px 15px 0 0; text-shadow:-1px -1px #305CAA; font-weight:bold; letter-spacing:3px;}
.cur1{outline:none; background:#FF9900; font-size:14px; cursor:pointer; display:inline-block; text-decoration:none; padding:10px; border:1px solid #FF9900; color:#000; width:120px; border-radius:2px; margin:5px 15px 0 0; text-shadow:-1px -1px #305CAA; font-weight:bold; letter-spacing:3px;}
</style>
<script type="text/javascript" src="js/my.js"></script>
<script type="text/javascript" src="js/Words.js"></script>
<script type="text/javascript" src="js/jsformat.js"></script>
<script type="text/javascript" src="js/Packer.js"></script>
<script type="text/javascript">
$(document).ready(function(){	
	$("#btn").click(function(){
		var packer = new Packer;
		var c = $("#content").val();	
		if (c.length<=0 || c=="����������")
		{
			$("#content").val("����������");
			
		}else{
			var v = packer.pack(c, true, true);
			$("#content").val(v);
		}
	});	

	
	$('.btn1').live('mouseover', function(){	
		$(this).addClass("cur1");	
	}).live('mouseout', function(){	
		$(this).removeClass("cur1");	
	});
	
	$("#btnDecode").click(function(){
		var c = $("#content").val();	
		if (c.length<=0 || c=="����������")
		{
			$("#content").val("����������");
			
		}else{		
			var r = eval(c.slice(4));		
			r = r.replace(/^\s+/, '');   
			if (r && r.charAt(0) === '<') {
				r = style_html(r, 4, ' ', 80);
			} else {
				r = js_beautify(r, 4, ' ');
			}
			$("#content").val(r);
		}
	});
	
	$("#btnJSFormat").click(function(){
		var r = $("#content").val();	
		r = r.replace(/^\s+/, ''); 
        if (r && r.charAt(0) === '<') {
            r = style_html(r, 4, ' ', 80);
        } else {
            r = js_beautify(r, 4, ' ');
        }
		$("#content").val(r);
	});
	
	$("#btnJSYS").click(function(){		
		var c = $("#content").val();
		if (c.length<=0 || c=="����������")
		{
			$("#content").val("����������");
			
		}else{
			var v = jsmin("", c, 2);
			$("#content").val(v);
			alert("ԭ����С"+jsmin.oldSize+" ѹ�����С��"+jsmin.newSize+"  ѹ����Ϊ��"+(Math.round(jsmin.newSize / jsmin.oldSize * 1000) / 10) + '%');
		}
	});
	
	$("#btnCSSFormat").click(function(){
		CSS('format');
	});
	
	$("#btnCSSYS").click(function(){
		CSS('pack');
	});
});
    var lCSSCoder = {
        format: function (s) {//��ʽ������
            s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
            s = s.replace(/;\s*;/g, ";"); //��������ֺ�
            s = s.replace(/\,[\s\.\#\d]*{/g, "{");
            s = s.replace(/([^\s])\{([^\s])/g, "$1 {\n\t$2");
            s = s.replace(/([^\s])\}([^\n]*)/g, "$1\n}\n$2");
            s = s.replace(/([^\s]);([^\s\}])/g, "$1;\n\t$2");
            return s;
        },
        pack: function (s) {//ѹ������
            s = s.replace(/\/\*(.|\n)*?\*\//g, ""); //ɾ��ע��
            s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
            s = s.replace(/\,[\s\.\#\d]*\{/g, "{"); //�ݴ����
            s = s.replace(/;\s*;/g, ";"); //��������ֺ�
            s = s.match(/^\s*(\S+(\s+\S+)*)\s*$/); //ȥ����β�հ�
            return (s == null) ? "" : s[1];
        }
    };
    function CSS(s) {
		var r = $("#content").val();
        r = lCSSCoder[s](r);
		$("#content").val(r);
    }
//-->

</script>
</head>

<body>

<div id="code">
<h3>����JS����/�������JS��ʽ��/ѹ����CSS��ʽ��/ѹ��</h3>
<textarea id="content">
/* 
 *
 * �ṩJS������JS�������JSѹ����JS��ʽ����CSS��ʽ����CSSѹ��
 *
 * ������ʹ����򵥵�ԭ��ʵ�֣����Ϊ�Ϳ����ڱ���ʹ��
 *
 * ����ҷ���ʹ��
 *
 */
</textarea><br />
<input id="btn" type="button" value="����" class="btn1"  />
<input id="btnDecode" type="button" value="�����" class="btn1"  />
<input id="btnJSFormat" type="button" value="JS��ʽ��" class="btn1"  />
<input id="btnJSYS" type="button" value="JSѹ��" class="btn1"  />
<input id="btnCSSFormat" type="button" value="CSS��ʽ��" class="btn1"  />
<input id="btnCSSYS" type="button" value="CSSѹ��" class="btn1"  />
</div>
</body>
</html>

JS代码(Packer.js):

/*Packer version 3.0 (final) - copyright 2004-2007,Dean Edwardshttp://www.opensource.org/licenses/mit-license*/
eval(base2.namespace);
	eval(JavaScript.namespace);
	var IGNORE = RegGrp.IGNORE;
	var REMOVE = "";
	var SPACE = " ";
	var WORDS = /\w+/g;
	var Packer = Base.extend({
	minify:function(script){
	script = script.replace(Packer.CONTINUE,"");
	script = Packer.data.exec(script);
	script = Packer.whitespace.exec(script);
	script = Packer.clean.exec(script);
	return script;
}
,pack:function(script,base62,shrink){
	script = this.minify(script + "\n");
	if (shrink) script = this._shrinkVariables(script);
	if (base62) script = this._base62Encode(script);
	return script;
}
,_base62Encode:function(script){
	var words = new Words(script);
	var encode = function(word){
	return words.get(word).encoded;
}
;
	/* build the packed script */
var p = this._escape(script.replace(WORDS,encode));
	var a = Math.min(Math.max(words.size(),2),62);
	var c = words.size();
	var k = words;
	var e = Packer["ENCODE" + (a > 10 ? a > 36 ? 62:36:10)];
	var r = a > 10 ? "e(c)":"c";
	// the whole thingreturn format(Packer.UNPACK,p,a,c,k,e,r);
}
,_escape:function(script){
	// single quotes wrap the final string so escape them// also escape new lines required by conditional commentsreturn script.replace(/([\\'])/g,"\\$1").replace(/[\r\n]+/g,"\\n");
}
,_shrinkVariables:function(script){
	// Windows Scripting Host cannot do regexp.test() on global regexps.var global = function(regexp){
	// This function creates a global version of the passed regexp.return new RegExp(regexp.source,"g");
}
;
	var data = [];
	// encoded strings and regular expressionsvar REGEXP = /^[^'"]\//;
	var store = function(string){
	var replacement = "#" + data.length;
	if (REGEXP.test(string)){
	replacement = string.charAt(0) + replacement;
	string = string.slice(1);
}
data.push(string);
	return replacement;
}
;
	// Base52 encoding (a-Z)var encode52 = function(c){
	return (c < 52 ? '':arguments.callee(parseInt(c / 52))) +((c = c % 52) > 25 ? String.fromCharCode(c + 39):String.fromCharCode(c + 97));
}
;
	// identify blocks,particularly identify function blocks (which define scope)var BLOCK = /(function\s*[\w$]*\s*\(\s*([^\)]*)\s*\)\s*)?(\{
	([^{
}
]*)\}
)/;
	var VAR_ = /var\s+/g;
	var VAR_NAME = /var\s+[\w$]+/g;
	var COMMA = /\s*,\s*/
;
	var blocks = [];
	// store program blocks (anything between braces{
}
)// encoder for program blocksvar encode = function(block,func,args){
	if (func){
	// the block is a function block// decode the function block (THIS IS THE IMPORTANT BIT)// We are retrieving all sub-blocks and will re-parse them in light// of newly shrunk variablesblock = decode(block);
	// create the list of variable and argument namesvar vars = match(block,VAR_NAME).join(",").replace(VAR_,"");
	var ids = Array2.combine(args.split(COMMA).concat(vars.split(COMMA)));
	// process each identifiervar count = 0,shortId;
	forEach (ids,function(id){
	id = trim(id);
	if (id && id.length > 1){
	// > 1 charid = rescape(id);
	// find the next free short name (check everything in the current scope)do shortId = encode52(count++);
	while (new RegExp("[^\\w$.]" + shortId + "[^\\w$:]").test(block));
	// replace the long name with the short namevar reg = new RegExp("([^\\w$.])" + id + "([^\\w$:])");
	while (reg.test(block)) block = block.replace(global(reg),"$1" + shortId + "$2");
	var reg = new RegExp("([^{
	,\\w$.])" + id + ":","g");
	block = block.replace(reg,"$1" + shortId + ":");
}
}
);
}
var replacement = "~" + blocks.length + "~";
	blocks.push(block);
	return replacement;
}
;
	// decoder for program blocksvar ENCODED = /~(\d+)~/;
	var decode = function(script){
	while (ENCODED.test(script)){
	script = script.replace(global(ENCODED),function(match,index){
	return blocks[index];
}
);
}
return script;
}
;
	// encode strings and regular expressionsscript = Packer.data.exec(script,store);
	// remove closures (this is for base2 namespaces only)script = script.replace(/new function\(_\)\s*\{
	/g,"{
	;
	#;
	");
	// encode blocks,as we encode we replace variable and argument nameswhile (BLOCK.test(script)){
	script = script.replace(global(BLOCK),encode);
}
// put the blocks backscript = decode(script);
	// put back the closure (for base2 namespaces only)script = script.replace(/\{
	;
	#;
	/g,"new function(_){
	");
	// put strings and regular expressions backscript = script.replace(/#(\d+)/g,function(match,index){
	return data[index];
}
);
	return script;
}
}
,{
	CONTINUE:/\\\r?\n/g,ENCODE10:"String",ENCODE36:"function(c){
	return c.toString(a)}
",ENCODE62:"function(c){
	return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}
",UNPACK:"eval(function(p,a,c,k,e,r){
	e=%5;
	if(!''.replace(/^/,String)){
	while(c--)r[%6]=k[c]" + "||%6;
	k=[function(e){
	return r[e]}
];
	e=function(){
	return'\\\\w+'}
;
	c=1}
;
	while(c--)if(k[c])p=p." +"replace(new RegExp('\\\\b'+e(c)+'\\\\b','g'),k[c]);
	return p}
('%1',%2,%3,'%4'.split('|'),0,{
}
))",init:function(){
	this.data = reduce(this.data,function(data,replacement,expression){
	data.put(this.javascript.exec(expression),replacement);
	return data;
}
,new RegGrp,this);
	this.clean = this.data.union(this.clean);
	this.whitespace = this.data.union(this.whitespace);
}
,clean:{
	"\\(\\s*;
	\\s*;
	\\s*\\)":"(;
	;
	)",// for (;
	;
	) loops"throw[^}
;
	]+[}
;
	]":IGNORE,// a safari 1.3 bug";
	+\\s*([}
;
	])":"$1"}
,data:{
	// strings"STRING1":IGNORE,'STRING2':IGNORE,"CONDITIONAL":IGNORE,// conditional comments"(COMMENT1)\\n\\s*(REGEXP)?":"\n$3","(COMMENT2)\\s*(REGEXP)?":" $3","([\\[(\\^=,{
}
:;
	&|!*?])\\s*(REGEXP)":"$1$2"}
,javascript:new RegGrp({
	COMMENT1:/(\/\/|;
	;
	;
	)[^\n]*/
.source,COMMENT2:/\/\*[^*]*\*+([^\/][^*]*\*+)*\//.source,CONDITIONAL:/\/\*@|@\*\/|\/\/@[^\n]*\n/.source,REGEXP:/\/(\\[\/\\]|[^*\/])(\\.|[^\/\n\\])*\/[gim]*/
.source,STRING1:/'(\\.|[^'\\])*'/.source,STRING2:/"(\\.|[^"\\])*"/.source}
),whitespace:{
	"(\\d)\\s+(\\.\\s*[a-z\\$_\\[(])":"$1 $2",// http://dean.edwards.name/weblog/2007/04/packer3/#comment84066"([+-])\\s+([+-])":"$1 $2",// c = a++ +b;
	"\\b\\s+\\$\\s+\\b":" $ ",// var $ in"\\$\\s+\\b":"$ ",// object$ in"\\b\\s+\\$":" $",// return $object"\\b\\s+\\b":SPACE,"\\s+":REMOVE}
}
);
	String.prototype.has=function(c){
	return this.indexOf(c)>-1;
}
;
	function jsmin(comment,input,level){
	if(input===undefined){
	input=comment;
	comment='';
	level=2;
}
else if(level===undefined||level<1||level>3){
	level=2;
}
if(comment.length>0){
	comment+='\n';
}
var a='',b='',EOF=-1,LETTERS='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',DIGITS='0123456789',ALNUM=LETTERS+DIGITS+'_$\\',theLookahead=EOF;
	function isAlphanum(c){
	return c!=EOF&&(ALNUM.has(c)||c.charCodeAt(0)>126);
}
function get(){
	var c=theLookahead;
	if(get.i==get.l){
	return EOF;
}
theLookahead=EOF;
	if(c==EOF){
	c=input.charAt(get.i);
	++get.i;
}
if(c>=' '||c=='\n'){
	return c;
}
if(c=='\r'){
	return'\n';
}
return' ';
}
get.i=0;
	get.l=input.length;
	function peek(){
	theLookahead=get();
	return theLookahead;
}
function next(){
	var c=get();
	if(c=='/'){
	switch(peek()){
	case'/':for(;
	;
	){
	c=get();
	if(c<='\n'){
	return c;
}
}
break;
	case'*':get();
	for(;
	;
	){
	switch(get()){
	case'*':if(peek()=='/'){
	get();
	return' ';
}
break;
	case EOF:throw'Error:Unterminated comment.';
}
}
break;
	default:return c;
}
}
return c;
}
function action(d){
	var r=[];
	if(d==1){
	r.push(a);
}
if(d<3){
	a=b;
	if(a=='\''||a=='"'){
	for(;
	;
	){
	r.push(a);
	a=get();
	if(a==b){
	break;
}
if(a<='\n'){
	throw'Error:unterminated string literal:'+a;
}
if(a=='\\'){
	r.push(a);
	a=get();
}
}
}
}
b=next();
	if(b=='/'&&'(,=:[!&|'.has(a)){
	r.push(a);
	r.push(b);
	for(;
	;
	){
	a=get();
	if(a=='/'){
	break;
}
else if(a=='\\'){
	r.push(a);
	a=get();
}
else if(a<='\n'){
	throw'Error:unterminated Regular Expression literal';
}
r.push(a);
}
b=next();
}
return r.join('');
}
function m(){
	var r=[];
	a='\n';
	r.push(action(3));
	while(a!=EOF){
	switch(a){
	case' ':if(isAlphanum(b)){
	r.push(action(1));
}
else{
	r.push(action(2));
}
break;
	case'\n':switch(b){
	case'{
	':case'[':case'(':case'+':case'-':r.push(action(1));
	break;
	case' ':r.push(action(3));
	break;
	default:if(isAlphanum(b)){
	r.push(action(1));
}
else{
	if(level==1&&b!='\n'){
	r.push(action(1));
}
else{
	r.push(action(2));
}
}
}
break;
	default:switch(b){
	case' ':if(isAlphanum(a)){
	r.push(action(1));
	break;
}
r.push(action(3));
	break;
	case'\n':if(level==1&&a!='\n'){
	r.push(action(1));
}
else{
	switch(a){
	case'}
':case']':case')':case'+':case'-':case'"':case'\'':if(level==3){
	r.push(action(3));
}
else{
	r.push(action(1));
}
break;
	default:if(isAlphanum(a)){
	r.push(action(1));
}
else{
	r.push(action(3));
}
}
}
break;
	default:r.push(action(1));
	break;
}
}
}
return r.join('');
}
jsmin.oldSize=input.length;
	ret=m(input);
	jsmin.newSize=ret.length;
	return comment+ret;
}

JS代码(Words.js):

var Words = Collection.extend({
	constructor:function(script){
	this.base();
	forEach (script.match(WORDS),this.add,this);
	this.encode();
}
,add:function(word){
	if (!this.has(word)) this.base(word);
	word = this.get(word);
	word.count++;
	return word;
}
,encode:function(){
	// sort by frequencythis.sort(function(word1,word2){
	return word2.count - word1.count;
}
);
	eval("var a=62,e=" + Packer.ENCODE62);
	var encode = e;
	var encoded = new Collection;
	// a dictionary of base62 -> base10var count = this.size();
	for (var i = 0;
	i < count;
	i++){
	encoded.put(encode(i),i);
}
var empty = function(){
	return ""}
;
	var index = 0;
	forEach (this,function(word){
	if (encoded.has(word)){
	word.index = encoded.get(word);
	word.toString = empty;
}
else{
	while (this.has(encode(index))) index++;
	word.index = index++;
}
word.encoded = encode(word.index);
}
,this);
	// sort by encodingthis.sort(function(word1,word2){
	return word1.index - word2.index;
}
);
}
,toString:function(){
	return this.getValues().join("|");
}
}
,{
	Item:{
	constructor:function(word){
	this.toString = function(){
	return word}
;
}
,count:0,encoded:"",index:-1}
}
);

CSS代码(manhuaDialog.1.0.css):

*{padding:0;margin:0}
#floatBoxBg{display:none;width:100%;height:100%;background:#000;position:fixed;_position:absolute;top:0;left:0;filter:alpha(opacity=0);opacity:0;}
.floatBox{border:#9CC95F 5px solid;position:absolute;top:50px;left:40%;background:#fff;display:none;}
.floatBox .title{height:23px;padding:7px 10px 0;color:#fff;background-attachment:scroll;background:url(../images/dialog_bg.gif) #9CC95F;background-repeat:repeat-x;background-position:0px 0px;}
.floatBox .title h4{float:left;padding:0;margin:0;font-size:14px;line-height:16px;}
.floatBox .title span{float:right;cursor:pointer;}
.floatBox .title span img{cursor:pointer;margin:-5px -5px;}
.floatBox .content{padding:20px 15px;background:#fff;overflow-x:hidden;overflow-y:auto}
#closeDialog{font-size:20px;font-weight:bold;color:#000;margin-top:-5px;}
#closeDialog:hover{font-size:20px;font-weight:bold;color:#fff;margin-top:-5px;}

附件:下载该文件资源,减少时间成本(增值服务)