在IE中支持html5表单属性

兼容所有的浏览器支持表单的html5属性,表现形式与谷歌和火狐一致,目前支持:

    autofocus、placeholder、required、pattern

共享此文件的目的是希望有人能帮忙完善,减少在表单处理方面的工作量,并能不吝啬的共享出来。

如果您对此进行了改进,请发一份到我的邮箱里,谢谢!

@email zhoulinspq2006@126.com

@qq 294692513

使用jquery做的js游戏

     使用jquery开发的打字练习网页小游戏,用到了js面向对象编程的一些基础知识。由于没有做难度控制等等一些功能,所以代码量很少,很容易阅读。

      图:

      图1

 

代码可以到附件里下载。

 

<!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" />
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function(){
		//浏览器宽度、高度
		var cw=document.documentElement.clientWidth;
		var ch=document.documentElement.clientHeight;	
		//字符集
		var letters="A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,S,Y,Z";
		//随机数
		function fRandomBy(under, over){ 
			return parseInt(Math.random()*(over-under+1) + under); 
		} 
		//随机字符
		function randomLetter(){
			var arr=letters.split(",");
			return arr[fRandomBy(0,25)];
		}
		
		var bombArr=new Array();
		
		var bombObj=function(x){
			var letter=randomLetter();
			var div=$("<div></div>")
			.addClass("bomb")
			.css("left",x)
			.html(letter)
			.appendTo($("body"))
			return {
				down:function(){
					div.animate({"top":ch+"px"},3000,function(){
						if(div.css("top")==ch+"px"){
							gameOver();
						}
					});
				},
				fire:function(){
					div.width(100)
					   .height(100)
					   .css("background","url(img/explosion.png) no-repeat")
					   .html("")
					   .stop();
					
					setTimeout(function(){
						div.remove();
					},1000);
					
				},
				getKey:function(){
					return letter;
				}
			}
		}
							   
		var planeObj=function(){
			var div=$("<div></div>")
			.addClass("plane")
			.css({
				top:"0px",
				left:"0px"
			})
			.appendTo($("body"))
			return {
				fly:function(){
					div.animate({"left":cw+"px"},3000,function(){
						$(this).remove();
					});
				},
				dropBomb:function(){
					var x=div.css("left");
					var left=x.replace("px","");
					if(left>0&&cw-left>50){
						var bomb=new bombObj(x); 
						bombArr.push(bomb);
						bomb.down();
					}
				}
			}
		}

		var score=0;
		$(document).keydown(function(event){
			var arr=letters.split(",");
			var str=arr[event.keyCode-65];
			for(var i=0;i<bombArr.length;i++){
				var bomb=bombArr[i];
				if(bomb.getKey()==str){
					bomb.fire();
					bombArr.splice(i,1);
					score++;
					$("#scoreBoard").html(score);
				}
			}
		});
		
		function gameOver(){
			clearInterval(p1);
			clearInterval(p2);
			$(".plane").stop().remove();
			$(".bomb").stop().remove();
			$("#gameBtn").val("重新开始").show();
			$("#scoreBoard").html("0");
		}
		
		var p1,p2;
		$("#gameBtn").click(function(){
			$(this).hide();
			p1=setInterval(function(){
				var plane=new planeObj();
				plane.fly();
				p2=setInterval(function(){
					plane.dropBomb();
				}, fRandomBy(700, 1000));
			},2000);
		});
	});
</script>
<title>无标题文档</title>
<style>
body {
	overflow:hidden;
	width:100%;
	background:url(img/qh06-1280.jpg);
}
#scoreBoard {
	background:url(img/scorebg.png) no-repeat;
	width:100px;
	height:100px;
	position:absolute;
	right:0px;
	bottom:0px;
	font-size:24px;
	font-weight:bold;
	text-align:center;
	line-height:80px;
}
#gameBtn {
	position:absolute;
	top:230px;
	left:550px;
}
.bomb {
	background:url(img/bigbomb.png) no-repeat;
	width:56px;
	height:81px;
	position:absolute;
	top:0px;
	color:#ffffff;
	font-size:20px;
	text-align:center;
	font-weight:bold;
	line-height:110px;
}
.plane {
	background:url(img/bomber01.png) no-repeat;
	width:200px;
	height:50px;
	position:absolute;
}
#gameBtn {
	background:url(img/btnstart.png) no-repeat;
	width:263px;
	height:170px;
	cursor:pointer;
	border:none;
	font-size:32px;
	text-align:center;
	font-weight:bold;
	color:#0f0e0c;
	line-height:30px;
}
</style>
</head>
<body scroll="no">
<input id="gameBtn" type="button" value="游戏开始" />
<div id="scoreBoard">0</div>
</body>
</html>

 

MVC分页JQueryPager

导入的包

    <script type="text/javascript" src="@Url.Content("~/Content/Admin/js/jquery/jquery.pager.js")"></script>
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Admin/Pager.css")" />

 

Index.aspx

@{
    ViewBag.Title = "Index";
}
@using com.fh.Models
@model DemoList
<div id="sourcelist">
  @* @{
       Html.RenderAction("PageSelected", new { cuurentPageIndex = 0 });
    }*@

    @Html.Partial("_TableList",Model)
</div>
<script type="text/javascript">
    $(document).ready(function () {
        PageClick(1); //$(".itemspager").pager({ pagenumber: currentPageNumber, pagecount: totalPageNumber, buttonClickCallback: PageClick });
    });

</script>

_TableList.cshtml(PartialView)

@using com.fh.Models
@model DemoList
<table>
        <thead>
            <tr>
                <td>
                    ID
                </td>
                <td>
                    Name
                </td>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.DataSource)
            {
                <tr>
                    <td>@item.ID
                    </td>
                    <td>@item.Name
                    </td>
                </tr>
            }
        </tbody>
    </table>

    <div class="clear">
</div>
@if (Model.TotalItems > 0)
{
    if (Model.TotalItems <= 5)
    {
    <div class="pagination">
        <div class="results">
            Showing 1 to @Model.TotalItems of @Model.TotalItems (1 Pages)</div>
    </div>
    }
    else
    { 
    <div class="itemspager pagination">
    </div>
    }
}
<div class="clear">
</div>


<script type="text/javascript" language="javascript">
   var currentPageNumber = 1;
    var numPerPage =5;
    var totalItems=@Model.TotalItems;
    var totalPageNumber = Math.ceil(totalItems / numPerPage);
    var url="@Url.Action("PageSelected","Demo")";
var PageClick = function (pageclicknumber) {
     currentPageNumber=pageclicknumber;
       $.ajax({
                    async: false,

                    type: "Post",

                    url:url,

                    data: ({ cuurentPageIndex: currentPageNumber }),//will be more parameters when you needed.

                    dataType: "html",
                    success: function (responseData) {
                        $("#sourcelist").html(responseData); //render table
                          totalitems=@Model.TotalItems;
                          totalPageNumber = Math.ceil(totalItems / numPerPage);
                            $(".itemspager").pager({ pagenumber:pageclicknumber, pagecount:totalPageNumber, buttonClickCallback: PageClick });
                    }
               });         
};

   
</script>

 

ViewModel

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace com.fh.Models
{
    public class DemoList
    {
        public DemoList()
        {
            DataSource = new List<Demo>();
        }
        public List<Demo> DataSource { get; set; }
        public int TotalItems { get; set; }
        public int CurrentPageIndex { get; set; }
    }
    public class Demo
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }
}

 control

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using com.fh.Models;

namespace com.fh.Controllers
{
    public class DemoController : _Base
    {
        public readonly int numberPerPage = 5;
        public ActionResult Index()
        {
            DemoList m = new DemoList();
            //m.DataSource = CreatePageListTestDate();
            //return View(m);
            return View(m);
        }
        public ActionResult PageSelected(int cuurentPageIndex)
        {
            DemoList m = new DemoList();
            m.CurrentPageIndex = cuurentPageIndex;
            m.DataSource = CreatePageListTestDate().Skip((cuurentPageIndex-1) * numberPerPage).Take(numberPerPage).ToList();
            m.TotalItems = CreatePageListTestDate().Count;
            return PartialView("_TableList", m);
        }
        public List<Demo> CreatePageListTestDate()
        {
            List<Demo> r = new List<Demo>();
            for (int i = 1; i < 100; i++)
            {
                r.Add(new Demo
                {
                    ID = i,
                    Name = "test name " + i,
                });
            }
            return r;
        }
    }
}

自定义表单select元素样式

做项目要用到自定义样式的select插件,自己就用jQuery写了一个。

说明如下:

1、插件的样式完全有css控制,可以自定义select插件中任何一个部分的样式。

2、完全模拟select元素的交互习惯,支持select元素的js功能,例如:change事件。如果选中一个条目,此插件就会改变原select的value值,并且自动触发change事件。

3、支持键盘的操作。完全模仿原生的select的键盘习惯,支持上下键翻动,回车键选中当前条目,包括滚动条的自动适应。

 

插件预览

 

 

插件可配置项:

1、css样式位于css中,可自行配置。

2、js配置项:

                    top: 0,
                    left: 0,
                    liActive: “active”,
                    maxItems: 40

top和left是插件距离原select位置,一般不用配置。

liActive是鼠标经过条目时的样式。

maxItems是显示的最大条目,多于此条目时出现滚动条。

 

文件打包提供下载。

 

jquerytab

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>收信人列表</title>
<style>
* {
	margin:0;
	padding:0;
}
body {
	background:#e3e3e3;
	height:100%;
	font:normal normal 12px/24px "Microsoft yahei", Arial;
	padding-bottom:30px;
}
#title{width:300px;margin:3% auto 0;}
h1{font-size:18px;}
h6{ font-size:12px; font-weight:normal; color:#333;margin-bottom:10px; }
h6 a { color:#09c; }
#wrapper {
	width:300px;
	margin:0 auto;
	background:#f8f8f8;
	border:1px solid #a3a3a3;
	padding:20px 20px 50px;
	border-radius:5px;-moz-border-radius:5px;
}
.box{width:210px;margin:10px auto 0;background:#fff;border:1px solid #d3d3d3;}
.tab_menu{list-style:none;width:210px;overflow:hidden;}
.tab_menu li{width:70px;float:left;height:30px;line-height:30px;color:#fff;background:#093;text-align:center;cursor:pointer;}
.tab_menu li.current{color:#333;background:#fff;}
.tab_box{padding:20px;height:120px;}
.tab_box .hide{display:none;}
h3{color:#333;font-size:14px;width:210px;margin:30px auto 0;}
</style>
</head>

<body>
<div id="title">
<h1>jQuery TAB插件演示</h1>
<h6>by:<a href="http://stylechen.com/">Stylechen.com</a></h6>
</div>
<div id="wrapper">
<h3>回调函数</h3>
	<div class="box demo5">
		<ul class="tab_menu">
			<li class="current">新闻</li>
			<li>图片</li>
			<li>军事</li>
		</ul>
		<div class="tab_box">
			<div>新闻</div>
			<div class="hide">图片</div>
			<div class="hide">军事</div>
		</div>
	</div>
</div>
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.tabs.js"></script>
<script>
//<![CDATA[
$(function(){
	$('.demo1').Tabs();
	$('.demo2').Tabs({
		event:'click'
	});
	$('.demo3').Tabs({
		timeout:300
	});
	$('.demo4').Tabs({
		auto:3000
	});
	$('.demo5').Tabs({
		event:'click',
		callback:tabcallback
	});
	function tabcallback(){
		//alert("我是回调函数 :)");
	}
});	
//]]>
</script>
</body>
</html>

 

 

JqueryAjax的url传递时间含空格不能提交解决方案

问题描述:在JS代码中访问地址,浏览器控制台报错。

1、错误访问代码如下:

function getTrackData(param) {
	var mydata = {};
	$.ajax({
		url : url + "/locate/track/" + param.carnumber + "/"+ param.starttime + "/" +param.endtime,
		dataType : 'json',
		type : 'get',
		async : true,
		success : function(data) {
			var item = eval(data);
			if (item)
				mydata = item;
		}
	});
	return mydata;
}

注:starttime,endtime的值格式数据如:”2013-06-07 10:00:00″,url上面含参数js不会对url进行编码。

空格” “被浏览器编译成了%20代替,导致无法访问后台。

2、问题解决方案

function getTrackData(param) {
	var mydata = {};
	var starttime=param.starttime.replace(/ /g,"_");
	var endtime=param.endtime.replace(/ /g,"_");
	$.ajax({
		url : url + "/locate/track/" + param.carnumber + "/"+ starttime + "/" +endtime,
		dataType : 'json',
		type : 'get',
		async : true,
		success : function(data) {
			var item = eval(data);
			if (item)
				mydata = item;
		}
	});
	return mydata;
}

替换空格,以下字符都是可行的,如”_”,”,””&”,”|”,”@”等字符,英文字母例外。

3、mysql数据库查询

SELECT * FROM device_001 WHERE SERVICETIME BETWEEN '2013-06-07@00:00:00' AND '2013-06-07@08:12:30'

编写jquery插件中的闭包demo

demo中的代码,需要jquery库文件支持

//闭包特性,
//1. 避免内部临时变量影响全局空间,
//2. 插件内部继续使用$作为jquery别名

/**
定义一个匿名函数--闭包
**/
;(function($){//$作为匿名函数的参数
	//这里编写插件代码,可以继续使用$作为jquery的别名
	/**
	定义一个局部变量foo,仅函数内部可以访问,外部无法访问
		--利用闭包特性,可以避免内部临时变量影响全局空间,又可以再插件内部继续使用$作为jquery的别名
		--独立,有关联,且无污染
	**/
	var foo;
	
	var bar = function(){
		foo="aa";
		alert(foo);
		/**
			1.匿名函数内部的函数都可以访问foo
			2.匿名函数的外部调用bar()的时候,也可以再bar()内部访问到foo,但是在匿名函数外部直接访问foo是不可以的
		**/
	}
	
	/**
		功能:扩展匿名函数内的私有函数bar()到全局可访问范围
		调用:在匿名函数外通过jQuery.BAR()来访问闭包内定义的函数bar(),且,bar()必然是可以访问foo私有变量的
	**/
	$.BAR=bar;
	
})(jQuery);//将jquery作为实参传递给匿名函数

$(function(){
		$.BAR();
})

/**
以上概念简单介绍了jquery的闭包概念,显然闭包不是几句话能讲清楚的
但对于插件的制作来说,只需要知道所有插件的代码必须放在下面的代码内部就可以了
;(function(){
	//填写jquery插件代码
})(jQuery);
**/

10个帮助你创建超棒jQuery插件的小技巧

日期:2012/02/29  来源:GBin1.com

10个帮助你创建超棒jQuery插件的小技巧

这篇文章我们将分享10个技巧帮助你将一个不错的jQuery插件改造成一
个超棒的jQuery插件,很多开发人员都开发了很多不错的jQuery插件,但是对我们这些插件的使用者来说,很多jQuery插件的使用都不是那么直
接和透明。这里的10个技巧能够帮助你将更好的维和和扩展你的jQuery插件。而且对于插件开发来说,如果你有一个非常好的架构,将会给你的开发带来极
大的益处。所以在正式开发前,进过深思熟虑还是非常有必要的。

1. 插件开发需要做到独立

这是jQuery插件开发中最让个伤脑筋的事之一。因为我们需要首先考虑。你的插件应该在不需要额外的配置情况下正常工作。因此最小的缺省初始化你的jQuery插件就应该正常工作,如下:

$("#gbin1-container").wTooltip();

一个非常好的例子就是拥有向前/向后按钮的jQuery幻灯展示插件。
我曾经看到过了一些插件要求你配置div和属性id和class,然后要求你通过插件来参考。这样的配置应该在插件内处理,提供可开关的选项

2. 提供缺省的设置

很少有插件不提供任何的配置设定。和前面观点类似,我们肯定需要提供用户一些选项,这样可以帮助用户自己配置自己需要的效果并且扩展需求,更重要的在于帮助你推广你的插件

var…

阅读更多

【JS相关插件】自动完成提示插件(jquery.autocomplete)

jquery.autocomplete自动完成插件

$(document).ready(function() {

//在这里datafriends绑定JS的数据源

$(“#txtUser”).autocomplete(datafriends,

{

   max: 12,

   autoFill: false,

   mustMatch: false,

   matchContains: false,

   scrollHeight: 500,

   formatItem: function(data, i, total) {

   return data[0];

   }

   }).result(function(event,item){

     location.href=”http://www.zhiliren.net/”;

  });

  });

配置项介绍:

1. max //autoComplete下拉显示项目的个数.默认为10

2. autoFill //要不要在用户选择时自动将用户当前鼠标所在的值填入到文本框,默认为false

3. mustMatch //如果设置为true,autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框,默认为false

4. matchContains //决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用

5. scrollHeight //自动完成提示的卷轴高度用像素大小表示,默认为180

6. formatItem //对匹配的每一行数据使用此函数格式化,返回值是显示给用户的数据内容。参数data表示服务器返回来的结果的数组,i表示当前行数,total表示搜索到的对应个数(总记录数),如果不指定直接返回服务器的结果值

7. formatResult //此函数是用户选中后返回的数据格式,比如只返回row.name或row.id等,参数与formatItem相同

8. formatMatch //对每一行数据使用此函数格式化需要查询的数据格式,返回值是给内部搜索算法使用的。实例中用户看到的匹配结果是formatItem中设置的格式,参数与formatItem相同

9. result 此事件会在用户选中某一项后触发,参数为 event,data,formatted。event为事件对象,data为选中的数据行,formatted的官方解释的是formatResult函数的返回值,但是实验结果是formatMatch的返回值

匹配中文问题:

如果所下版本的autocomplete控件对中文搜索存在bug的话,请将keydown事件修改为keyup事件。