IT北瓜 » 应用实例

新做的后台管理界面【2010年5月1日整理源代码】

IT北瓜 — Mon, 22 Feb 2010 03:52:00 +0000

说要共享这个界面的代码好长时间了，一直没有兑现，真是惭愧，今天简单整理了一份HTML版的源代码，提供下载：

源代码(2010年5月1日)

关联文章导读：

今天用jQuery UI.Layout Plug-in做的后台管理界面 jQuery UI.Layout Plug-in是jQuery世界中少有的布局插件中做得最好的一个，该插件可以用少量代码实现类似Extjs的界面布局。今天用这个插件做了一个后台界面，自我感觉效果还可以，⊙﹏⊙，leeo我不懂美工，所以就将就着吧，亮个相： ...

用jQuery做的带缩略图和文字信息焦点图片切换

IT北瓜 — Wed, 03 Feb 2010 14:45:00 +0000

虽然网上焦点图片广告的代码很多，有js+css的，也有flash+xml的。但看了好多都不符合Leeo在做的一个网站的需求，（PS：国外的flash+xml基本都不支持中文，⊙﹏⊙b汗），于是Leeo自己动手用jQuery写了一个，打算有时间整理成插件，暂时就只发个图片露露脸吧。。。

暂无关联文章！

jqGrid 3.6.2版中grid.subgrid.js文件95行存在bug

IT北瓜 — Thu, 24 Dec 2009 10:06:00 +0000

jqGrid做得越来越强大了，并且完全结合了jQuery UI的界面，界面也很漂亮！最近正在做的一个项目中使用了这款表格插件！

今天再做subGrid的时候设置subgridtype为function，结果发现subGrid中的数据死活不出来，甚至url请求也并没有执行。在后发现grid.subgrid.js在对subgridtype进行判断的时候存在，具体位置在grid.subgrid.js文件95行，该行代码为：

ts.p.subgridtype = ts.p.subgridtype.toLowerCase();

当subgridtype为function的时候subgridtype不具备toLowerCase()方法，所以代码会终止执行。

解决方法：修改代码如下

第一步：

96行源代码：if($.isFunction(ts.p.subgridtype)) {ts.p.subgridtype(dp);}

改为：if($.isFunction(ts.p.subgridtype)) {ts.p.subgridtype(dp);}else{

第二步：

将95行的代码：ts.p.subgridtype = ts.p.subgridtype.toLowerCase();

放到97行代码：switch(ts.p.subgridtype) {

之前

第三步：

在115与116行之间加一个右大括号｝这样就可以了。

暂无关联文章！

利用jQuery轻松实现简介信息切换

IT北瓜 — Thu, 12 Nov 2009 06:42:00 +0000

刚刚群里的一位群友问我如何显示http://www.sunkang.net/lecturecon.asp（PS：他正在做的网站）上下图区域中

如何实现点击右边的小箭头实现不同医生简介信息的切换，于是花了几分钟帮他写了一下实现（PS：由于他给的html代码没有箭头部分，所以Leeo用来一个按钮来代替，同时这里也不考虑美工问题），具体代码如下：

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=utf-8" />
<title>图片切换title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">script>

2.制作kindeditorTest.html页面，（PS：这里kindeditorTest.html只是作为一个html片段载入到主页面中，所以省去了不必要的html标签）代码如下：

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" rel="stylesheet">
  form {
      margin: 5px;
  }
  .editor {
      margin-top: 5px;
      margin-bottom: 5px;
  }
style>
<form id="kindeditorTest" name="kindeditorTest" method="post" action="">
  <div>
      <label>标题：label><input name="title" value="" />
  div>
  <div>
      <textarea name="test" style="width:650px;height:50px;">textarea>
  div>
  <div class="editor">
     <textarea id="content" name="content" style="width:650px;height:200px;">textarea>
  div>
  <input type="submit" id="submitBtn" name="button" value="提交内容" />
form>

3.javascript代码：

function kindeditorFun(){
	$('#dialogTest').dialog({
		title: 'kindeditor测试窗口',
		bgiframe: true,
		width: 680,
		heighe: 440,
		modal: true,
		autoOpen: false,
		overlay: {
			backgroundColor: '#000',
			opacity: 0.5
		},
		buttons: {
			'关 闭': function(){
				hideDialog();
			},
			'提 交': function(){
				$('#kindeditorTest').submit();
			}
		},
		open: function(){
			$('#dialog-content').html('loading-msg\">加载中...')
								.load('kindeditorTest.html', function(){
									KE.create('content');
									ajaxForm('kindeditorTest');
								});
		}
    });
	$('#dialogTest').dialog('open');
}
function ajaxForm(_formid){
	var options = {
    		url: 'jsonFilm!kindeditorTest.action',
		    dataType: 'json'//,
		    //beforeSubmit: validateAddFilm,
		    //success: showResponseAddFilm
	    };
    $('#' + _formid).submit(function() {
	    $(this).ajaxSubmit(options);
	    return false;
	});
}

4.java代码：

private transient String title;
private transient String test;
private transient String content;

public String kindeditorTest() throws Exception{
	System.out.println("标题: " + title);
	System.out.println("无编辑器textarea: " + test);
	System.out.println("有编辑器textarea: " + content);
	return SUCCESS;
}

public String getTitle() {
	return title;
}

public void setTitle(String title) {
	this.title = title;
}

public String getTest() {
	return test;
}

public void setTest(String test) {
	this.test = test;
}

public String getContent() {
	return content;
}

public void setContent(String content) {
	this.content = content;
}

5.Dialog窗口如下图：

第二步:开始测试

1.点击“提交”按钮，控制台输出结果如下：

2.点击“提交内容”按钮，控制台输出结果如下：

3.比较以上两个结果，发现利用表单中的按钮可以正确提交编辑器中输入的数据，但是通过Dialog组件的按钮事件却得不到编辑器中输入的数据。从以上所有实现代码来看这两个按钮的功能是一样的，但怎么会出现不同的结果呢？很让leeo我无法理解。于是便又到kindeditor网站看相关文档和实例，这回实例5——手动添加Onsubmit事件，引起了我的注意，难道是手动加载和自动加载导致出现以上不同的结果？

第三步：开始测试“手动添加Onsubmit事件”

1.修改相应代码：

1）第一步1.中的KE.init()设置autoOnsubmitMode : false

2）第一步3.中的$(’#’ + _formid).submit添加编辑器赋值方法KE.util.setData(’content’)

2.再次测试结果，发现这回第二步中的2种方式都能正确获得相关数据。问题总算得以解决，这个问题真的困扰了我许久，花了不少时间去调式。在这里记录下来希望对遇到同样问题的coder们有所帮助。。。

关联文章导读：

jQuery学习笔记2——解决与其他js框架冲突 jQuery学习笔记1——引入jQuery框架已经介绍了如果引入jQuery这一优秀js框架，但有时候处于项目的需要，要引入的js框架不止jQuery一个，这就可能造成框架间发生冲突。下面假如还需要引入Prototype框架来说明一下如何解决jQuery与其他框架间的冲突。情况一：在其他框架之后引入jQuery...
jQuery学习笔记7——jQuery 1.3.3 新功能预览 1、增强的toggleClass() 1）toggleClass也可以和addClass一样，用空格分隔多个class名称了 .toggleClass("a b") == .toggleClass("a").toggleClass("b") .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New",...
利用jQuery轻松实现简介信息切换刚刚群里的一位群友问我如何显示http://www.sunkang.net/lecturecon.asp（PS：他正在做的网站）上下图区域中...

Struts2+json+jQuery上传文件在Firefox和IE下返回结果截然不同

IT北瓜 — Fri, 23 Oct 2009 09:04:00 +0000

在Struts2中利用json格式返回数据，struts.xml文件配置如下：

<package name="struts2json" extends="json-default">
	
	<action name="jsonFilm" class="film">
		<result type="json">
			<param name="excludeProperties">.*hibernateLazyInitializer,pageBean,filmparam>
		result>
	action>
package>

而表单利用jquery.form.js插件提供的ajax方式来提交，javascript代码如下：

var options = {
	url: 'jsonFilm!addFilm.action',
	dataType: 'json',
	beforeSubmit: validateAddFilm,
	success: showResponseAddFilm
};
$('#film-form').submit(function() {
	$(this).ajaxSubmit(options);
	return false;
});
function validateAddFilm(formData, jqForm, options){
	//验证代码省略...
}
function showResponseAddFilm(jsonData, status){
	alert(status);//请求结果
}

由于表单中含有文件域file，并且用json格式来返回请求结果，这种情况下虽然文件能正确上传也能正确写入数据库，但是你会发现一个很让人头疼的问题——前台会弹出一个“下载对话框”。

那么我们就改用另一种方式来上传文件和返回数据，这里用到了ajax-file-upload-plugin-0.4.0.jar这个包，这个包是专门为Struts2利用ajax方式上传文件准备的，struts.xml文件配置如下：

<package name="ajaxfileupload" namespace="/" extends="ajaxfileupload-default">
	<action name="addFilm" class="film">
		<result name="success" type="httpheader">
			<param name="status">200param>
		result>
	action>
package>

action类中返回return "success";或者return SUCCESS;

这样前台就不会弹出“下载对话框”了。但却发现一个和奇怪的问题，Firefox下能正确执行options中的success回调函数showResponseAddFilm，但IE下却不能。不过后台的文件上传和数据库操作都是成功的，没有问题。

于是我将options中的success换成了complete，因为complete不管结果如何它都会被执行，而success只有成功时才会被执行。结果发现Firefox下返回的status值为success，而IE下返回的status值却总是error。真是搞不懂怎么回事？所以将情况记录下来，希望哪位能指出问题之所在。

关联文章导读：

Struts2+FlashFileUpload文件上传并生成缩略图和添加水印以前用过SWFUpload，功能确实很强大。javaeye上有人发布了这样一篇文章step-by-step多文件WEB批量上传(swfupload)的完美解决方案有兴趣的朋友可以看一下。Leeo觉得SWFUpload稍微不足的就是界面的定制，总感觉自己定制出来的界面有点难登大雅之堂。下面Leeo为大家介绍一下，如何使用FlashFileUpload这个Flash组件来实现多文件上传，并且通过java程序自动生成缩略图和添加水印，FlashFileUpload定制出来的界面还是挺漂亮的（PS：这个界面是Leeo从UUShare上弄下来的，^_^），先来Show一张效果图： ...
Hibernate3.3.2+Spring2.5.6+Struts2.1.6整合异常解决——不断更新 1、org.springframework.beans.factory.NoSuchBeanDefinitionException: No bean named 'sessionFactory' is defined 异常说明：sessionFactory bean未定义异常原因：applicationContext.xml配置文件中使用其他名字sessionFactory...
jsonplugin包与Struts2包版本匹配问题今天做项目的时候遇到“java.lang.NoSuchMethodError: com.opensymphony.xwork2.ActionContext.get(Ljava/lang/String;)Ljava/lang/Object;”异常，导致该异常的是jsonplugin的jar包与Struts2的jar包不匹配引起的。 jsonplugin-0.33.jar Struts 2 JSON Plugin 0.33 匹配 Struts 2.1.x Compatible jsonplugin-0.32.jar Struts 2 JSON Plugin 0.32 匹配 Struts...

今天用jQuery UI.Layout Plug-in做的后台管理界面

IT北瓜 — Tue, 22 Sep 2009 13:07:00 +0000

jQuery UI.Layout Plug-in是jQuery世界中少有的布局插件中做得最好的一个，该插件可以用少量代码实现类似Extjs的界面布局。今天用这个插件做了一个后台界面，自我感觉效果还可以，⊙﹏⊙，leeo我不懂美工，所以就将就着吧，亮个相：

点这里查看原图

2009年10月28日0:29:13：整理源代码

之前说过有时间会把这个框架的代码整理发布出来，可是由于有些忙，其实也是比较懒，哈哈。。。所以一直没有花时间去整理，今天又有访客问我要源码，也觉得不好意思再拖了，说过的话还是要算数的，于是今晚整理出来给大家，由于要从整个后台框架抽取出来同时还要转化为静态页面的方式进行模拟，所以还是花了不少时间的。。。

点击这里看演示页面

点击这里下载源代码

部分人反应说源代码下载不了，现在提供另一个下载地址：

从RayFile下载源代码

关联文章导读：

新做的后台管理界面【2010年5月1日整理源代码】 ...