jcrop 网页截图工具(插件)开发

今天给大家介绍一下一个web 中经常会用到的截图(如:头像等)工具:

Jcrop演示

项目结构:

效果图:

这个很有用:

看到这些,大家也想自己试试吧

===========================================

代码部分:

===========================================

准备工作:

下载:Jcrop-0.9.10 (zip format)

解压后放入到你的项目里面,就如上面的项目结构一样...

/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial1.html

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Jcrop » Tutorials » Hello World</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<script type="text/javascript">

jQuery(function($){

// How easy is this??
$('#target').Jcrop();

});

</script>
</head>

<body>
<div id="outer">
<div class="jcExample">
<div class="article">

<h1>Jcrop - Hello World</h1>
<img src="demo_files/pool.jpg" id="target" alt="Flowers" />

<p>
<b>This example demonstrates the default behavior of Jcrop.</b>
Since no event handlers have been attached it only performs
the cropping behavior.
</p>

<div id="dl_links">
<a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |
<a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>
</div>

</div>
</div>
</div>
</body>
</html>

/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial2.html

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Jcrop » Tutorials » Event Handler</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<script type="text/javascript">
jQuery(function($){
$('#target').Jcrop({
onChange: showCoords,
onSelect: showCoords,
onRelease: clearCoords
});
});
// Simple event handler, called from onChange and onSelect
// event handlers, as per the Jcrop invocation above
function showCoords(c)
{
$('#x1').val(c.x);
$('#y1').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
};
function clearCoords()
{
$('#coords input').val('');
};
</script>
</head>
<body>
<div id="outer">
<div class="jcExample">
<div class="article">
<h1>Jcrop - Event Handlers</h1>
<!-- This is the image we're attaching Jcrop to -->
<img src="demo_files/pool.jpg" id="target" alt="Flowers" />
<!-- This is the form that our event handler fills -->
<form id="coords"
class="coords"
onsubmit="return false;"
action="http://example.com/post.php">
<div>
<label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
<label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
<label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
<label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
<label>W <input type="text" size="4" id="w" name="w" /></label>
<label>H <input type="text" size="4" id="h" name="h" /></label>
</div>
</form>
<p>
<b>An example with a basic event handler.</b> Here we've tied
several form values together with a simple event handler invocation.
The result is that the form values are updated in real-time as
the selection is changed using Jcrop's <em>onChange</em> handler.
</p>
<p>
That's how easily Jcrop can be integrated into a traditional web form!
</p>
<div id="dl_links">
<a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |
<a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>
</div>
</div>
</div>
</div>
</body>
</html>

/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial3.html



复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Jcrop » Tutorials » aspectRatio w/ Preview</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<script type="text/javascript">
jQuery(function($) {
// Create variables (in this scope) to hold the API and image size
var jcrop_api, boundx, boundy;
$('#target').Jcrop({
onChange : updatePreview,
onSelect : updatePreview,
aspectRatio : 1
}, function() {
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});
function updatePreview(c) {
if (parseInt(c.w) > 0) {
var rx = 100 / c.w;
var ry = 100 / c.h;
$('#preview').css({
width : Math.round(rx * boundx) + 'px',
height : Math.round(ry * boundy) + 'px',
marginLeft : '-' + Math.round(rx * c.x) + 'px',
marginTop : '-' + Math.round(ry * c.y) + 'px'
});
}
}

});
</script>
</head>
<body>
<div id="outer">
<div class="jcExample">
<div class="article">
<h1>Jcrop - Aspect ratio w/ preview pane</h1>
<table>
<tr>
<td>
<div style="width: 500px; height: 370px; overflow: hidden;">
<img src="demo_files/pool.jpg" id="target" alt="Flowers" style="width: 500px; height: 370px;"/>
</div>
</td>
<td>
<div style="width: 100px; height: 100px; overflow: hidden;">
<img src="demo_files/pool.jpg" id="preview" alt="Preview" class="jcrop-preview" />
</div>
</td>
</tr>
</table>
<p>
<b>An example implementing a preview pane.</b> Obviously the most visual demo, the preview pane is accomplished entirely outside of Jcrop with a simple jQuery-flavored callback. This type of interface could be useful for creating a thumbnail or avatar. The onChange event handler is used to update the view in the preview pane.
</p>
<div id="dl_links">
<a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> | <a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>
</div>
</div>
</div>
</div>
</body>
</html>

/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial4.html

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Jcrop » Tutorials » Animations / Transitions</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
<script src="../js/jquery.color.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="../css/jquery.Jcrop.extras.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<script type="text/javascript">
jQuery(function($){
var jcrop_api;
$('#target').Jcrop({
bgFade: true,
bgOpacity: .3,
setSelect: [ 60, 70, 540, 330 ]
},function(){
jcrop_api = this;
});
$('#fadetog').change(function(){
jcrop_api.setOptions({
bgFade: this.checked
});
}).attr('checked','checked');
$('#shadetog').change(function(){
if (this.checked) $('#shadetxt').slideDown();
else $('#shadetxt').slideUp();
jcrop_api.setOptions({
shade: this.checked
});
}).attr('checked',false);
// Define page sections
var sections = {
anim_buttons: 'Animate Selection',
bgo_buttons: 'Change bgOpacity',
bgc_buttons: 'Change bgColor'
};
// Define animation buttons
var ac = {
anim1: [217,122,382,284],
anim2: [20,20,580,380],
anim3: [24,24,176,376],
anim4: [347,165,550,355],
anim5: [136,55,472,183]
};
// Define bgOpacity buttons
var bgo = {
Low: .2,
Mid: .5,
High: .8,
Full: 1
};
// Define bgColor buttons
var bgc = {
Red: '#900',
Blue: '#4BB6F0',
Yellow: '#F0B207',
Green: '#46B81C',
White: 'white',
Black: 'black'
};
// Create fieldset targets for buttons
for(i in sections)
insertSection(i,sections[i]);
// Create animation buttons
for(i in ac) {
$('#anim_buttons').append(
$('<button />').append(i).click(animHandler(ac[i])), ' '
);
}
// Create bgOpacity buttons
for(i in bgo) {
$('#bgo_buttons').append(
$('<button />').append(i).click(setoptHandler('bgOpacity',bgo[i])), ' '
);
}
// Create bgColor buttons
for(i in bgc) {
$('#bgc_buttons').append(
$('<button />').append(i).css({
backgroundColor: bgc[i],
color: ((i == 'Black') || (i == 'Red'))?'white':'black'
}).click(setoptHandler('bgColor',bgc[i])), ' '
);
}
// Function to insert named sections into interface
function insertSection(k,v) {
$('#interface').append(
$('<fieldset></fieldset>').attr('id',k).append(
$('<legend></legend>').append(v)
)
);
};
// Handler for option-setting buttons
function setoptHandler(k,v) {
return function() {
var opt = { };
opt[k] = v;
jcrop_api.setOptions(opt);
return false;
};
};
// Handler for animation buttons
function animHandler(v) {
return function() {
jcrop_api.animateTo(v);
return false;
};
};
$('#anim_buttons').append(
$('<button></button>').append('Bye!').click(function(){
jcrop_api.animateTo(
[300,200,300,200],
function(){ this.release(); }
);
return false;
})
);
$('#interface').show();
});
</script>
</head>
<body>
<div id="outer">
<div class="jcExample">
<div class="article">
<h1>Jcrop - Animations/Transitions</h1>
<img src="demo_files/sago.jpg" id="target" alt="Flowers" />
<div id="interface" style="margin: 1em 0;"></div>
<div><label><input type="checkbox" id="fadetog" /> Enable fading (bgFade: true)</label></div>
<div><label><input type="checkbox" id="shadetog" /> Use experimental shader (shade: true)</label></div>
<p id="shadetxt" style="display:none; color:#900;">
<b>Experimental shader active.</b>
Jcrop now includes a shading mode that facilitates building
better transparent Jcrop instances. The experimental shader is less
robust than Jcrop's default shading method and should only be
used if you require this functionality.
</p>
<p>
<b>Animation/Transitions.</b>
Demonstration of animateTo API method and transitions for bgColor
and bgOpacity options. Color fading requires inclusion of John Resig's
jQuery <a href="http://plugins.jquery.com/project/color">Color
Animations</a> plugin. If it is not included, colors will not fade.
</p>
<div id="dl_links">
<a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |
<a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>
</div>
</div>
</div>
</div>
</body>
</html>

/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial5.html

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Jcrop » Tutorials » API Demo</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<style type="text/css">
.optdual { position: relative; }
.optdual .offset { position: absolute; left: 18em; }
.optlist label { width: 16em; display: block; }
#dl_links { margin-top: .5em; }
</style>
<script type="text/javascript">
jQuery(function($){
// The variable jcrop_api will hold a reference to the
// Jcrop API once Jcrop is instantiated.
var jcrop_api;
// In this example, since Jcrop may be attached or detached
// at the whim of the user, I've wrapped the call into a function
initJcrop();
// The function is pretty simple
function initJcrop()//{{{
{
// Hide any interface elements that require Jcrop
// (This is for the local user interface portion.)
$('.requiresjcrop').hide();
// Invoke Jcrop in typical fashion
$('#target').Jcrop({
onRelease: releaseCheck
},function(){
jcrop_api = this;
jcrop_api.animateTo([100,100,400,300]);
// Setup and dipslay the interface for "enabled"
$('#can_click,#can_move,#can_size').attr('checked','checked');
$('#ar_lock,#size_lock,#bg_swap').attr('checked',false);
$('.requiresjcrop').show();
});
};
//}}}
// Use the API to find cropping dimensions
// Then generate a random selection
// This function is used by setSelect and animateTo buttons
// Mainly for demonstration purposes
function getRandom() {
var dim = jcrop_api.getBounds();
return [
Math.round(Math.random() * dim[0]),
Math.round(Math.random() * dim[1]),
Math.round(Math.random() * dim[0]),
Math.round(Math.random() * dim[1])
];
};
// This function is bound to the onRelease handler...
// In certain circumstances (such as if you set minSize
// and aspectRatio together), you can inadvertently lose
// the selection. This callback re-enables creating selections
// in such a case. Although the need to do this is based on a
// buggy behavior, it's recommended that you in some way trap
// the onRelease callback if you use allowSelect: false
function releaseCheck()
{
jcrop_api.setOptions({ allowSelect: true });
$('#can_click').attr('checked',false);
};
// Attach interface buttons
// This may appear to be a lot of code but it's simple stuff
$('#setSelect').click(function(e) {
// Sets a random selection
jcrop_api.setSelect(getRandom());
});
$('#animateTo').click(function(e) {
// Animates to a random selection
jcrop_api.animateTo(getRandom());
});
$('#release').click(function(e) {
// Release method clears the selection
jcrop_api.release();
});
$('#disable').click(function(e) {
// Disable Jcrop instance
jcrop_api.disable();
// Update the interface to reflect disabled state
$('#enable').show();
$('.requiresjcrop').hide();
});
$('#enable').click(function(e) {
// Re-enable Jcrop instance
jcrop_api.enable();
// Update the interface to reflect enabled state
$('#enable').hide();
$('.requiresjcrop').show();
});
$('#rehook').click(function(e) {
// This button is visible when Jcrop has been destroyed
// It performs the re-attachment and updates the UI
$('#rehook,#enable').hide();
initJcrop();
$('#unhook,.requiresjcrop').show();
return false;
});
$('#unhook').click(function(e) {
// Destroy Jcrop widget, restore original state
jcrop_api.destroy();
// Update the interface to reflect un-attached state
$('#unhook,#enable,.requiresjcrop').hide();
$('#rehook').show();
return false;
});
// Hook up the three image-swapping buttons
$('#img1').click(function(e) {
jcrop_api.setImage('demo_files/sago.jpg');
jcrop_api.setOptions({ bgOpacity: .6 });
return false;
});
$('#img2').click(function(e) {
jcrop_api.setImage('demo_files/pool.jpg');
jcrop_api.setOptions({ bgOpacity: .6 });
return false;
});
$('#img3').click(function(e) {
jcrop_api.setImage('demo_files/sago.jpg',function(){
this.setOptions({
bgOpacity: 1,
outerImage: 'demo_files/sagomod.jpg'
});
this.animateTo(getRandom());
});
return false;
});
// The checkboxes simply set options based on it's checked value
// Options are changed by passing a new options object
// Also, to prevent strange behavior, they are initially checked
// This matches the default initial state of Jcrop
$('#can_click').change(function(e) {
jcrop_api.setOptions({ allowSelect: !!this.checked });
jcrop_api.focus();
});
$('#can_move').change(function(e) {
jcrop_api.setOptions({ allowMove: !!this.checked });
jcrop_api.focus();
});
$('#can_size').change(function(e) {
jcrop_api.setOptions({ allowResize: !!this.checked });
jcrop_api.focus();
});
$('#ar_lock').change(function(e) {
jcrop_api.setOptions(this.checked?
{ aspectRatio: 4/3 }: { aspectRatio: 0 });
jcrop_api.focus();
});
$('#size_lock').change(function(e) {
jcrop_api.setOptions(this.checked? {
minSize: [ 80, 80 ],
maxSize: [ 350, 350 ]
}: {
minSize: [ 0, 0 ],
maxSize: [ 0, 0 ]
});
jcrop_api.focus();
});
});
</script>
</head>
<body>
<div id="outer">
<div class="jcExample">
<div class="article">
<h1>Jcrop - API Demo</h1>
<img src="demo_files/sago.jpg" id="target" alt="Jcrop Image" />
<div style="margin: .8em 0 .5em;">
<span class="requiresjcrop">
<button id="setSelect">setSelect</button>
<button id="animateTo">animateTo</button>
<button id="release">Release</button>
<button id="disable">Disable</button>
</span>
<button id="enable" style="display:none;">Re-Enable</button>
<button id="unhook">Destroy!</button>
<button id="rehook" style="display:none;">Attach Jcrop</button>
</div>
<fieldset class="optdual requiresjcrop">
<legend>Option Toggles</legend>
<div class="optlist offset">
<label><input type="checkbox" id="ar_lock" />Aspect ratio</label>
<label><input type="checkbox" id="size_lock" />minSize/maxSize setting</label>
</div>
<div class="optlist">
<label><input type="checkbox" id="can_click" />Allow new selections</label>
<label><input type="checkbox" id="can_move" />Selection can be moved</label>
<label><input type="checkbox" id="can_size" />Resizable selection</label>
</div>
</fieldset>
<fieldset class="requiresjcrop" style="margin: .5em 0;">
<legend>Change Image</legend>
<span>
<button id="img2">Pool</button>
<button id="img1">Sago</button>
<button id="img3">Sago w/ outerImage</button>
</span>
</fieldset>
<div id="dl_links">
<a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |
<a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>
</div>
</div>
</div>
</div>
</body>
</html>

时间: 2012-11-24

js插件Jcrop自定义截取图片功能

当初说这个需求的时候,在网上找了一点资料,但是基本上感觉不符合项目中的需求.参照一些项目,和同事的改造,终于是像点样子了. 截图大致截为3个像素,每个像素使用的地方也不同,考虑图片不会是很多,分别压缩保存下来. 根据截取的像素位置,对应的压缩成相应的图片: 首先需要下载Jcrop.js与uploadify.js 上传图片的插件和截图的插件 Comm_UploadJcrop.js //剪裁头像对象和宽高比例 var jcrop_api, boundx, boundy; //上传图片 //Id:上传

Asp.Net获取网站截图的实例代码

复制代码 代码如下: using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Text;using System.Windows.Forms;namespace WindowsFormsApplication1{    public partial class Form1 : Form    {    

asp.net截屏功能实现截取web页面

本文实例展示了asp.net截屏功能实现截取web页面的方法,代码简洁易懂,分享给大家供大家参考. 具体实现代码如下: using System.Drawing; //打开该页面 System.Diagnostics.Process.Start("IEXPLORE.EXE", "http://localhost:56/Spacxxe.html"); System.Threading.Thread.Sleep(3000); //截屏 //创建并设置画布大小 Syste

jQuery jcrop插件截图使用方法

在后台来进行图片切割.头像截取的原理:在前台使用jcrop获取切面的x轴坐标.y轴坐标.切面高度.切面宽度,然后将这四个值传给后台.在后台要进行放大处理:将切面放大N倍,N=原图/前台展示的头像.即X = X*原图宽/前图宽,Y = Y*原图高/前图高,W = W*原图宽/前图宽,H = H*原图高/前图高.实例:JSP: 复制代码 代码如下: <div id="cutImage" style="display: none;"> <div clas

jQuery Jcrop插件实现图片选取功能

总的来说,原理很简单,大致流程是:在浏览器上加载原图 --> 用矩形框在原图上选取区域并将选取的顶点坐标和矩形尺寸发送至服务器 --> 服务器端用图片切割算法切割原图并输出切割后的图片.下面我们就分别对这几个步骤详细展开讨论分析,并在最后附上小demo供大家参考. 1.在页面上加载原图 这个就不用多说了,就是在页面上显示一张图片,一个img标签搞定,不过为了下一步演示,还是贴一下代码 <img src="girl.jpg" alt="" id=&q

jQuery排序插件tableSorter使用方法

本文实例为大家分享了jQuery排序插件tableSorter的使用方法,供大家参考,具体内容如下 1.先引两个js <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../js/jquery.tablesorter.min.js"

jQuery验证插件validate使用方法详解

1. 写在前面 我们知道,用户在注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改. 记得以前在学习Servlet的时候,实现一个简单的用户注册功能的验证是在后台做的,有些用了正则表达式,有些没用,但是都比较简单.流程是这样的,前台提交表单数据后,servlet获取数据先进行验证,如果不符合要求,将提示信息放到一个List中,然后再把List存到session中,跳转到一个新的页

jQuery擦除插件eraser使用方法详解

eraser插件简介: 1.jQuery.eraser 是一个基于 jQuery 的插件,它的效果类似于橡皮擦,按住鼠标不放,在图片上面来回移动,上面灰色的图片就会被擦出,显示出下面彩色的图片. 2.jQuery.eraser 的原理其实是有灰色.彩色两张图片(都需要自己事前准备),将灰色的图片装载于一个 canvas 中,然后和彩色的图片用 CSS 定位在同一个位置,并设置 z-index 使 canvas 位于彩色图片之上.当按住鼠标并在 canvas 上来回移动时,就出现了类似橡皮擦擦出的

jquery滚动条插件slimScroll使用方法

本文实例为大家总结了滚动条插件slimScroll的使用方法,供大家参考,具体内容如下 simScroll插件项目下载地址:https://github.com/rochal/jQuery-slimScroll TIP: 1.slimScroll在使用的时候要依赖JQ,所以首次使用的时候要引入JQ再引入simScroll插件 2.不支持resize的时候重新调用插件,不过有人已经修改过源码,这是修改过的版本的下载地址:https://github.com/kujian/jQuery-slimSc

jQuery树插件zTree使用方法详解

最近要做一个树结构,就使用了jQuery 的树插件,感觉还不错,做个随笔 页面的基本结构是这样的 这里的样式是使用了metroStyle文件夹里的类bootstrap风格,当然首先需要下载ztree插件,直接百度即可,下载完成后由对应的api和一些例子,这里使用的是复选框模板 jQuery  zTree树的下载链接 页面jsp如下: <html> <head> <meta http-equiv="content-type" content="te

一款Jquery 分页插件的改造方法(服务器端分页)

分页几乎是每个外部程序必不可少的东西,在webform时代很多人都用过AspNetPager这个用户控件吧,用的人之多其实就在于它的优点:传给它几个参数就可以生成像样的分页,其实这个也是绝大多数程序员(包括我)的致命缺点:样式..,我对于咱们来说用尝试用CSS把一个模块调美观好看所花的时间远远超过了实现功能所需的时间- -! 现在越来越多做web的开始采用.NET MVC框架,抛开一切服务器控件,回归正宗的B/S编程,享受灵活控制好处之余,也得花费很多功夫,很多地方都得自己去实现,例如分页这样的

jQuery ui插件的使用方法代码实例

复制代码 代码如下: <script src="Jquery1.7.js" type="text/javascript"></script>     <script src="jquery.validate.js" type="text/javascript"></script>     <script src="messages_cn.js" type

jQuery定义插件的方法

有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直到有一次公司里的技术交流,我才改变了自己对自己的看法. 扩展jquery的时候.最核心的方法是以下两种: $.extend(object) 可以理解为jquery添加一个静态方法 $.fn.extend(object) 可以理解为jquery实例添加一个方法 $.extend(object) 例子: /* $.ex