武汉市预约献血登记表 <br />div ,ul ,li, span, table, h1~h6,{ <br /> margin:0px; padding:0px;<br />}<br />input{ <br /> background-color:#eeeee;<br />}<br />i{ <br /> color:#FF9900;<br />}<br />label{<br /> margin-bottom: 10px;<br />}<br />small{ <br /> font-size:13px; <br /> font-weight:600px;<br />}<br />.xy-navigation{ <br /> background-color:#00ab9f;<br />}<br />.xy-navigation ul{ <br /> list-style:none; <br /> margin-bottom: 0px; <br /> padding-left: 0px;<br />}<br />.xy-navigation ul li{ <br /> height:50px; <br /> line-height:50px;<br />}<br />.xy-navigation ul li img{ <br /> width:10px; <br /> height:20px;<br />}<br />.xy-navigation-txt{<br /> font-size:16px; <br /> font-weight:800; <br /> color:#ffffff; <br /> text-align:center; <br /> padding-left:0px;<br />}<br />.xy-nagation-txt{ <br /> font-size:10px; <br /> color:#999999;<br />}<br />.xy-nagation-txt span{ <br /> padding-left: 0px; <br /> padding-right: 0px; <br /> margin-top: 10px;<br />}<br />.xy-subtxt{<br /> margin-top: 14px; <br /> color:#808080; <br /> font-size:13px; <br /> font-weight:600px;<br />}<br />.su-form-content{<br /> margin-left: 15px; <br /> margin-right: 15px; <br /> margin-top: 20px;<br />}<br />.defaule-radius{ border-radius:10px;}<br /><br />.su-dropdown{<br /> border:1px solid #dfdfdf; <br /> border-radius:10px;<br />}<br />.su-dropdown button{<br /> width:100%; <br /> text-align:left; <br /> color:#999999; <br /> font-size:13px;<br />}<br />.su-radio-all{<br /> border:1px solid #dfdfdf; <br /> border-radius:10px; <br /> background-color:#eeeeee;<br />}<br />.su-radio-all input{ <br /> margin-left:15px;<br />}<br />.su-radio-all div{<br /> padding-top:7.5px; <br /> padding-bottom:7.5px; <br /> padding-left: 10px; <br /> margin-top: 0px; <br /> margin-bottom: 0px;<br />}<br />.radio-women{<br /> padding-top:7.5px; <br /> padding-bottom:7.5px; <br /> padding-left: 10px; <br /> margin-top: 0px; <br /> margin-bottom: 0px;<br /> border-top:1px solid #dfdfdf;<br />}<br />.su-dropdown-date{<br /> width:100%; <br /> text-align:left; <br /> color:#999999; <br /> font-size:13px;<br />}<br />.su-dropdown-date button{ width:100%;border-top:1px solid #dfdfdf; border-radius:10px;}<br />.drop-date{<br /> width:100%; <br /> margin-top: 0px; <br /> padding-top: 0px; <br /> padding-bottom: 0px;<br /> border-bottom:0px;<br />}<br />li{<br /> border-bottom:1px solid #eeeeee;<br />}<br />.dropdown-menu > li > div{<br /> clear:both<br /> color:#333;<br /> font-weight:400;<br /> line-height:1.42857;<br /> padding:3px 20px;<br /> white-space:nowrap; <br />}<br /><br />*::before, *::after {<br /> box-sizing: border-box;<br />}<br />*::before, *::after {<br /> box-sizing: border-box;<br />}<br />.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {<br /> border-top: 0px solid #ddd;<br /> line-height: 1.42857;<br /> padding: 8px;<br /> vertical-align: top;<br />}<br /><br />.btn-footer p button{width:100%; text-align:center; font-weight:600; border-radius:10px;}<br />.btn{ text-align:left;}<br />.dropdown-menu{ width:100%;}<br />.xy-radio{ border:1px solid #dfdfdf; border-radius:10px; background-color:#eeeeee;}/*<br />.xy-radio p{ padding-left:12px; margin-bottom: 0px; padding-top:6px; padding-bottom:6px; padding-right:12px;}*/<br />.form-group .bg-input{ background-color:#eeeeee;}<br />.xy-radio-p1{<br /> border-bottom:1px solid #dfdfdf;<br />}<br /><br />#woman-radio{<br /> margin-right:10px;<br />}<br />#man-radio{<br /> margin-right:10px;<br />}<br />#sub{<br /> margin-right:10px;<br />}<br />#sub-button{ width:100%;}<br />.clearboth{ clear:both;}<br /><br /><br />.xue-div1{ padding:0px 15px 0 15px; height: 35px;}<br />.xue-div1 span{ position:relative; margin-left: 5px; top: -21px;}<br />.xue-div2{padding:0px 15px 0 15px; border-top:1px solid #dfdfdf; height: 35px;}<br />.xue-div2 span{ position:relative; margin-left: 5px; top: -21px;}<br /><br />.sex-div1{ padding:0px 15px 0 15px; height: 35px;}<br />.sex-div1 span{ position:relative; margin-left: 5px; top: -29px;}<br />.sex-div2{padding:0px 15px 0 15px; border-top:1px solid #dfdfdf; height: 35px;}<br />.sex-div2 span{ position:relative; margin-left: 5px; top: -29px;}<br /><br />.su-radio-all input{opacity:0; width:100%; border-bottom:1px solid #ffffff; visibility:hidden;}<br />.su-radio-all label{width:13px; height:13px; background:url(images/bt2.png); background-size:13px 13px; border-radius:100%; position:relative; top:-18px;}<br />.su-radio-all input[type="radio"]:checked + label{background:url(images/bt1.png) no-repeat; background-size:13px 13px;}<br /><br /><br />.xy-radio input{opacity:0; width:100%; border-bottom:1px solid #ffffff; visibility:hidden;}<br />.xy-radio label{width:13px; height:13px; background:url(images/bt2.png); background-size:13px 13px; border-radius:100%; position:relative; top:-10px;}<br />.xy-radio input[type="radio"]:checked + label{background:url(images/bt1.png) no-repeat; background-size:13px 13px;}<br /><br />select{ display:none; outline:none;}<br />a{text-decoration:none;}<br />*{margin:0;padding:0;}<br />ul{ list-style:none;}<br />.select_box{<br /> background-color:#eeeeee;<br /> border-radius:10px;<br /> line-height:2.5;<br /> font-size:14px;<br /> color:#999999;<br /> width:100%;<br /> margin:0px auto;<br />}<br />.select_showbox{<br /> border:1px solid #dfdfdf;<br /> border-radius:10px;<br /> height:35px;<br /> padding-left:10px;<br /> background:url(images/bt3.png) no-repeat 156px 0;<br /> background-size: 13px 10px;<br /> background-position: 97.76% 13px;<br />}<br />.select_option{<br /> border:1px solid #dfdfdf;<br /> border-radius:10px;<br /> border-top: none;<br /> display:none;<br />}<br />.select_option ul{border-radius:10px;}<br />.select_option li{<br /> padding-left:5px;<br /> border-top:1px solid #dfdfdf; <br />}<br />.select_option li.selected{<br /> background-color:#F3F3F3;<br /> color:#999;<br />}<br />.select_option li.hover{ <br /> background:#7b6959;<br /> color:#fff;<br />}<br /> 武汉市预约献血登记表 预约献血可以对您提供更好的服务，免去您排队等待的时间。 如遇人数满员情况，我们会与您联系进行调整。 谢谢您对无偿献血事业的付出！ * 姓名： * 性别： 男 女 * 手机号： * 献血区域： ?口献血点（全血） A型血 B型血 C型血 * 预约日期： 2015年3月29日（周五） 2015年3月30日（周六）下午 2015年3月31日（周日）上午 2015年4月01日（周一）下午（ * 献血类型： 全血 单采成分血 备注： 确认预约 <br />function sex(){<br /> var rs=document.getElementsByName('a');<br /> for(var i=0; i<rs.length;i++){<br /> if(rs[i].check){<br /> alert(rs[i].value==0?"女":"男");<br /> break;<br /> }<br /> }<br />}<br /><br />(function($){<br /> //获取select<br /> var selects=$('select');<br /> for(var i=0; i<selects.length;i++){<br /> createSelect(selects[i],i); <br /> }<br /> function createSelect(select_container, index){<br /> var tag_select=$('<div>');<br /> tag_select.attr('class','select_box');<br /> tag_select.insertBefore(select_container);<br /> <br /> var select_showbox=$('<div>');<br /> //容易出错appendTo<br /> select_showbox.css('cursor','pointer').attr('class','select_showbox').appendTo(tag_select);<br /> //容易出错<br /> var ul_option=$('<ul>')<br /> ul_option.attr('class','select_option');<br /> ul_option.appendTo(tag_select);<br /> createOptions(index,ul_option);<br /> <br /> <br /> tag_select.toggle(function(){<br /> ul_option.show(); <br /> },function(){<br /> ul_option.hide(); <br /> });<br /> <br /> var li_option=ul_option.find('li');<br /> li_option.on('click',function(){<br /> $(this).addClass('selected').siblings().removeClass('selected');<br /> var value=$(this).text();<br /> select_showbox.text(value);<br /> ul_option.hide();<br /> });<br /><br /> li_option.hover(function(){<br /> $(this).addClass('hover').siblings().removeClass('hover'); <br /> },function(){<br /> li_option.removeClass('hover');<br /> });<br /> <br /> }<br /> function createOptions(index,ul_list){<br /> //获取被选中的元素并将其值赋值到显示框中<br /> var options=selects.eq(index).find('option'),<br /> selected_option=options.filter(':selected'),<br /> selected_index=selected_option.index(),<br /> showbox=ul_list.prev();<br /> showbox.text(selected_option.text());<br /> <br /> //为每个option建立个li并赋值<br /> for(var n=0;n<options.length;n++){<br /> var tag_option=$('<li>'),//li相当于option<br /> txt_option=options.eq(n).text();<br /> tag_option.text(txt_option).css('cursor','pointer').appendTo(ul_list);<br /><br /> //为被选中的元素添加class为selected<br /> if(n==selected_index){<br /> tag_option.attr('class','selected');<br /> }<br /> }<br /> }<br /> <br />})(jQuery)<br /><br />
