??xml version="1.0" encoding="utf-8" standalone="yes"?> 效果: 先来看看别的|站是怎么做的: google.com的登? 客户?和服务器端都验证?q且提示信息一L baidu.com 的登? 屏蔽了密码输入框 http://fanfou.com/register : 客户端和后台都验证了,但是提示的信息方式不一?/p> http://login.xiaonei.com/Login.do : 用户用Js后有提示信息 我的实现步骤: 思想: 1,默认(用js)submit按钮式不昄?如果启用?显Csubmit按钮 2,通过<noscript>.......................</noscript> 昄提示信息 代码: ref: http://space.cnblogs.com/question/2593/ http://www.aygfsteel.com/kingkong/archive/2007/05/26/120202.html http://www.plus2net.com/javascript_tutorial/javascript_support.php 兼容: opera 9.6 + chrome 2.0 + FF 3 + IE 6 效果:一边输入一边实现验?/p> 环境:ruby 1.8.6 + rails 2.1.0 + windows 核心代码: html: 览器禁用javascript时显C提CZ?
目的Q用户上传一张图片后Q可以对自己的大囄q行Q选择区域宿略为小图,Ҏ有很多,可以google Q?javascript crop image,javascript thumbnail image
步骤Q?br />
1Q参?
http://www.webmotionuk.co.uk/jquery/image_upload_crop.php
下蝲后,把php服务器端的代码去掉,只要client端的
2Q注意点Q原来的上传后,囄太大或者太,都会以原大小昄Q这样不?br />
Q?Q,修改昄widthQ??height
<img src="<%= @upload_src %>" style="float: left; margin-right: 10px;" id="thumbnail" name="thumbnail" width="400" height="400" alt="Create Thumbnail" />
<div style="float:left; position:relative; overflow:hidden; width:100px; height:100px;">
<img src="<%= @upload_src %>" style="position: relative;" width="75" height="100" alt="Thumbnail Preview" />
</div>
Q?Q,获得选区的widthQheight需要改变,不然宿略囑֒图不对?br />
width: Math.round(scaleX * 400) + 'px', // 400是我上面的i㎎的width
height: Math.round(scaleY * 400) + 'px',
Q?Q,可以改变选区的比列,3Q?Q?1Q? {等
$('#thumbnail').imgAreaSelect({ aspectRatio: '3:4', onSelectChange: preview });
Q?Q,把小图上传到后台Q取得到是x1Qy1QwidthQheight{等Q这样后台就可以Ҏ参数操作囄了,我做的话Q只是取了这四个参数ok?br />
<input type="hidden" name="x1" value="" id="x1" />
<input type="hidden" name="y1" value="" id="y1" />
<input type="hidden" name="x2" value="" id="x2" />
<input type="hidden" name="y2" value="" id="y2" />
<input type="hidden" name="w" value="" id="w" />
<input type="hidden" name="h" value="" id="h" />
另外后台可以参考我q里Qruby代码
http://www.aygfsteel.com/fl1429/archive/2009/06/19/283282.html
昄囄问题可以参考这里:Q图片上传到后台后,需要处理ؓ大图片显C的大小Q这样小囄才能相对应)
http://www.aygfsteel.com/fl1429/archive/2009/06/22/283629.html
refQ?br />
http://odyniec.net/projects/imgareaselect/
]]>
使用ҎdemoQ?br />
function getaddress(){ // set address from DB
var province_db = document.getElementById('province_value').value;
var city_db = document.getElementById('city_value').value;
with(document.userinfo.province) {var loca2 = province_db; }
for(i = 0;i < where.length;i ++) {
if (where[i].loca == loca2) {
loca3 = (where[i].locacity).split("|");
for(j = 1;j < loca3.length;j++)
{ with(document.userinfo.city){ length = loca3.length; options[j].text = loca3[j]; options[j].value = loca3[j];}}
break;
}
}
var length = document.userinfo.province.length;
var length_city = document.userinfo.city.length;
for(i = 0; i < length;i++){
if(document.getElementById('province').options[i].value == province_db){
document.getElementById('province').selectedIndex = i;
}
}
for(i = 0 ; i< length_city;i++){
if(document.getElementById('city').options[i].value == city_db){
document.getElementById('city').selectedIndex = i;
}
}
}
setTimeout("getaddress()", 1000);
</script>
setTimeout(函数Q时? 意ؓ延迟执行的时_只执行一?br />
refQ?br />
http://blog.csdn.net/lne818/archive/2008/03/03/2143753.aspx
]]>
做了Q但是却可以把两个按钮同旉中Q这h然不行的Q最后利用jqueryl解决了Q需要的jquery lib误行到官方下蝲?br />
html代码Q?br />
Js代码Q?br />
<script type="text/javascript">
$(function() { // set gender from DB
var $radios = $('input:radio[name=gender]');
if($radios.is(':checked') === false) {
$radios.filter('[value=1]').attr('checked', true);
}
});
</script>
<% elsif(get_client_info('gender').to_s =='0') %>
<script>
$(function() {
var $radios = $('input:radio[name=gender]');
if($radios.is(':checked') === false) {
$radios.filter('[value=0]').attr('checked', true);
}
});
</script>
<% end %>
refQ?br />
http://stackoverflow.com/questions/871063/how-to-set-radio-option-checked-onload-with-jquery
]]> <noscript>
<div style="color:red">您的览器不支持javascript,部分功能无法使用</div>
</noscript>
<div id="js_support" style="display:none">
<p id="pSubmit"><input type="submit" name="registerform" value="? ?/span>" onclick="return submitform();"/></p>
</div>
<script type="text/javascript">
$("js_support").style.display = "block";
</script>
]]> <noscript>
<div style="color:red">您的览器不支持javascript,部分功能无法使用</div>
</noscript>
当浏览器用JS?提交按钮不可?实现客户端验?
<div id="js_support" style="display:none"> <p id="pSubmit"><input type="submit" name="registerform" value="? ?/span>" onclick="return submitform();"/></p> </div> <script type="text/javascript"> $("js_support").style.display = "block"; </script>
通过javascript的onfocus和onkeyup实现监听表单?
<input type="text" class="textbox" onfocus="checkLogin(this);" onkeyup="checkLogin(this);" style="width:120px;" />
ajax的自动验?其中用到一个bp.js,是已l封装好的xmlhttprequest对象?可以到我下面的项目中下蝲?/p>
function checkLogin(node) { clearError(); if (bp.String.trim(node.value)!="") { var url = "/test/response_validate"; var params = []; params["command"] = "logincheck"; params["login"] = encodeURI(bp.String.trim(node.value)); var v = validatePath("login",params["login"]); if (v==""){ bp.Io.XhrGet({ url: url, mimeType: "text/json", params: params, load: function(type, data, e) { if (data==true){ loginError = document.getElementById("valstatus").innerHTML = 'd名已存在'; document.getElementById("loginValidate").className = "icon_cross"; node.className = "input_error"; loginValid = false; } else { loginError = ""; document.getElementById("loginValidate").className = "icon_ok"; node.className = "textbox"; loginValid = true; } }, error: function(type, data, e) {} }); } else { loginError = document.getElementById("valstatus").innerHTML = v; document.getElementById("loginValidate").className = "icon_cross"; node.className = "input_error"; loginValid = false } } else { loginError = validatePath("login", ""); document.getElementById("loginValidate").className = ""; node.className = "textbox"; } }
后台:
q个是rails的后?通过render :partialq回数据l客L,当然可以是Q何^C?例如javaq_下的可以用servlet的out.println(...)q回
def response_validate if params[:login] name = params[:login] puts name if name == "aaaaaa" @value = true render :partial => 'show_info' else @value = false render :partial => 'show_info' end end end
完整源码下蝲:
http://www.namipan.com/d/0c7456748d0877cb1cb939583f14eadce76dfb2118920100
试通过:
opera 9.6 + IE 6.0 + FF 3 + chrome 2
html:
<span id="valstatus"></span> <td><input name="loginname" type="text" id="ctl00_main_content_txtLogin" class="textbox" onfocus="checkLogin(this);" onkeyup="checkLogin(this);" style="width:120px;" /></td>
javascript:
function createXmlHttpRequest(){ //创徏对象 try{ xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e2){ xmlHttp = false; } } if(!xmlHttp && typeof XMLHttpRequest != "undefined") { xmlHttp = new XMLHttpRequest(); } } function checkLogin(node){ // html中触发的js函数 var loginname = document.getElementById('ctl00_main_content_txtLogin').value; createXmlHttpRequest(); xmlHttp.open("Get","/home/response_validate?login="+loginname+"&ts="+new Date().toString(),true); xmlHttp.send(null); xmlHttp.onreadystatechange = processor; //注意q里processor不能有括? } function processor(){ //回调函数 if(xmlHttp.readyState == 4 || xmlHttp.readyState == 'complete'){ //注意S要大? if (xmlHttp.status == 200){ var responsetext = xmlHttp.responseText; if((responsetext.toString()) == "true"){ loginError = document.getElementById("valstatus").innerHTML = '该登录名已经被?/span>'; }else{ alert("试"); } } } }
服务器端:
def response_validate @login_name = params[:login] @value = true render :partial=>'response_validate' end
partial:
<%= @value %>
ȝ:
1,rails中服务器q回text数据,通过render的方?不想java中是通过 out.println q回?/p>
2,xmlHttp.onreadystatechange = processor;q里的processor后不能有(),不知道ؓ什?不然只能q回?
3,readyState 的s必须大写,不然在opera和ff中会有bug?/p>
4,数据改变为string,js是通过toString()Ҏ,例如 responsetext.toString()
5,Z防止~存问题可以再发送请求的时候加个随机的数据,例如上面?xmlHttp.open("Get","/home/response_validate?login="+loginname+"&ts="+new Date().toString(),true);
ref:
http://www.cnblogs.com/chy710/archive/2007/04/15/713868.html
http://bbs.blueidea.com/thread-2764862-1-1.html
http://topic.csdn.net/u/20081007/08/d48c3061-760f-4831-9187-540b0be5eb31.html
http://www.tctl.com.cn/accp/1472/1473/50006.html
css:
1: <style type="text/css">
2: <!--
3: body{
4: margin:0;
5: padding:0;
6: background-color:#FFFFFF;
7: }
8: .alpha1,.alpha2{
9: width:100%;
10: height:auto;
11: min-height:250px;/* 必需 */
12: _height:250px;/* 必需 */
13: overflow:hidden;
14: background-color:#FF0000;/* 背景?*/
15: }
16: .alpha1{
17: filter:alpha(opacity=20); /* IE 透明?0% */
18: }
19: .alpha2{
20: background-color:#FFFFFF;
21: -moz-opacity:0.8; /* Moz + FF 透明?0%*/
22: opacity: 0.8; /* 支持CSS3的浏览器QFF 1.5也支持)透明?0%*/
23: }
24: .ap2{
25: position:absolute;
26: }
27: -->
28: </style>
html:
1: <!--S Demo-->
2: <div class="alpha1">
3: <div class="ap2">
4: <p>背景为红?#FF0000)Q透明?0%?lt;/p>
5: </div>
6: <!--[if IE]><![if !IE]><![endif]--> <div class="alpha2"></div> <!--[if IE]><![endif]><![endif]-->
7: </div>
css:
<style type="text/css">
<!--
.table_tile{
text-align:left;
height: 20px;
width: 25%;
float: left;
}
.table_tile_{
text-align:right;
background-color:#0000FF;
height: 20px;
background-color:#999966;
width: 25%;
float: left;
}
.table_tile_bottom{
text-align:left;
background-color:#FFF000;
height: 20px;
width: 25%;
float: left;
}
-->
</style>
html:
<div class="table_tr">
<div class="table_tile">top0</div>
<div class="table_tile_">top1</div>
<div class="table_tile">top2</div>
<div class="table_tile">top3</div>
</div>
<div class="table_tr">
<div class="table_tile_bottom">bottom0</div>
<div class="table_tile_bottom">bottom1</div>
<div class="table_tile_bottom">bottom2</div>
<div class="table_tile_bottom">bottom3</div>
</div>
或者来个更单的:
<style>
.float_left{
text-align:left;
height: 20px;
width: 25%;
float: left;
}
</style>
<div class = "float_left">asdasd</div>
<div class = "float_left">asdasd</div>
<div class = "float_left">why</div>
环境 : rails ?/p>
例如:
我点M改后昄成这?
关键实现q程:
1,列表部分,即第一副图,蓝色部分卛_C传?/p>
<% i=0 %> |
2,js函数部分
<script> function show_div(object1,object2,object3,object4,object5) </script> |
q样你就实现了客L利用js传?..............
<select name="s" id="s"> <script type="text/javascript"> |
refQ?/font>
http://www.javascriptkit.com/jsref/select.shtml
js验证为正整数
<script> var re = /^[1-9]d*$/; //验证单个字符 if (!re.test(document.getElementById('group_order').value)){ </script> |
if(value <0 || value!=parseInt(value) ){ |
js发送表?Ҏ一): check_input 是js函数,但是q个Ҏ会把面内所有的表单都发送掉
<% form_tag( {:controller=>"transaction",:action=>"check_cid"},{:name=>"form1",:method=>"post",:multipart=>"true" ,:onsubmit=>”return check_input();”}) do %> |
js发送表?Ҏ?: check_original 是js函数,q个Ҏ会发送指定的form,无论Ҏ一,Ҏ?都别忘了 前面?return
<%= form_tag({:controller=>"program",:action=>"index"},{:name=>"newform",:method=>"post",:multipart=>"true"}) %> |
待箋................
图解:
margin : 相当于组件的 外边~?与外部组件的距离
padding : 相当于组件的 内边~?与内部组件的距离
if (document.all) { |
<script language=”javascript”>
var stock_code = stockcode.innerText;
var stock_code = stockcode.innerHTML;
</script>
<div id="stockcode" style="display:none">
test
</div>
ref:
http://www.dreamincode.net/code/snippet980.htm
技术原?CSS 囄拼合 (CSS sprites) 可有效降低图片文件的 HTTP q接h? 多个囄以一定间距合qؓ一个大囄文g. 面中用这些图片的元素利?background-position q一 CSS 属性来昄拼合囄中的指定位置.
例如facebook,q个|址:http://static.ak.facebook.com/images/sprite/icons.png
l果一张png囄合成了n张小囄,q样是ؓ了提高网늚q行速度,只需要一ơ全部加?,那么q样的css sprites是怎么做出来的?如今该技术已l普及了,下面我就来说一?/p>
案列一:利用在线工具自动生成
1,打开|址:http://www.csssprites.com/
2,上传你需要合成的囄必须为jpg,gif,png格式?例如q里我上传了下面q三张图
l过generate?
3,ok...success.....你可以打开上面的网址看看拼合后的囄和example的网?q入|页后你可以另存为到本地,你就可以看到个究竟了,主要是利用了css的background-position的属?/p>
案列?利用客户端的软g和图片生成css样式
1,在ps里先合成你需要的囄,q里我就不介l了,我们拿http://static.ak.facebook.com/images/sprite/icons.png q张囄来做
2,下蝲bg2css
http://www.cssforest.org/blog/index.php?id=129
3,利用bg2css,建立你需要的?xC的部分?,再移动位|和调整层的大小,不会的话自己摸烦摸烦,囄的太的话可以放?x,4x倍等,下面是我做的时候界?
4,ok...success!....新徏一个html试试!
案列源码下蝲:
http://www.namipan.com/d/203577c02420df43c6beb9a87dd22225d9d39627e0610000
q有一个在U的css sprites制作工具,但是我没有成?http://spritegen.website-performance.org/
ref:
http://www.cssforest.org/blog/index.php?id=129
本以为js中能有和java?equalsIgnoreCase())一样很方便的忽略大写比较?l果没有
最后必L两个字符?span style="color: red">都变为小?或大?/span>比较可以了
if(inputCode.toLowerCase() != code.toLowerCase() ) /* 同时转化为小?可以忽略大写 */
link:
http://www.ijavascript.cn/jiaocheng/javascript-indexof-244.html
一?利用Ucss?但是背景色必L白色才可以显C圆?不然的话..会有圆角处会有一块白?br />
截图:
源码:
二法:利用css加圆角图片制作边框圆?大网站一般这么做)
思想是实C个这L圆角的背?如果有表格的?把表格放到该背景下即?br />
隄在制作圆角图?4个角四个),有一个简单的办法,如下|址可以直接生成:
http://www.neuroticweb.com/recursos/css-rounded-box/index.php?idioma=en
截图:
其实U色背景部分是四个角的图片加一个中间图?如下:
源码:
注意要加背景?才可以实现真正美观的圆角!
语法Q?/span>
margin : auto | length
参数Q?/span>
auto : D讄为相对边的?/span>
length : 由QҎ字和单位标识W组成的长度?/span> | 癑ֈ数。百分数是基于父对象的高度。对于内联对象来_左右外g边距可以是负数倹{请参阅长度单位
说明Q?/span>
索或讄对象四边的外延边距?/span>
如果提供全部四个参数|按上-叻I下-左的序作用于四辏V?/span>
如果只提供一个,用于全部的四边?/span>
如果提供两个Q第一个用于上Q下Q第二个用于左-叟?/span>
如果提供三个Q第一个用于上Q第二个用于左-叻IW三个用于下?/span>
内联对象要用该属性,必须先设定对象的height?/span>width属性,或者设?/span>position属性ؓabsolute?/span>
?/span>IE4+Q?/span>margin属性不可用?/span>td?/span>tr对象?/span>
外g边距始终透明?/span>
对应的脚本特性ؓmargin。请参阅我编写的其他书目?/span>
关于对象的尺怸ҎQ内外补丁等样式表属性的关系Q请参看图例以及height?/span>width属性?/span>
CZQ?/span>
body { margin: 36pt 24pt 36pt; }
body { margin: 11.5%; }
body { margin: 10% 10% 10% 10%; }
参?http://www.host01.com/onlinebook/css/css2/c_margin.html
实例:css实现圆角Ҏ
http://html.chinahtml.com/2006/xhtml-11576838936382.shtml