存档

‘应用实例’ 分类的存档

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

2010年2月22日 IT北瓜 35 条评论

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

源代码(2010年5月1日)

分类: jQuery, 应用实例 标签: , ,

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

2010年2月3日 IT北瓜 1 条评论

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

分类: jQuery, 应用实例 标签: ,

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

2009年12月24日 IT北瓜 1 条评论

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, jqGrid, 专题, 应用实例 标签:

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

2009年11月12日 IT北瓜 2 条评论

      刚刚群里的一位群友问我如何显示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>
<style>
/* picchange */
.picchange {
    padding: 4px 0;
    padding-left: 10px;
}
.picchange img {
    margin: 9px 0 4px 1px;
    float:left;
}
.piccontent {
    float: left;
    margin: 7px 0 0 0;
    line-height: 18px;
    width: 250px;
    padding-left: 10px;
}
.piccontent strong {
    font-size: 14px;
    color: #3b7dd8;
}
#btn {
    cursor: pointer;
}
.info-hide {
    display: none;
}
.info-show {
    display: block;
}
</style>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
    //获取所有医生介绍信息的div对象
    var $doctorInfo = $('#doctorInfo_container .piccontent');

    //绑定按钮点击事件
    $('#btn').click(function(){
        //获取当前显示项的对象
        var $nowDoctorInfoObj = $doctorInfo.filter('.info-show');
        //获取当前显示项的index
        var _index = $doctorInfo.index($nowDoctorInfoObj);
        //假如_index > 4 则让_index = 0
        _index = _index + 1 > 4 ? 0 : _index + 1;
        //改变等强项的class
        $nowDoctorInfoObj.removeClass("info-show").addClass("info-hide");
        //切换到下一项，如果是最后一项则切换到第一项
        $doctorInfo.eq(_index).removeClass("info-hide").addClass("info-show");
    });
});
</script>
</head>

<body>
    <div class="picchange clearfix" id="doctorInfo_container">
        <img src="images/pic/1.gif" alt="">
        <div class="piccontent info-show" id="picq01"><strong>张曜宇11</strong><br /><b>学历职称：</b>心理学哲学博士、工商管理硕士<br /><b>擅长领域：</b>心理学批判性思维，心理学研究方法，实验心理学<br /><b>讲座课程：</b>情绪的世界</div>
        <img src="images/pic/2.gif" alt="">
        <div class="piccontent info-hide" id="picq02"><strong>张曜宇22</strong><br /><b>学历职称：</b>心理学哲学博士、工商管理硕士<br /><b>擅长领域：</b>心理学批判性思维，心理学研究方法，实验心理学<br /><b>讲座课程：</b>情绪的世界</div>
        <img src="images/pic/2.gif" alt="">
        <div class="piccontent info-hide" id="picq03"><strong>张曜宇33</strong><br /><b>学历职称：</b>心理学哲学博士、工商管理硕士<br /><b>擅长领域：</b>心理学批判性思维，心理学研究方法，实验心理学<br /><b>讲座课程：</b>情绪的世界</div>
        <img src="images/pic/2.gif" alt="">
        <div class="piccontent info-hide" id="picq04"><strong>张曜宇44</strong><br /><b>学历职称：</b>心理学哲学博士、工商管理硕士<br /><b>擅长领域：</b>心理学批判性思维，心理学研究方法，实验心理学<br /><b>讲座课程：</b>情绪的世界</div>
        <img src="images/pic/2.gif" alt="">
        <div class="piccontent info-hide" id="picq05"><strong>张曜宇55</strong><br /><b>学历职称：</b>心理学哲学博士、工商管理硕士<br /><b>擅长领域：</b>心理学批判性思维，心理学研究方法，实验心理学<br /><b>讲座课程：</b>情绪的世界</div>
        <span id="scrollbtn"></span>
        <input type="button" id="btn" value="点击切换"  />
    </div>
</body>
</html>

在线DEMO…

分类: jQuery, 应用实例 标签: , ,

jQuery获取一组checkbox选中项值的问题

2009年10月26日 IT北瓜 没有评论

      （PS声明：该问题是在使用prettyCheckboxes插件前提下发生的，未使用该插件的情况没有做测试）

      美化后的效果如下图：

      通过以下js代码去获取选中项的值，在IE7中可以正确取得选中项的值，但在IE8中却得不到选中项的值，同样在Firefox 3.5.3下也得不到值，但公司同事在Firefox其他较低版本下能正确得到值，IE6下也没有问题，⊙﹏⊙b汗

$('#permissionList-body input[name="checkboxes"][checked]').each(function(i){
	alert($(this).val());
});

 

      但是把技术代码修改为:

$('#permissionList-body input[name="checkboxes"]').each(function(i){
	if(this.checked)alert($(this).val());
});

 

    却一切正常了,真是纳闷、不解啊~~~

分类: jQuery, 应用实例 标签: ,

kindeditor编辑器在jQuery UI Dialog中提交数据的问题

2009年10月24日 IT北瓜 5 条评论

      kindeditor一款我很喜欢的国产轻量级富文本编辑器，但在结合jQuery UI Dialog组件使用时却发现一种奇怪的现象——利用表单中的按钮可以正确提交编辑器中输入的数据，但是通过Dialog组件的按钮事件却得不到编辑器中输入的数据，具体情况阐述如下：

      第一步：配置kindeditor和创建Dialog

      1.主页面中引入kindeditor.js并做初始化工作（PS：这里leeo使用的是jQuery的load()方法来载入放置编辑器的页面kindeditorTest.html的，因此不能直接利用KE.show()方法创建编辑器），代码如下：

<script type="text/javascript" charset="utf-8" src="kindeditor/kindeditor.js"></script>
<script type="text/javascript">
  KE.init({
      id : 'content',
      cssPath : 'kindeditor/customer.css'
  });
</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('<div id=\"loading-msg\"><img src=\"images/ajax-loader.gif\" />加载中...</div>')
								.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们有所帮助。。。

分类: Java, JavaScript, jQuery, 应用实例 标签: , , , ,

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

2009年10月23日 IT北瓜 4 条评论

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

<package name="struts2json" extends="json-default">
	<!-- jsonfilm -->
	<action name="jsonFilm" class="film">
		<result type="json">
			<param name="excludeProperties">.*hibernateLazyInitializer,pageBean,film</param>
		</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">200</param>
		</result>
	</action>
</package>

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

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

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

分类: Java, Json, Struts2, jQuery, 应用实例 标签: , , , , , , , ,

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

2009年9月22日 IT北瓜 61 条评论

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

点这里查看原图

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

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

点击这里看演示页面

点击这里下载源代码

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

从RayFile下载源代码

分类: jQuery, 应用实例 标签: , , , , , ,