<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>网站前端,web前端,前端脚本,前端优化&#124;时代前端 &#187; 控件</title>
	<atom:link href="http://www.52shidai.com/tag/%e6%8e%a7%e4%bb%b6/feed" rel="self" type="application/rss+xml" />
	<link>http://www.52shidai.com</link>
	<description>网站前端研究中心</description>
	<lastBuildDate>Thu, 02 Feb 2012 03:36:54 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>非常漂亮的js日期控件</title>
		<link>http://www.52shidai.com/javascript/286.html</link>
		<comments>http://www.52shidai.com/javascript/286.html#comments</comments>
		<pubDate>Tue, 16 Mar 2010 09:59:57 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[控件]]></category>
		<category><![CDATA[插件]]></category>
		<category><![CDATA[漂亮]]></category>

		<guid isPermaLink="false">http://www.52shidai.com/?p=286</guid>
		<description><![CDATA[非常漂亮的js日期插件,鼠标放上去来回拉会像贪吃蛇一样效果哦 &#60;title&#62; - -选择日期 - -&#60;/title&#62;&#60;script&#62; //*************************日历控件*************************** // cody by [STAR].sjz 2003-10-31 // 说明:返回值为 一个字符串 // 格式如下: // 使用方法 : // var dataString = showModalDialog(&#34;calendar.htm&#34;, &#34;dd日mm月yyyy年&#34; ,&#34;dialogWidth:286px;dialogHeight:221px;status:no;help:no;&#34;); var userFormatString; if(window.dialogArguments ==null) { userFormatString = &#34;yyyy-mm--dd&#34;; } else { userFormatString = window.dialogArguments; } with(new Date()){ var Nyear = getYear(); var Nmonth = getMonth() +1; var Ndate [...]]]></description>
			<content:encoded><![CDATA[<p>非常<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e6%bc%82%e4%ba%ae" title="查看 漂亮 中的全部文章" target="_blank">漂亮</a></span>的js日期<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e6%8f%92%e4%bb%b6" title="查看 插件 中的全部文章" target="_blank">插件</a></span>,鼠标放上去来回拉会像贪吃蛇一样效果哦</p>
<div class="runcode">
<p><textarea name="runcode" style="height:300px;width:620px;font-size:12px" class="runcode_text" id="runcode_r7yxEC">
&lt;title&gt; - -选择日期 - -&lt;/title&gt;&lt;script&gt;
//*************************日历控件***************************
// cody by [STAR].sjz  2003-10-31
// 说明:返回值为 一个字符串
// 格式如下:
// 使用方法  :
//  var dataString = showModalDialog(&quot;calendar.htm&quot;, &quot;dd日mm月yyyy年&quot; ,&quot;dialogWidth:286px;dialogHeight:221px;status:no;help:no;&quot;);
var userFormatString;
if(window.dialogArguments ==null)
{
 userFormatString = &quot;yyyy-mm--dd&quot;;
}
else
{
 userFormatString = window.dialogArguments;
}
with(new Date()){
 var Nyear = getYear();
 var Nmonth =  getMonth() +1;
 var Ndate =  getDate();
}
window.returnValue = new dataObj(Nyear,Nmonth,Ndate ).getDateString(userFormatString);
window.document.onclick = function(){
 var obj = window.event.srcElement;
 if(obj.tagName.toLowerCase() == &quot;span&quot;   &amp;&amp;   obj.parentNode.className.replace(/Ctable/ig,&quot;star&quot;) == &quot;star&quot; )
 {
  try{
   window.currentActiveItem.runtimeStyle.cssText = &quot;&quot;;
  }
  catch(e){ }
  Nyear = obj.id.split(&quot;-&quot;)[0];
  Nmonth = obj.id.split(&quot;-&quot;)[1];
  Ndate = obj.id.split(&quot;-&quot;)[2];
  window.currentActiveItem = obj;
  window.currentSelectDate = window.currentActiveItem.id;
  window.currentActiveItem.runtimeStyle.cssText = &quot;background:url(http://www.5d.cn/bbs/uploadFiles/2003-10/3120401281018.gif) no-repeat 12px 6px;color:#000;padding-top:1px;font-weight:bold&quot;;
 }
}
 function dataObj(year,month,date)
{
 this.year  = year
 this.month = month
 this.date  =  date
 this.getDateString =
  function(formatString)
  {
   return formatString.replace(/yyyy/ig , this.year).replace(/mm/ig , this.month).replace(/dd/ig , this.date)
  }
}
window.onload = function(){
 window.document.attachEvent(&quot;onclick&quot; , doCmd);
 window.document.attachEvent(&quot;onmouseover&quot; , buttonOver);
 window.document.attachEvent(&quot;onmouseout&quot; , buttonOut);
 window.document.attachEvent(&quot;onmousedown&quot; , buttonDown);
 window.document.attachEvent(&quot;onmouseup&quot; , buttonUp);
 window.document.attachEvent(&quot;ondblclick&quot; ,
   function()
   {
     var obj = window.event.srcElement;
     if(obj.tagName.toLowerCase() == &quot;span&quot;   &amp;&amp;   obj.parentNode.className.replace(/Ctable/ig,&quot;star&quot;) == &quot;star&quot; )
     {
      var mydate = new dataObj(obj.id.split(&quot;-&quot;)[0] ,  obj.id.split(&quot;-&quot;)[1] ,  obj.id.split(&quot;-&quot;)[2] );
      window.returnValue = mydate.getDateString(userFormatString)
      window.close();
     }
   }
 );
 document.all.titleYear.innerHTML=TranYearMonthTitle(Nyear,Nmonth);
 document.all.weekNameBox.insertAdjacentHTML(&quot;afterBegin&quot;,makeWeekNameHtmlStr());
 document.all.calendarBox.innerHTML=makeCalendarHtmlStr(Nyear,Nmonth);
 window.currentSelectDate = starCaTran(Nyear,Nmonth,Ndate);
 window.document.all.calendarBox.show = show;
 window.currentActiveItem = window.document.getElementById(currentSelectDate);
 if( window.currentActiveItem )
  window.currentActiveItem.click();
 window.document.all.calendarBox.show();
}
function starCalendar(year,month){
 this.year = year;
 this.month = month;
 this.monthTable = function(){
    var aMonth=new Array();
    for(i=1;i&lt;7;i++)aMonth[i]=new Array(i);
    var dCalDate=new Date(this.year, this.month-1, 1);
    var iDayOfFirst=dCalDate.getDay();
    var iDaysInMonth=new Date(this.year, this.month, 0).getDate();
    var iOffsetLast=new Date(this.year, this.month-1, 0).getDate()-iDayOfFirst+1;
    var iDate = 1;
    var iNext = 1;
    for (d = 0; d &lt; 7; d++)
    aMonth[1][d] = (d&lt;iDayOfFirst)?(-iDayOfFirst+d+1):iDate++;
    for (w = 2; w &lt; 7; w++)
   for (d = 0; d &lt; 7; d++)
    aMonth[w][d] = iDate++;
    return aMonth;
 }
}
function makeWeekNameHtmlStr(){
 var tmpStr=&quot;&quot;;
 var weekName = [&quot;日&quot;,&quot;一&quot;,&quot;二&quot;,&quot;三&quot;,&quot;四&quot;,&quot;五&quot;,&quot;六&quot;];
 for(var i=0;i&lt;7;i++)tmpStr+=&quot;&lt;span class=weekName&gt;&quot;+weekName[i]+&quot;&lt;/span&gt;&quot;;
 return tmpStr;
}
function makeCalendarHtmlStr(year,month){
 window.theCalendar = new starCalendar(year,month);
 var theCaArr = theCalendar.monthTable();
 var theDaysInMonth = new Date(year, month, 0).getDate();
 var theCaHtml = &quot;&lt;div class=Ctable&gt;&quot;;
 for(var i=1;i&lt;7;i++)
  for(var j=0;j&lt;7;j++)
   theCaHtml = theCaHtml+&quot;&lt;span class=&quot;+( (theCaArr[i][j]&lt;1 || theCaArr[i][j]&gt;theDaysInMonth)?&quot;OtherMonthDate&quot;:&quot;Cdate&quot;)+&quot; id=&quot;+starCaTran(year,month,theCaArr[i][j])+&quot;&gt;&quot;+starCaTran(year,month,theCaArr[i][j]).split(&quot;-&quot;)[2]+&quot;&lt;/span&gt;&quot;;
 return theCaHtml+&quot;&lt;/div&gt;&quot;;
}
function starCaTran(year,month,date){
 with(new Date(year,month-1,date))
  return getYear() + &quot;-&quot; +(getMonth()+1) + &quot;-&quot; + getDate();
}
function TranYearMonthTitle(year,month){
 with(new Date(year,month-1,1))
  return &quot;&lt;span style='text-decoration:underline;cursor:hand;font-weight:bold;padding:1 2 0 1;width:40px;' onclick=showMore(1940,2050,this.innerHTML) onmouseover=\&quot;this.runtimeStyle.cssText='color:#fff;'\&quot; onmouseout=\&quot;this.runtimeStyle.cssText=''\&quot; onpropertychange=showC()&gt;&quot; + getYear() + &quot;&lt;/span&gt;&quot; + &quot;年&quot; + &quot;&lt;span style='text-decoration:underline;cursor:hand;font-weight:bold;padding:1 2 0 1;width:20px;' onclick=showMore(1,12,this.innerHTML) onmouseover=\&quot;this.runtimeStyle.cssText='color:#fff;'\&quot; onmouseout=\&quot;this.runtimeStyle.cssText=''\&quot; onpropertychange=showC()&gt;&quot; + (getMonth()+1) + &quot;&lt;/span&gt;&quot; + &quot;月&quot; ;
}
function showC(){
   if(event.propertyName != &quot;innerHTML&quot;)return;
   window.theCalendar.year = new Number(document.all.titleYear.getElementsByTagName(&quot;span&quot;)[0].innerHTML);
   window.theCalendar.month =  new Number(document.all.titleYear.getElementsByTagName(&quot;span&quot;)[1].innerHTML);
   window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year,window.theCalendar.month);
   window.document.all.calendarBox.show = show;window.document.all.calendarBox.show();
}
function showMore(starNum,endNum,selectedValue){
 var obj = window.event.srcElement;
 var selectedIndex = selectedValue - starNum;
 if(obj.selectBox){
  obj.selectBox.selectedIndex = selectedIndex;
  return obj.selectBox.show(document.all.calendarBox.offsetHeight + document.all.weekNameBox.offsetHeight );
 }
 var selectBox = window.document.createElement(&quot;div&quot;);
 selectBox.className = &quot;selectBox&quot;;
 selectBox.style.height = 0;
 selectBox.style.top = window.event.clientY - window.event.offsetY + window.event.srcElement.offsetHeight;
 selectBox.style.left = window.event.clientX - window.event.offsetX ;
 selectBox.show  = showBox;
 selectBox.selectedIndex = selectedIndex;
 selectBox.onclick = function(){
  var selectedObj = window.event.srcElement;
  if( &quot;nobr&quot; == selectedObj.tagName.toLowerCase()  &amp;&amp;  selectBox.contains(selectedObj))
  {
   if(obj.innerHTML != selectedObj.innerHTML)obj.innerHTML = selectedObj.innerHTML;
  }
 }
 selectBox.onlosecapture = alert
 var iString = &quot;&quot;;
 for(var i=starNum;i&lt;=endNum;i++){
  iString += &quot;&lt;nobr  onmouseover=\&quot;this.parentNode.getElementsByTagName('nobr')[this.parentNode.selectedIndex].style.cssText='';this.style.cssText='background-color:#00006C;color:#fff;'\&quot;  onmouseout=this.style.cssText=''&gt;&quot;+i+&quot;&lt;/nobr&gt;&lt;br&gt;&quot;
 }
 selectBox.insertAdjacentHTML (&quot;afterBegin&quot;,iString);
 window.document.body.appendChild(selectBox);
 obj.selectBox = selectBox;
 obj.selectBox.show(document.all.calendarBox.offsetHeight + document.all.weekNameBox.offsetHeight );
}
function showBox(iHeight)
{
 var box = this;
 box.style.height =1;
 box.style.display = &quot;block&quot;;
 window.clearInterval(box.timeHandle);
 box.timeHandle = window.setInterval(interValHandle,1);
 var s = 0,t =1 ;
 function interValHandle()
 {
  box.scrollTop=1000000;
  s = s + t*t;
  t += 0.5;
  box.style.height = parseInt(box.style.height) + Math.floor(s);
  box.style.width = 65 / iHeight * box.offsetHeight;
  if( box.offsetHeight &gt; iHeight )
  {
    window.clearInterval(box.timeHandle);
    box.style.height = iHeight;
    box.scrollTop = box.childNodes[0].offsetHeight*box.selectedIndex;
    box.getElementsByTagName(&quot;nobr&quot;)[box.selectedIndex].style.cssText='background-color:#00006C;color:#fff;';
    window.document.attachEvent(&quot;onclick&quot;,
       box.hide=function()
       {
        box.style.display = &quot;none&quot;;
        window.document.detachEvent(&quot;onclick&quot;,box.hide)
       }
    );
  }
 }
}
&lt;/script&gt;
&lt;script&gt;
function buttonOver(){
 var obj = window.event.srcElement;
 if(obj.tagName.toLowerCase() == &quot;span&quot;   &amp;&amp;   obj.className.replace(/controlButton/ig,&quot;star&quot;) == &quot;star&quot; )
 {
  obj.runtimeStyle.cssText=&quot;border-color:#fff #606060 #808080 #fff;padding:3 0 0 0 &quot;;
 }
 if(obj.tagName.toLowerCase() == &quot;span&quot;   &amp;&amp;   obj.parentNode.className.replace(/Ctable/ig,&quot;star&quot;) == &quot;star&quot; )
 {
  obj.style.backgroundColor = &quot;#fff&quot;;
 }
}
function buttonOut(){
 var obj = window.event.srcElement;
 if(obj.tagName.toLowerCase() == &quot;span&quot;   &amp;&amp;   obj.className.replace(/controlButton/ig,&quot;star&quot;) == &quot;star&quot; )
 {
  obj.runtimeStyle.cssText = &quot;&quot;;
 }
 if(obj.tagName.toLowerCase() == &quot;span&quot;   &amp;&amp;   obj.parentNode.className.replace(/Ctable/ig,&quot;star&quot;) == &quot;star&quot; )
 {
  window.setTimeout(function(){obj.style.backgroundColor = &quot;&quot;; },300);
 }
}
function buttonDown(){
 var obj = window.event.srcElement;
 if(obj.tagName.toLowerCase() == &quot;span&quot;   &amp;&amp;   obj.className.replace(/controlButton/ig,&quot;star&quot;) == &quot;star&quot; )
 {
  obj.setCapture();
  obj.runtimeStyle.borderColor=&quot;#808080 #fefefe #fefefe #808080&quot;;
 }
}
function buttonUp(){
 var obj = window.event.srcElement;
 if(obj.tagName.toLowerCase() == &quot;span&quot;   &amp;&amp;  obj.className.replace(/controlButton/ig,&quot;star&quot;) == &quot;star&quot; )
 {
  obj.releaseCapture();
  obj.runtimeStyle.cssText =&quot;&quot;;
 }
}
function doCmd(){
 var obj = window.event.srcElement;
 if(obj.tagName.toLowerCase() == &quot;span&quot;   &amp;&amp;  obj.className.replace(/controlButton/ig,&quot;star&quot;) == &quot;star&quot; )
 {
   switch(obj.getAttribute(&quot;cmd&quot;))
   {
    case &quot;py&quot;:
     window.document.all.titleYear.innerHTML=window.TranYearMonthTitle(window.theCalendar.year-1,window.theCalendar.month);
     window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year-1,window.theCalendar.month);
     break;
    case &quot;pm&quot;:
     window.document.all.titleYear.innerHTML=window.TranYearMonthTitle(window.theCalendar.year,window.theCalendar.month-1);
     window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year,window.theCalendar.month-1);
     break;
    case &quot;nm&quot;:
     window.document.all.titleYear.innerHTML=window.TranYearMonthTitle(window.theCalendar.year,window.theCalendar.month+1);
     window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year,window.theCalendar.month+1);
     break;
    case &quot;ny&quot;:
     window.document.all.titleYear.innerHTML=window.TranYearMonthTitle(window.theCalendar.year+1,window.theCalendar.month);
     window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year+1,window.theCalendar.month);
     break;
   }
   window.document.all.calendarBox.show();
   window.currentSelectDate = starCaTran(Nyear,Nmonth,Ndate);
   window.currentActiveItem = window.document.getElementById(currentSelectDate);
   if( window.currentActiveItem )window.currentActiveItem.runtimeStyle.cssText = &quot;background:url(choiceit.gif) no-repeat 12px 6px;color:#000;padding-top:1px;font-weight:bold&quot;;
 }
}
function show()
{
 var box = this;
 window.clearTimeout(box.timeHandle);
 var CdateBoxs = this.getElementsByTagName(&quot;span&quot;);
 for(var i=0;i&lt;CdateBoxs.length;i++)
 {
  CdateBoxs[i].defaultValue = new Number( CdateBoxs[i].innerHTML );
  CdateBoxs[i].innerHTML = 0;
 }
 showDate();
 function showDate(){
  for(var i=0;i&lt;CdateBoxs.length;i++){
   if( new Number( CdateBoxs[i].innerHTML ) + 1 &lt;= new Number( CdateBoxs[i].defaultValue ) )
    CdateBoxs[i].innerHTML = new Number( CdateBoxs[i].innerHTML ) + 1
  }
  box.timeHandle = window.setTimeout(showDate,1);
 }
this.show = show1
}
function show1()
{
 var box = this;
 window.clearTimeout(box.timeHandle);
 var CdateBoxs = this.getElementsByTagName(&quot;span&quot;);
 for(var i=0;i&lt;CdateBoxs.length;i++)CdateBoxs[i].style.display = &quot;none&quot;;
 showDate(CdateBoxs[0]);
 function showDate(obj){
  if( !obj )return;
  obj.style.display = &quot;inline&quot;;
  box.timeHandle = window.setTimeout(function(){showDate(obj.nextSibling);},1);
 }
this.show = show
}
/*
function show()
{
}
*/
&lt;/script&gt;
&lt;style&gt;
*{
 font:12px;
 letter-spacing:0px;
}
body{
 background-color:#E5E9F2;
 overflow:hidden;
 margin:0;
 border:0px;
}
#titleYear{
 text-align:center;
 padding-top:3px;
 width:120px;
 height:20px;
 border:solid #E5E9F2;
 border-width:0px 1px 1px 0px;
 background-color:#A4B9D7;
 color:#000;
 cursor:default;
}
#weekNameBox{
 width:282px;
 border-bottom:0;
}
.weekName{
 text-align:center;
 padding-top:4px;
 width:40px;
 height:20px;
 border:solid #E5E9F2;
 border-width:0px 1px 1px 0px;
 background-color:#C0D0E8;
 color:#243F65;
 cursor:default;
}
.controlButton{
 font-family: Webdings;
 font:9px;
 text-align:center;
 padding-top:2px;
 width:40px;
 height:20px;
 border:solid #E5E9F2;
 border-width:0px 1px 1px 0px;
 background-color:#A4B9D7;
 color:#243F65;
 cursor:default;
}
.Ctable{
 width:282px;
 margin-bottom:20px;
}
.Ctable span{
 font:9px verdana;
 font-weight:bold;
 color:#243F65;
 text-align:center;
 padding-top:4px;
 width:40px;
 height:26px;
 border:solid #C0D0E8;
 border-width:0px 1px 1px 0px;
 cursor:default;
}
.Cdate{
 background-color:#E5E9F2;
}
.Ctable span.OtherMonthDate{
 color:#999;
 background-color:#f6f6f6;
}
.selectBox{
 cursor:hand;
 font:9px verdana;
 width:80px;
 position:absolute;
 border:1px solid #425E87;
 overflow-y:scroll;
 overflow-x:hidden;
 background-color:#fff;
 FILTER:progid:DXImageTransform.Microsoft.Shadow(Color=#999999,offX=10,offY=10,direction=120,Strength=5);
 SCROLLBAR-FACE-COLOR: #E5E9F2;
 SCROLLBAR-HIGHLIGHT-COLOR: #E5E9F2;
 SCROLLBAR-SHADOW-COLOR: #A4B9D7;
 SCROLLBAR-3DLIGHT-COLOR: #A4B9D7;
 SCROLLBAR-ARROW-COLOR:  #000000;
 SCROLLBAR-TRACK-COLOR: #eeeee6;
 SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
}
.selectBox nobr{
 padding:0px 0px 2px 5px;
 width:100%;
 color:#000;
 letter-spacing:2px;
 text-decoration:none;
}
&lt;/style&gt;
&lt;body onselectstart=&quot;return false&quot;&gt;
&lt;div style=&quot;margin:0 0 0 0&quot;&gt;
&lt;div id=controlBar&gt;&lt;span class=controlButton cmd=py title=上一年&gt;33&lt;/span&gt;&lt;span class=controlButton cmd=pm title=上一月&gt;3&lt;/span&gt;&lt;span id=titleYear&gt;&lt;/span&gt;&lt;span class=controlButton  cmd=nm title=下一月&gt;4&lt;/span&gt;&lt;span class=controlButton cmd=ny title=下一年&gt;44&lt;/span&gt;&lt;/div&gt;
&lt;div id=weekNameBox&gt;&lt;/div&gt;
&lt;div id=calendarBox&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
</textarea></p>
<p><input type="button" value="运行" class="runcode_button" onclick="runcode_open_new('runcode_r7yxEC');"/> <input type="button" value="复制" class="runcode_button" onclick="runcode_copy('runcode_r7yxEC');"/> <input type="button" value="另存代码" class="runcode_button" onclick="saveCode('runcode_r7yxEC','runcode_r7yxEC');"/> 提示：你可以先修改部分代码再运行。</p>
</div>
<h2  class="related_post_title">您可能感兴趣的文章</h2><ul class="related_post"><li><a href="http://www.52shidai.com/javascript/jquery/372.html" title="推荐5个漂亮的jquery主流图表插件">推荐5个漂亮的jquery主流图表插件</a></li><li><a href="http://www.52shidai.com/wordpress/592.html" title="推荐10个Wordpress投票评级插件">推荐10个Wordpress投票评级插件</a></li><li><a href="http://www.52shidai.com/seo/566.html" title="Monster-Chrome浏览器的扩展插件（前端检测）">Monster-Chrome浏览器的扩展插件（前端检测）</a></li><li><a href="http://www.52shidai.com/wordpress/531.html" title="wp-Syntax 插件使用方法">wp-Syntax 插件使用方法</a></li><li><a href="http://www.52shidai.com/wordpress/506.html" title="wordpress采集插件—wp-o-matic使用详解">wordpress采集插件—wp-o-matic使用详解</a></li><li><a href="http://www.52shidai.com/wordpress/489.html" title="WP幻灯片插件Featured Content Gallery（FCG）汉化版">WP幻灯片插件Featured Content Gallery（FCG）汉化版</a></li><li><a href="http://www.52shidai.com/wordpress/487.html" title="五款漂亮实用的wordpress幻灯片插件">五款漂亮实用的wordpress幻灯片插件</a></li><li><a href="http://www.52shidai.com/javascript/434.html" title="漂亮的javascript对话框(弹出层)组件[附源码]">漂亮的javascript对话框(弹出层)组件[附源码]</a></li><li><a href="http://www.52shidai.com/seo/417.html" title="给博客添加内链的2个很好的插件">给博客添加内链的2个很好的插件</a></li><li><a href="http://www.52shidai.com/javascript/350.html" title="给链接加上漂亮的对话框式提示效果">给链接加上漂亮的对话框式提示效果</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.52shidai.com/javascript/286.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery生成asp.net服务器控件的代码</title>
		<link>http://www.52shidai.com/javascript/jquery/70.html</link>
		<comments>http://www.52shidai.com/javascript/jquery/70.html#comments</comments>
		<pubDate>Sun, 07 Feb 2010 01:59:22 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[控件]]></category>

		<guid isPermaLink="false">http://52shidai.com/?p=70</guid>
		<description><![CDATA[jQuery生成asp.net服务器控件 但不幸的是，该服务器控件依然没有起作用，还是用隐藏服务器控件来解决吧 HTML如下 复制代码 代码如下: &#60;tr&#62; &#60;td style=”width: 107px”&#62;附加金额&#60;/td&#62; &#60;td style=”width: 315px”&#62;&#60;asp:TextBox ID=”txtExtendMoney” Text=”0&#8243; runat=”server”&#62;&#60;/asp:TextBox&#62; &#60;asp:RegularExpressionValidator ID=”regExtend” runat=”server” ControlToValidate=”txtExtendMoney” Display=”Dynamic” ErrorMessage=”格式不正确” ValidationExpression=”[1-9]\d*\.\d*&#124;0\.\d*[1-9]\d*&#124;^[1-9]\d*&#124;0&#8243;&#62;&#60;/asp:RegularExpressionValidator&#62; &#60;asp:RequiredFieldValidator ID=”reqExtedNo” runat=”server” ControlToValidate=”txtExtendMoney” Display=”Dynamic” ErrorMessage=”不可为空”&#62;&#60;/asp:RequiredFieldValidator&#62;&#60;/td&#62; &#60;td&#62;结算方式&#60;/td&#62; &#60;td&#62;&#60;asp:DropDownList ID=”ddlPayType” runat=”server”&#62;&#60;asp:ListItem&#62;现金&#60;/asp:ListItem&#62;&#60;asp:ListItem&#62;银行转账&#60;/asp:ListItem&#62;&#60;/asp:DropDownList&#62;&#60;/td&#62; &#60;/tr&#62; &#60;tr&#62; &#60;td&#62;结算账户&#60;/td&#62; &#60;td colspan=”3&#8243;&#62;&#60;asp:RadioButtonList ID=”rdbPayAccountBank” runat=”server” RepeatLayout=”Flow”&#62;&#60;/asp:RadioButtonList&#62;&#60;/td&#62; &#60;/tr&#62; 最后一个RadioButtonList的ListItem为“其他账户”，当选中时，其后增加相应的asp.net服务器控件。选择其它时移除该控件。   增加   引入jQuery，然后如下代码 复制代码 代码如下: /*结算方式*/ $(“:radio:last”).bind(“click”,function(){ if($(“#txtBankNew”).length==0){ $(this).parent().append(&#8216;&#60;span id=”span”&#62;&#60;label style=”margin-left:6px;margin-right:4px;” for=”txtBankNew”&#62;开户银行&#60;/label&#62;&#60;input [...]]]></description>
			<content:encoded><![CDATA[<p>jQuery生成asp.net服务器<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e6%8e%a7%e4%bb%b6" title="查看 控件 中的全部文章" target="_blank">控件</a></span> 但不幸的是，该服务器<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e6%8e%a7%e4%bb%b6" title="查看 控件 中的全部文章" target="_blank">控件</a></span>依然没有起作用，还是用隐藏服务器<span class='wp_keywordlink_affiliate'><a href="http://www.52shidai.com/tag/%e6%8e%a7%e4%bb%b6" title="查看 控件 中的全部文章" target="_blank">控件</a></span>来解决吧<br />
HTML如下<br />
复制代码 代码如下:<br />
&lt;tr&gt;<br />
&lt;td style=”width: 107px”&gt;附加金额&lt;/td&gt;<br />
&lt;td style=”width: 315px”&gt;&lt;asp:TextBox ID=”txtExtendMoney” Text=”0&#8243; runat=”server”&gt;&lt;/asp:TextBox&gt;<br />
&lt;asp:RegularExpressionValidator ID=”regExtend” runat=”server” ControlToValidate=”txtExtendMoney” Display=”Dynamic” ErrorMessage=”格式不正确” ValidationExpression=”[1-9]\d*\.\d*|0\.\d*[1-9]\d*|^[1-9]\d*|0&#8243;&gt;&lt;/asp:RegularExpressionValidator&gt;<br />
&lt;asp:RequiredFieldValidator ID=”reqExtedNo” runat=”server” ControlToValidate=”txtExtendMoney” Display=”Dynamic” ErrorMessage=”不可为空”&gt;&lt;/asp:RequiredFieldValidator&gt;&lt;/td&gt;<br />
&lt;td&gt;结算方式&lt;/td&gt;<br />
&lt;td&gt;&lt;asp:DropDownList ID=”ddlPayType” runat=”server”&gt;&lt;asp:ListItem&gt;现金&lt;/asp:ListItem&gt;&lt;asp:ListItem&gt;银行转账&lt;/asp:ListItem&gt;&lt;/asp:DropDownList&gt;&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td&gt;结算账户&lt;/td&gt;<br />
&lt;td colspan=”3&#8243;&gt;&lt;asp:RadioButtonList ID=”rdbPayAccountBank” runat=”server” RepeatLayout=”Flow”&gt;&lt;/asp:RadioButtonList&gt;&lt;/td&gt;<br />
&lt;/tr&gt;</p>
<p>最后一个RadioButtonList的ListItem为“其他账户”，当选中时，其后增加相应的asp.net服务器控件。选择其它时移除该控件。</p>
<p> <a title="在新窗口打开图片" href="http://www.jb51.net/upload/2010-2/20100204121624850.png" target="_blank"><img src="http://www.jb51.net/upload/2010-2/20100204121624850.png" alt="" width="640" height="123" /></a></p>
<p>增加</p>
<p> <a title="在新窗口打开图片" href="http://www.jb51.net/upload/2010-2/20100204121624438.png" target="_blank"><img src="http://www.jb51.net/upload/2010-2/20100204121624438.png" alt="" width="640" height="154" /></a></p>
<p>引入jQuery，然后如下代码<br />
复制代码 代码如下:<br />
/*结算方式*/<br />
$(“:radio:last”).bind(“click”,function(){<br />
if($(“#txtBankNew”).length==0){<br />
$(this).parent().append(&#8216;&lt;span id=”span”&gt;&lt;label style=”margin-left:6px;margin-right:4px;” for=”txtBankNew”&gt;开户银行&lt;/label&gt;&lt;input runat=&#8217;server&#8217; id=&#8217;txtBankNew&#8217; type=&#8217;text&#8217; /&gt;&lt;label style=”margin-left:6px;margin-right:4px;” for=”txtAccountNew”&gt;开户账户&lt;/label&gt;&lt;input type=&#8217;text&#8217; id=&#8217;txtAccountNew&#8217; runat=&#8217;server&#8217; /&gt;&lt;/span&gt;&#8217;);<br />
};<br />
$(“#txtBankNew”).focus().select();<br />
});<br />
$(“:radio:not(:last)”).bind(“click”,function(){<br />
if($(“#txtBankNew”).length&gt;0){<br />
$(“#span”).remove();<br />
}<br />
});</p>
<p>这里值得注意的是如果append之后的控件为服务器控件，也就是有runat=”server”属性的，原先的单引号生成源后会自动变成双引号，并且runat=”server”消失。这实际上跟手工在前台书写此DOM结构.net framework处理一致。因此打开此页面源文件可以看到如下</p>
<p><img src="http://www.jb51.net/upload/2010-2/20100204121624350.png" alt="" /></p>
<p>但不幸的是，该服务器控件依然没有起作用……<br />
还是用隐藏服务器控件来解决吧–！</p>
<h2  class="related_post_title">您可能感兴趣的文章</h2><ul class="related_post"><li><a href="http://www.52shidai.com/javascript/286.html" title="非常漂亮的js日期控件">非常漂亮的js日期控件</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.52shidai.com/javascript/jquery/70.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

