Content feed Comments Feed

The Official ASATO Site

Hi, welcome to my blog. ASP,asp.net,Health,Javascript,JQUERY

Archive for the ‘JQUERY’ Category

20 amazing lightbox use JQUERY or MooTools

Posted by admin On April - 9 - 2010

20 amazing lightbox use JQUERY or MooTools

As we collected them, hope you like

Smoothbox


Mootools lightbox script

 

Media: Images, Inline HTML, Ajax, iFrame

View Demo    Download

Multibox

 

Mootools lightbox script

 

Media: Images, Inline HTML, AJAX, iFrame, Flash, Video

View Demo   Download

RoeBox

 

Mootools lightbox script

 

支持媒体: Images

View Demo   Download

Litebox

 

Mootools lightbox script

 

Media: Images

View Demo   Download

Milkbox

 

Mootools lightbox script

 

Media: Images, Flash

View Demo   Download

Slimbox

 

Mootools lightbox script

 

Media: Images

View Demo   Download

ImageZoom

 

Mootools lightbox script

 

Media: Images

View Demo   Download

mediaboxAdvanced

 

Mootools lightbox script

 

Media: Images, Inline HTML, AJAX, iFrame, Flash, Video

View Demo   Download

QuickBox

 

Mootools lightbox script

 

Media: Images

View Demo   Download

ReMooz

 

Mootools lightbox script

 

Media: Images, Inline HTML

View Demo   Download

Top 10 jQuery Lightbox Scripts

jQuery Lightbox Plugin

Download Lightbox script


Supported Media: Images

View Demo   Download

Fancybox

Download Lightbox script


Supported Media: Images, Inline HTML, iFrame

View Demo   Download

Shadowbox

Download Lightbox script


Supported Media: Images, Inline HTML, iFrame, AJAX, Flash, Video

View Demo   Download

ThickBox

Download Lightbox script


Supported Media: Images, Inline HTML, iFrame, AJAX

View Demo   Download

Slightly Thickerbox

Download Lightbox script


Supported Media: Images, AJAX, Video

View Demo   Download

Fancy Zoom

Download Lightbox script


Supported Media: Images, Inline HTML, Flash

View Demo   Download

Facebox

Download Lightbox script


Supported Media: Images, Inline HTML, AJAX

View Demo   Download

nyroModal

Download Lightbox script


Supported Media: Images, Inline HTML, iFrame, AJAX, Video

View Demo   Download

Interface Imagebox Demo

Download Lightbox script


Supported Media: Images

View Demo   Download

piroBox

Download Lightbox script


Supported Media: Images

View Demo   Download

Greybox Redux

Download Lightbox script


Supported Media: Images, iFrame

View Demo   Download

prettyPhoto

Download Lightbox script


Supported Media: Images

View Demo   Download

JQUERY

A good jQuery plug-ins “pop-up window” Facebox

Posted by admin On April - 8 - 2010

facebox is a jquery plug-ins. we can show images or divs use it.
it very easy use.

You’ll need a loading image, close label, four corners, and solid border images in addition to the javascript and css files. All are included in the tarball.

DEMO
click here

JQUERY

A Cool jQuery Gallery Plugin

Posted by admin On March - 22 - 2010

We will build a custom gallery that scans a folder of images and outputs a cool image gallery, utilizing asp.net, CSS, jQuery and the lightBox plug-in.

Demo: A Cool jQuery Gallery

Download: down

?View Code CSHARP
1
2
3
4
5

<link rel="stylesheet" type="text/css" href="lightbox/css/jquery.lightbox-0.5.css" /> 
<link rel="stylesheet" type="text/css" href="demo.css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="lightbox/js/jquery.lightbox-0.5.pack.js"></script> 
<script type="text/javascript" src="script.js"></script>

The demo.css is:

?View Code CSHARP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

 .clear{
	clear:both;
}
 
a, a:visited {
	color:#00BBFF;
	text-decoration:none;
	outline:none;
}
 
a:hover{
	text-decoration:underline;
}
 
#container{
	width:890px;
	margin:20px auto;
}
 
 
div.nomargin{
	margin-right:0px;
}
 
.pic{
	float:left;
	margin:0 15px 15px 0;
	border:5px solid white;
	width:200px;
	height:250px;
}
 
.pic a{
	width:200px;
	height:250px;
	text-indent:-99999px;
	display:block;
}
 
h1{
	font-size:28px;
	font-weight:bold;
	font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
}
 
h2{
	font-weight:normal;
	font-size:14px;
 
	color:white;
}

the html is:

?View Code CSHARP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

	<div id="gallery"> 
		<div class="pic " style="background:url(gallery/ladybug.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/ladybug.jpg" title="ladybug" target="_blank">ladybug</a> 
		</div> 
		<div class="pic " style="background:url(gallery/bw.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/bw.jpg" title="bw" target="_blank">bw</a> 
		</div> 
		<div class="pic " style="background:url(gallery/bw-lingere.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/bw-lingere.jpg" title="bw-lingere" target="_blank">bw-lingere</a> 
		</div> 
		<div class="pic nomargin" style="background:url(gallery/red-head.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/red-head.jpg" title="red-head" target="_blank">red-head</a> 
		</div> 
		<div class="pic " style="background:url(gallery/wedding_catwalk.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/wedding_catwalk.jpg" title="wedding_catwalk" target="_blank">wedding_catwalk</a> 
		</div> 
		<div class="pic " style="background:url(gallery/tiger.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/tiger.jpg" title="tiger" target="_blank">tiger</a> 
		</div> 
		<div class="pic " style="background:url(gallery/lonely-anguish.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/lonely-anguish.jpg" title="lonely-anguish" target="_blank">lonely-anguish</a> 
		</div> 
		<div class="pic nomargin" style="background:url(gallery/promotion.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/promotion.jpg" title="promotion" target="_blank">promotion</a> 
		</div> 
		<div class="pic " style="background:url(gallery/pristine-lake.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/pristine-lake.jpg" title="pristine-lake" target="_blank">pristine-lake</a> 
		</div> 
		<div class="pic " style="background:url(gallery/tattoo.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/tattoo.jpg" title="tattoo" target="_blank">tattoo</a> 
		</div> 
		<div class="pic " style="background:url(gallery/white-stallion.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/white-stallion.jpg" title="white-stallion" target="_blank">white-stallion</a> 
		</div> 
		<div class="pic nomargin" style="background:url(gallery/furry-feline.jpg) no-repeat 50% 50%;"> 
		<a href="gallery/furry-feline.jpg" title="furry-feline" target="_blank">furry-feline</a> 
		</div><div class="clear"></div> 
	</div>

the script.js is:

?View Code CSHARP
1
2
3
4
5
6
7
8
9
10
11
12

$(document).ready(function(){
 
	$('.pic a').lightBox({
 
		imageLoading: 'lightbox/images/loading.gif',
		imageBtnClose: 'lightbox/images/close.gif',
		imageBtnPrev: 'lightbox/images/prev.gif',
		imageBtnNext: 'lightbox/images/next.gif'
 
	});
 
});
JQUERY, Javascript

jQuery Datagrid Script

Posted by admin On March - 10 - 2010

At end 3.0 (rc) version of jqGrid is out. This version is a major release, because I have totally rewrite the code for the methods without affecting the behavior of the plugin.
The grid is now compatible with jQuery 1.2.1, but in the example page I use 1.1.4 version of jQuery. The problem is that with 1.2.1 jqGrid has a little slowly behavior. I do not know why?
The example page is totally rewritten. Every example has a separate code for html and javascript. You can view this here.

This version fixes a lot of bugs relating to json data, formating, xml manipulation and add following features.

* The user can now manipulate the number of requested pages. This is done with adding a input box in the pager.
* I have added 4 methods – add, update, delete get row data. With these method we can manipulate the data at client side and of course a possibility to add local array data. See documentation for more information.
* Added is a method to load data only once from the server – loadonce flag in settings. After loading data we do all the manipulation at client side – sorting, scrolling ant etc. Note that in this case pager is disabled.
* Added is a new data type – local (against with xml and json). When this flag is set the grid expect data to be loaded locally via array.
* Now we can multi select rows. This can be done with only one flag multiselect. This feature can be used with server and local array data.
* For first time I introduce a sub grid. This feature can work only with xml data for now. The code and style for sub grid must be optimized and should be used with json too. See example page for more details.
* It is possible now to export the grid data to xml and json format. This is done with two new methods.
* A few new methods are added according to the new features – see documentation page for this.
* New theme of course
jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.

jqGrid uses a jQuery Java Script Library and is written as plugin for that package. For more information on jQuery, please refer to the jQuery web site.
Demo: http://trirand.com/jqgrid/jqgrid.html
Download: http://www.trirand.com/jqgrid/jqGrid-3.4.4.zip
Source: http://www.trirand.com/blog/?p=13

JQUERY

easy ajax by use jquery

Posted by admin On May - 8 - 2009

In this article,we will get date from use ajax with jquery.First we must include jQuery in the head of our page,here is the jquery website.
The code like this:

?View Code CSHARP
1

<script type="text/javascript" src="js/jquery-1.3.2.min.js" ></script>

once we done this,and we can begin to work using AJAX in Jquery.

?View Code CSHARP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$.ajax({
  type: "get",//define the type of request for example: POST/GET.
  dataType:"html",//format the data being received is in. (HTML, XML, JSON, script etc..)
  url: "getInfo.aspx?id="+id, //the URL to make the request to
  cache:false,
  beforeSend: function(XMLHttpRequest){
	//
  },
  success: function(data,textStatus){
	alert(data);
  },
  complete: function(XMLHttpRequest, textStatus){
	//
  },
  error: function(){
	//
  }
});

getInfo.aspx.cs

?View Code CSHARP
1

Response.Write("OK");
JQUERY, asp.net

How to upload a file by using jquery and asp.net

Posted by admin On April - 20 - 2009

maybe the title not right.bu i think you can understand my means.

In the asp.net world,we frequently uploading files via a web page, in this example,we will upload a file without refresh.

index.html:

?View Code CSHARP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<!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>
    <title>无标题页</title>
    <script type="text/javascript" src="../js/jquery-1.3.2.min.js"  charset="GB2312"></script>
    <script type="text/javascript">
    $(function() {
	$("#btnUploadFile").click(function(){
 
	    $.ajax({
        type: "post",
        dataType:"html",
        url: "upload.aspx",
        timeout: 20000,
        data: "userfile="+escape($("#userfile").val()),
        cache:false,
        beforeSend: function(XMLHttpRequest){
            //ShowLoading();
        },
        success: function(data,textStatus){
            $("#dialog").html(data);
            alert("succeed");
        },
        complete: function(XMLHttpRequest, textStatus){
            //HideLoading();
        },
        error: function(){
            //HappenError();
        }
    });
	});
});
</script>
</head>
<body>
<form id="form1" method="post" enctype="multipart/form-data">
<div>
    <input id="userfile" type="file" /><input id="btnUploadFile" type="button" value="upload" /></div><div id="dialog"></div>
</form>
</body>
</html>

upload.aspx

?View Code CSHARP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<%@ Page Language="C#" Debug="true" %>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Net" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e) {
        string requestpath = Request.Form["userfile"].ToString();
        string _path = "../Users/";//
        string extName = "";//
        string fileNamePath = ""; //
        string NewFilePath = "";//
        FileInfo userPostedFile = new FileInfo(Server.UrlDecode(requestpath));
        if (userPostedFile.Length > 0) {
            extName = userPostedFile.Extension;
            if (_path.EndsWith("/") == false)
                _path = _path + "/";
            fileNamePath = HttpContext.Current.Server.MapPath(_path);
            NewFilePath = fileNamePath + DateTime.Now.ToString("yyyyMMddHHmmss") + extName;
            WebClient myWebClient = new WebClient();
            myWebClient.Credentials = CredentialCache.DefaultCredentials;
            FileStream fs = new FileStream(Server.UrlDecode(Context.Request.Form["userfile"]), FileMode.Open, FileAccess.Read);
            BinaryReader r = new BinaryReader(fs);
            byte[] postArray = r.ReadBytes((int)fs.Length);
            Stream postStream = myWebClient.OpenWrite(NewFilePath, "PUT");
            if (postStream.CanWrite) {
                postStream.Write(postArray, 0, postArray.Length);
                Response.Write("ok!");
            }
            else {
                Response.Write("error!");
            }
            postStream.Close();
            postStream.Dispose();
        }
    }
</script>
JQUERY