html之marquee详解�Q��{载）

soken — Mon, 01 Aug 2011 11:21:00 GMT

该标�{�不是HTML3.2的一部分�Q��ƈ且只支持MSIE3以后内核�Q�所以如果你使用非IE内核��览�?如：Netscape)可能无法看到下面一些很有意思的效果
该标�{�是个容器标�{?br />语法�Q?

以下是一个最��单的例子�Q?/div>

代码如下:

Hello, World

下面�q�两个事件经常用刎ͼ�
onMouseOut="this.start()" �Q�用来设�|�鼠标移��区域时��l�滚�?br />onMouseOver="this.stop()"�Q�用来设�|�鼠标移入该区域时停止滚�?/div>

代码如下:

onMouseOut="this.start()" �Q�用来设�|�鼠标移��区域时��l�滚�?onMouseOver="this.stop()"�Q�用来设�|�鼠标移入该区域时停止滚�?lt;/marquee>

�q�是一个完整的例子�Q?/div>

代码如下:

�q�是一个完整的例子

该标�{�支持的属性多�?1个：

align
讑֮�标签内容的对齐方�?br />absbottom�Q�绝对底部对齐（与g、p�{�字母的最下端寚w��Q?br />absmiddle�Q�绝对中央对�?br />baseline�Q�底�U�对�?br />bottom�Q�底部对齐（默认�Q?br />left�Q�左寚w��
middle�Q�中间对�?br />right�Q�右寚w��
texttop�Q�顶�U�对�?br />top�Q�顶部对�?/div>

代码如下:

align="absbottom"�Q�绝对底部对齐（与g、p�{�字母的最下端寚w��Q��?
align="absmiddle"�Q?�l�对中央寚w��?
align="baseline"�Q?底线寚w��?
align="bottom"�Q?底部寚w��Q�默认）�?
align="left"�Q?左对齐�?
align="middle"�Q?中间寚w��?
align="right"�Q?叛_��齐�?
align="texttop"�Q?��线寚w��?
align="top"�Q?�剙��寚w��?

behavior
讑֮�滚动的方式：
alternate�Q?表示在两端之间来回滚动�?br />scroll�Q?表示�׃��端滚动到另一端，会重复�?br />slide�Q?nbsp; 表示�׃��端滚动到另一端，不会重复�?/div>

代码如下:

alternate�Q�表�C�在两端之间来回滚动�?
scroll�Q�表�C�由一端滚动到另一端，会重复�?lt;/marquee>
slide�Q?nbsp; 表示�׃��端滚动到另一端，不会重复�?lt;/marquee>

bgcolor
讑֮��z�d��字幕的背景颜�Ԍ��背景颜色可用RGB�?6�q�制值的格式或颜色名�U�来讑֮��?/div>

代码如下:

讑֮��z�d��字幕的背景颜�?bgcolor="#006699"
讑֮��z�d��字幕的背景颜�?bgcolor="rgb(10%,50%,100%,)"
讑֮��z�d��字幕的背景颜�?bgcolor="red"

direction
讑֮��z�d��字幕的滚动方�?/div>

代码如下:

讑֮��z�d��字幕的滚动方向direction="down"�Q�向�?lt;/marquee>
讑֮��z�d��字幕的滚动方向direction="left"�Q�向�?lt;/marquee>
讑֮��z�d��字幕的滚动方向direction="right"�Q�向�?lt;/marquee>
讑֮��z�d��字幕的滚动方向direction="up"�Q�向�?lt;/marquee>

height
讑֮��z�d��字幕的高�?/div>

代码如下:
讑֮��z�d��字幕的高度height="500"

width
讑֮��z�d��字幕的宽�?/div>

代码如下:
讑֮��z�d��字幕的宽度width="500"

hspace
讑֮��z�d��字幕里所在的位置距离父容器水�q��框的距离
This controls the horizontal�Q�水�q�I��space around the display box.

代码如下:

hspace="100"

vspace
讑֮��z�d��字幕里所在的位置距离父容器垂直边框的距离
This controls the vertical�Q�垂��_�� space around the display box.

代码如下:
hspace="100"

loop
讑֮�滚动的次敎ͼ�当loop=-1表示一直滚动下去，默认�?1

代码如下:

我会不停地走�?lt;/marquee>

我只��C��ơ哦

scrollamount
讑֮��z�d��字幕的滚动速度�Q�单位pixels

代码如下:

scrollamount="10"
scrollamount="20"
scrollamount="30"

scrolldelay
讑֮��z�d��字幕滚动两次之间的�g�q�时��_��单位millisecond�Q�毫�U�）
值大了会有一步一停顿的效�?/div>

代码如下:

scrolldelay="10"
scrolldelay="100"
scrolldelay="1000"

soken 2011-08-01 19:21 发表评论

jquery validate

soken — Wed, 27 Jul 2011 08:28:00 GMT

做网��表单经常要用到数据校验的功�?/span>.JavaScript校验是一�U�比较常用的手段。最�q�写��面写得比较多，发现了一个比较好用的js校验框架--jQuery.validate。她是一�Ƒ֟��?/span>jquery�?/span>校验工具�Q�基本可以满��x��们大多数的页�?/span>校验需要，且支�?/span>ajax校验。支持各�U�自定义的扩展，包括自定�?/span>校验规则�Q�自定义错误昄��的方式等�?/span>

        通过一�D�|��间的使用�Q�感觉用��h��q�是非常��单的。这里做一下��用方法的��单介�l�，而后会介�l�一个我自己扩展的一�U�错误提�C�方式（感觉默认的信息提�C�的方式比较一般实在不怎么好看�Q��?/span>
        闲话��说�Q�先说下用法�Q?/span>
        先导入必要的两个js文�g

XML/HTML代码

另外�q�有一�D�css�Q�用来突出显�C�出错的表单控�g和错误信息的昄��样式:

CSS代码

input.error { border: 1px dotted red; }

label.error {

color: red;display: none;

}

         label.error �?/span>display: none是�ؓ了让我们可以在页面上��L��位置攄��昄��错误�?/span>label以及上面的内容，�q�在没有�q�行校验时不昄��出来�?/span>
        需要的东西都齐了，我们可以为我们的表单元素��d��校验了。添�?/span>校验的方法�ȝ��说有两种�Q�一�U�写在控件的标签上；另一�U�写�?/span>js脚本中。�ƈ且两�U�方法可混合使用�?/span>
        �W�一�U�写在标�{�中的如下：

XML/HTML代码

class="required number" 表示必须字段且�ؓ数值型�Q?/span>max="10" 表示最大��gؓ10�?/span>
另一�U��?/span>JavaScript脚本的写法如�?/span>:

XML/HTML代码

$('#test_form').validate({

rules:{

t2 : {required:true,number:true}

messages:{t2:{required :"�q�个字段你必��d��~~�Q?/span>",number:"�q�个字段真可以是数字"}}

});

         其中test_form是表�?/span>form�?/span>id�Q?/span>t2是需�?/span>校验的控件的名字�?/span>rules后面�?/span>json描述的是校验规则�Q?/span>messages是自定义的错误信息。顺便说一句，有时候我�?/span>form中控件的name中是�?/span>“.”的，比如�Q?/span>user.name,�q�时候用js脚本定义校验规则�Ӟ��需要加上引��P��”user.name”�?/span>
        �q�两�U�写法各有利弊，直接写在控�g标签上的比较��单直观，相对来说js的写法过于复杂，可灵�z�L��更强。而且有时候我们可能没��Z��在控件的标签上写规则�Q�假如我们用了标�{�ֺ��Q�如struts标签库，有些标签我们写上max=“10”�q�样的东西，标签库将无法解析直接报错。��M��Q�这两种写法jQuery.validate都认识，我们在合适的场景选择合适的方式��可以了�?/span>
        另外�Q�如果你��x��规则写在控�g的标�{�上�Q�仅仅写上规则是不行的，�q�需要在��面加蝲完的时候调用一�?/span>$('#test_form').validate();�?/span>form��d��校验�Q�这样在你点提交按钮的时候就会自�?/span>校验了�?/span>
        说了�q�么多，该上个图了，看看校验的效果：

成功了，校验的效果有了，表单也不会被提交。可能有的同学要说了�Q?/span>“要不要这么难看啊�Q?/span>”。这正是我下面要解决的问题�?/span>
我们来自定义一个错误显�C�的方式�Q�效果如下：

错误控�g�H�出昄��的方式没有改�Q��ؓ了兼�Ҏ��些浏览器有些控�g比如火狐中单选按钮没法标注红框的问题�Q�在每个错误的控件后面放了一个红色的��叉��P��另外当鼠标移动到错误控�g或者小叉号上时昄��错误的信息�?/span>
实现�q�个效果的主�?/span>js代码如下�Q?/span>

JavaScript代码

function showErrors(){

var t = this;

for ( var i = 0; this.errorList[i]; i++ ) {

var error = this.errorList[i];

this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );

var elename = this.idOrName(error.element);

// 错误信息div

var errdiv = $('div[htmlfor='+ elename + ']');

var errimg = $('img[htmlfor='+ elename + ']');

if(errdiv.length == 0){ // 没有div则创�?/span>

// �U?/span>css不用囄��的圆�?/span>div�Q�存在在IE6下显�C��长的问题

// errdiv = $('

// + ''

// + ' '

// + '

');

// 带图片的圆角div在所有浏览器兼容

errdiv = $('

+ ''

+ '

+ ''

+ '');

errdiv.attr({"for": this.idOrName(error.element), generated: true})

.addClass(this.settings.errorClass);

// errdiv.css({left : $.getLeft(error.element) + 'px',top : $.getTop(error.element) + 'px'}); // 昄��在控件的下面

errdiv.appendTo($('body'));

}

if(errimg.length == 0){ // 没有img则创�?/span>

errimg = $('错误" src="img/unchecked.gif">')

errimg.attr({"for": this.idOrName(error.element), generated: true});

errimg.insertAfter(error.element);

}

errimg.show();

errdiv.find(".errmsg").html(error.message || "");

// 鼠标攑ֈ�囄��昄��错误

$(errimg).hover(function(e){

$('div[htmlfor="'+ $(this).attr('htmlfor') + '"]').css({left : (e.pageX+20) + 'px',top : (e.pageY+20) + 'px'}); // 昄��在鼠标位�|�偏�U?/span>20的位�|?/span>

$('div[htmlfor="'+ $(this).attr('htmlfor') + '"]').fadeIn(200);

function(){

$('div[htmlfor="'+ $(this).attr('htmlfor') + '"]').fadeOut(200);

});

// 鼠标攑ֈ�控�g上显�C�错�?/span>

$(error.element).hover(function(e){

$('div[htmlfor="'+ t.idOrName(this) + '"]').css({left : (e.pageX+20) + 'px',top : (e.pageY+20) + 'px'}); // 昄��在鼠标位�|�偏�U?/span>20的位�|?/span>

$('div[htmlfor="'+ t.idOrName(this) + '"]').fadeIn(200);

function(){

$('div[htmlfor="'+ t.idOrName(this) + '"]').fadeOut(200);

});

}

// 校验成功的去掉错误提�C?/span>

for ( var i = 0; this.successList[i]; i++ ) {

$('div[htmlfor="'+ this.idOrName(this.successList[i]) + '"]').remove();

$('img[htmlfor='+ this.idOrName(this.successList[i]) + ']').hide();

}

// 自定义高�?/span>

if (this.settings.unhighlight) {

for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {

this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );

}

$.extend({

getLeft : function(object) {

var go = object;

var oParent, oLeft = go.offsetLeft;

while (go.offsetParent != null) {

oParent = go.offsetParent;

oLeft += oParent.offsetLeft;

go = oParent;

}

return oLeft;

getTop : function(object) {

var go = object;

var goHeight = go.height;

var oParent, oTop = go.offsetTop;

while (go.offsetParent != null) {

oParent = go.offsetParent;

oTop += oParent.offsetTop;

go = oParent;

}

return oTop + 22;// 之所以加22不加控�g高度,��Z��兼容ie6.

}

});

// 本地语言

jQuery.extend(jQuery.validator.messages, {

required: "必选字�D?/span>",

remote: "请修正该字段",

email: "误��入正��格式的电子邮�g",

url: "误��入合法的�|�址",

date: "误��入合法的日期",

dateISO: "误��入合法的日期 (ISO).",

number: "误��入合法的数字",

digits: "只能输入整数",

creditcard: "误��入合法的信用卡号",

equalTo: "请再�ơ输入相同的�?/span>",

accept: "误��入拥有合法后�~�名的字符�?/span>",

maxlength: jQuery.validator.format("误��入一个长度最多是 {0} 的字�W�串"),

minlength: jQuery.validator.format("误��入一个长度最��是 {0} 的字�W�串"),

rangelength: jQuery.validator.format("误��入一个长度介�?/span> {0} �?/span> {1} 之间的字�W�串"),

range: jQuery.validator.format("误��入一个介�?/span> {0} �?/span> {1} 之间的�?/span>"),

max: jQuery.validator.format("误��入一个最大�ؓ {0} 的�?/span>"),

min: jQuery.validator.format("误��入一个最��ؓ {0} 的�?/span>")

});

自定义一个showErrors的方法，然后在�ؓ表单��d��校验�Ӟ��指定使用�q�个�Ҏ��昄��错误信息�?/span>

JavaScript代码

$('#test_form').validate({

rules:{

t2 : {required:true,number:true}

messages:{t2:{required :"�q�个字段你必��d��~~�Q?/span>",number:"�q�个字段真的可以是数�?/span>"}},

showErrors: showErrors //使用自定义的错误昄��Ҏ��

});

�q�样子我们想要的效果��实��C��Q�是不是感觉比原来的样子好多了呢�Q?br /> jQuery.validate是一个非常灵�zȝ��JavaScript校验框架�Q�上面只是介�l�了一下基本的用法和自定义了一个错误显�C�的样式。一般的表单校验基本可以搞定了，不过一些比较特�D�，比如�w�䆾证号�?strong>校验�Q�页面上FCK�~�辑器的校验�Q�还是需要我们自己来扩展的。个人感觉这是个很不错的js校验框架�Q�所以介�l�给大家�Q�希望有所帮助�?/span>

soken 2011-07-27 16:28 发表评论

soken — Fri, 22 Jul 2011 11:40:00 GMT

$("input[name='radio_name'][checked]").val(); //选择被选中Radio的Value�?/span>
$("#text_id").focus(function(){//code...}); //事�g 当对象text_id获取焦点时触�?/span>
$("#text_id").blur(function(){//code...}); //事�g 当对象text_id失去焦点时触�?/span>
$("#text_id").select(); //使文本框的Vlaue值成选中状�?/span>
$("input[name='radio_name'][value='要选中Radio的Value�?").
attr("checked",true); //�Ҏ��Value��D��|�Radio为选中状�?/span>

$("input[name='checkbox_name'][checked]");  //选择被选中CheckBox元素的集�?如果你想得到
                                           Value��g��需要遍历这个集�?/span>
$($("input[name='checkbox_name'][checked]")).
each(function(){arrChk+=this.value + ',';});//遍历被选中CheckBox元素的集�?得到Value�?/span>
$("#checkbox_id").attr("checked");   //获取一个CheckBox的状�?有没有被选中,�q�回true/false)
$("#checkbox_id").attr("checked",true); //讄���一个CheckBox的状态�ؓ选中(checked=true)
$("#checkbox_id").attr("checked",false); //讄���一个CheckBox的状态�ؓ不选中(checked=false)
$("input[name='checkbox_name']").attr
("checked",$("#checkbox_id").attr("checked"));//�Ҏ��3,4,5条，你可以分析分析这句代码的意�?/span>                                               
$("#text_id").val().split(",");  //���Text的Value��g��','分隔 �q�回一个数�l?/span>

soken 2011-07-22 19:40 发表评论

javascript中的scope

soken — Tue, 11 Jan 2011 04:27:00 GMT

只有注册用户��d��后才能阅读该文�?a href='http://www.aygfsteel.com/soken/articles/342760.html'>阅读全文

soken 2011-01-11 12:27 发表评论

亚洲人成电影网站色…,97久久精品人人做人人爽,久久久久久999

html之marquee详解�Q��{载）

jquery validate

javascript中的scope