jQuery实现点击标题输入详细信息,jQuery写注册页
分类:计算机网络

复制代码 代码如下:

   <script type="text/javascript">
            $(function () {
                $("#btnSubmit").click(function () {
                    var txtName = $('#txtName').val();
                    var gender = $('#gender').is(':checked') ? '男' : '女';
                    var isMarry = $('#isMarry').is(':checked') ? '已婚' : '未婚';
                    $('#divTip').css('display', 'block').html(txtName + '<br/>' + gender + '<br/>' + isMarry);
                })
            })
          
        </script>

复制代码 代码如下:

在下面浏览器下测试通过:Firefox, IE7, IE8, Google浏览器。 (IE6还是算了吧),其它浏览器还没试过。
目前刚添加了4个皮肤,添加新皮肤非常方便,您可以参考已添加的皮肤图片和css代码,相信您会很快搞定。

<script type="text/javascript">
$(function () {
$("#btnSubmit").click(function () {
var txtName = $('#txtName').val();
var gender = $('#gender').is(':checked') ? '男' : '女';
var isMarry = $('#isMarry').is(':checked') ? '已婚' : '未婚';
$('#divTip').css('display', 'block').html(txtName + '<br/>' + gender + '<br/>' + isMarry);
})
})
</script>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<title></title>
<style type="text/css">
.divFrame{ width:260px; border:1px solid #666; font-size:10px }
.divTitle{ background-color:#eee; padding:5px}
.divContent{ padding:5px; display:none}
.divTip{ width:244px; border:2px solid red; padding:8px; font-size:9px; margin-top:5px; display:none}
.txtCss{ border:1px solid #ccc}
.divCurrColor{ background-color:Red}
.divBtn{ padding-top:5px}
.divBtn.btnCss{ border:solid 1px #535353; width:60px}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.divTitle').click(function () {
$('.divTitle').addClass('divCurrColor')
.next('.divContent').css('display', 'block')
$('#Button1').click(function () {
var txtvalue = $('#Text1').val();
var radiovalue = $('#Radio1').is(':checked')?"男" : "女";
var checkvalue = $('#Checkbox1').is(':checked')?"已婚" : "未婚";
$('#divTip').css('display','block').html(txtvalue + "<br/>" + radiovalue + "<br/>" + checkvalue);

效果截图:
一、在没有使用LazyForm的情况下,在XP下运行截图如下
图片 1
二、使用LazyForm(皮肤Blue)效果如下
图片 2
三、使用LazyForm(皮肤Black)效果如下
图片 3
四、皮肤Default
图片 4
五、皮肤Gray
图片 5
demo.html代码如下:

复制代码 代码如下:

 <div class="divFrame">
         <div class="divTitle">请输入如下信息</div>
        <div class="divContent">
             姓名:<input id="txtName" type="text" class="txtcss"/><br />
             性别:<input id="gender" name="raGender" type="radio" value="男" />男
                   <input id="Radio1" name="raGender" type="radio" value="女" />女<br />
            婚否:<input id="isMarry"  type="checkbox"  /><br />
            <div class="divBtn"><input id="btnSubmit"  type="button" value="提交" class="btnCss" /></div>
        </div>
    </div>
    <div id="divTip" class="divTip"></div>

})

复制代码 代码如下:

<div class="divFrame">
<div class="divTitle">请输入如下信息</div>
<div class="divContent">
姓名:<input id="txtName" type="text" class="txtcss"/><br />
性别:<input id="gender" name="raGender" type="radio" value="男" />男
<input id="Radio1" name="raGender" type="radio" value="女" />女<br />
婚否:<input id="isMarry" type="checkbox" /><br />
<div class="divBtn"><input id="btnSubmit" type="button" value="提交" class="btnCss" /></div>
</div>
</div>
<div id="divTip" class="divTip"></div>

 

})

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo-lazyform</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/lazyform.js"></script>
<link type="text/css" rel="stylesheet" href="css/blue/lazyform.css" id="lazyFormSkin" />
<style type="text/css">
body
{
font: 12px Simsun, Arial, Helvetica, sans-serif;
line-height: 20px;
}
</style>

您可能感兴趣的文章:

  • 基于jquery+thickbox仿校内登录注册框
  • jquery 弹出层注册页面等(asp.net后台)
  • 基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
  • 使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
  • jQuery实现 注册时选择阅读条款 左右移动
  • jQuery回车实现登录简单实现
  • jQuery实现用户注册的表单验证示例
  • jQuery实现弹出窗口中切换登录与注册表单
  • 基于jquery实现一个滚动的分步注册向导-附源码
  • jquery实现的用户注册表单提示操作效果代码分享
  • jquery实现的弹出层登录和全屏层注册特效代码分享

type=text/javascript $(function () { $(#btnSubmit).click(function () { var txtName = $(#txtName).val(); var gender = $(#gender).is(:checked) ? 男 : 女; var isMarry = $(#is...

})

<script type="text/javascript">
$(function() {
$('#form1').submit(function() {
var skin = $('#ddlSkin option:selected').val();
$('#lazyFormSkin').attr('href', 'css/' + skin + '/lazyform.css');
skin = 'Skin: ' + skin;

</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">请输入您的信息</div>
<div class="divContent">
姓名:<input id="Text1" type="text" class="txtCss" /><br />
性别:<input id="Radio1" name="rdoSex" type="radio" value="男"/>男
<input id="Radio2" name="rdoSex" type="radio" value="女" />女<br />
婚否: <input id="Checkbox1" type="checkbox" />
<div class="divBtn">
<input id="Button1" type="button" value="提交" class="btnCss""/>
</div>
</div>
</div>
<div id="divTip" class="divTip"> </div>
</body>
</html>

var gender = 'Gender: ' +
$('input[name=gender]:checked').val();
var gender2 = 'Gender2: ' +
$('input[name=gender2]:checked').val();

程序运行实现以下效果:

var hobby = 'Hobby: ' +
($('#cbxBaskball').is(':checked') ? $('#cbxBaskball').val() + ' ' : '') +
($('#cbxFootball').is(':checked') ? $('#cbxFootball').val() + ' ' : '') +
($('#cbxSwimming').is(':checked') ? $('#cbxSwimming').val() + ' ' : '');
var hobby2 = "Hobby2: " +
($('#cbxBaskball2').is(':checked') ? $('#cbxBaskball2').val() + ' ' : '') +
($('#cbxFootball2').is(':checked') ? $('#cbxFootball2').val() + ' ' : '') +
($('#cbxSwimming2').is(':checked') ? $('#cbxSwimming2').val() + ' ' : '');

图片 6

var country = 'Country: ' + $('#ddlCountry option:selected').text();
var country2 = 'Country2: ' + $('#ddlCountry2 option:selected').text();

点击标题,输入详细信息,点击确定按钮,完成

$('#result').html(skin + '<br />' + gender + '<br />' + gender2 + '<br />' +
hobby + '<br />' + hobby2 + '<br />' + country + '<br />' + country2);

图片 7

return false;
});
});
</script>
</head>

您可能感兴趣的文章:

  • jQuery中:header选择器用法实例
  • Jquery修改页面标题title其它JS失效的解决方法
  • 让新消息在网页标题闪烁提示的jQuery代码
  • 基于jquery插件制作左右按钮与标题文字图片切换效果
  • Jquery 设置标题的自动翻转
  • jQuery+Ajax实现表格数据不同列标题排序(为表格注入活力)
  • Jquery创建层显示标题和内容且随鼠标移动而移动
  • jQuery 标题的自动翻转实现代码
  • 使表格的标题列可左右拉伸jquery插件封装
  • jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
  • jQuery实现获取h1-h6标题元素值的方法

<body>
<form id="form1" method="post" action="javascript:alert('success!');">
<p>
<label for="Skin">Skin:</label>
<select id="ddlSkin">
<option value="Blue">Blue</option>
<option value="Black">Black</option>
<option value="Default">Default</option>
<option value="Gray" >Gray</option>
</select>
</p>

<p>
<label for="Gender">Gender:</label>
<br />
<input type="radio" id="rdoMale" name="gender" value="Male" checked="checked" />
Male

<br />
<input type="radio" id="rdoFemale" name="gender" value="Female" />
Female
</p>

<p>
<label for="Gender">Gender2:</label>
<input type="radio" id="rdoMale2" name="gender2" value="Male2" />
Male2

<input type="radio" id="rdoFemale2" name="gender2" value="Female2" checked="checked" />
Female2
</p>

<p>
<label for="Hobby">Hobby:</label>
<br />
<input type="checkbox" id="cbxBaskball" value="Baskball" checked="checked" />
Baskball

<br />
<input type="checkbox" id="cbxFootball" value="Football" checked="checked" />
Football

<br />
<input type="checkbox" id="cbxSwimming" value="Swimming" />
Swimming
</p>

<p>
<label for="Hobby">Hobby2:</label>
<input type="checkbox" id="cbxBaskball12" value="Baskball2" checked="checked" />
Baskball12

<input type="checkbox" id="cbxFootball2" value="Football2" />
Football2a

<input type="checkbox" id="cbxSwimming2" value="Swimming2" checked="checked" />
Swimming2
</p>

<p>
<label for="Country">Country:</label>
<br />
<select id="ddlCountry">
<option value="China" selected="selected">China</option>
<option value="United States" >United States</option>
<option value="Canada" >Canada</option>
<option value="Holland">Holland</option>
</select>
</p>

<p>
<label for="Country">Country2:</label>
<select id="ddlCountry2" style="width: 350px;">
<option value="China2">China2</option>
<option value="United States2" selected="selected">United States2</option>
<option value="Canada2" >Canada2</option>
<option value="Holland2">Holland2</option>
</select>
</p>

<p>
<input type="submit" value="submit" />
</p>

<p id="result"></p>
</form>
</body>
</html>

从代码你就可以看到,LazyForm没有动您的Html和Css样式一根汗毛。
想让Select变长,设置个长度就可以了。
把LazyForm.js去掉,就是您的原样。没有任何改变。

LazyForm源码:

复制代码 代码如下:

(function($) {

/*

LazyForm 1.0

Copyright (c) 2009, ZhangPeng Chen, peng1988@gmail.com

*/
$.lazyform = $.lazyform || {};
$.extend($.lazyform, {
_inputs : null,
_selects: null,

init: function() {
_inputs = $('input[type=checkbox], input[type=radio]');
_inputs.each($.lazyform._initInput);

_selects = $('select');
_selects.each($.lazyform._initSelect);

$(document).click(function() {
$('div.select div.open').removeClass().next('ul').hide();
});
},

_initInput: function() {
var $self = $(this);
var self = this;
var radio = $self.is(':radio');

var id = radio ? (self.type + '-' + self.name + '-' + self.id) : (self.type + '-' + self.id);
var className = self.type + (self.checked ? '-checked' : '');
var hover = false;

var $span = $('<span />')
.attr({
'id': id,
'class': className
})
.bind('mouseover mouseout', function() {
hover = !hover;
$span.attr('class', self.type + (self.checked ? '-checked' : '') + (hover ? '-hover' : ''));
})
.bind('click', function() {
if(radio) {
$('input[name=' + self.name + ']').each(function() {
$('#' + self.type + '-' + self.name + '-' + this.id).attr('class', self.type);
})
}

self.click();
$span.attr('class', self.type + (self.checked ? '-checked' : ''));
});

$self.addClass('hidden').before($span);
},

_$openSelect: null,
_initSelect: function() {
var $self = $(this);
var self = this;

var selectWidth = $self.width();
var selectUlWidth = $self.width() - 2;

var $select = $('<div />').attr('id', 'select-' + self.id).width(selectWidth).addClass('select');
var $selectItem = $('<div />').append('<span />');
var $selectItemText = $selectItem.children('span');
var $selectUl = $('<ul />').width(selectUlWidth).hide();
var $selectLi = null;
var $hoverLi = null;

$self.children().each(function() {
var $tempLi = $('<li />').append(this.text);
if(this.selected) {
$tempLi.addClass('hover');
$selectItemText.text(this.text);

$selectLi = $tempLi;
$hoverLi = $tempLi;
}
$selectUl.append($tempLi);

$tempLi
.bind('mouseover', function() {
$hoverLi.removeClass();
$tempLi.addClass('hover');
$hoverLi = $tempLi;
})
.bind('click', function() {
$self.children().each(function() {
if($hoverLi && this.text == $hoverLi.text()) {
$tempLi.addClass('hover');
this.selected = true;

$selectLi = $tempLi;
$hoverLi = $tempLi;
}
});

$selectItem.removeClass();
$selectItemText.text($selectLi.text());
$selectUl.hide();
});
});

$selectItem.click(function(e) {
if($.lazyform._$openSelect && $.lazyform._$openSelect != $select) {
$('#' + $.lazyform._$openSelect.attr('id') + ' > div.open').removeClass().next('ul').hide();
}
$.lazyform._$openSelect = $select;

$selectItem.toggleClass('open');
if($selectItem.attr('class') == 'open') {
if($hoverLi != $selectLi) {
$hoverLi.removeClass();
$selectLi.attr('class', 'hover');
$hoverLi = $selectLi;
}
$selectUl.show();
} else {
$selectUl.hide();
}

e.stopPropagation();
});

$select.append($selectItem);
$select.append($selectUl);

$self.hide().before($select);
}
});

$(document).ready(function() {
$.lazyform.init();
});
})(jQuery);

代码打包下载

您可能感兴趣的文章:

  • mysql自动停止 Plugin FEDERATED is disabled 的完美解决方法
  • jQuery多媒体插件jQuery Media Plugin使用详解
  • Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
  • jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
  • JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
  • MySql报错Table mysql.plugin doesn’t exist的解决方法
  • DIY jquery plugin - tabs标签切换实现代码
  • 制作高质量的JQuery Plugin 插件的方法
  • 一步一步教你写一个jQuery的插件教程(Plugin)
  • Maven的几个常用plugin

本文由美高梅网址发布于计算机网络,转载请注明出处:jQuery实现点击标题输入详细信息,jQuery写注册页

上一篇:使用jQuery同时控制四张图片的伸缩实现代码,图 下一篇:【美高梅网址】使用说明,父子窗口传值示例第
猜你喜欢
热门排行
精彩图文