jQuery插件运用（连载）

1.date picker

导入

< script type = " text/javascript "  src = " js/jquery-1.2.3.pack.js " ></ script >

     < script type = " text/javascript "  src = " js/date.js " ></ script >

     < script type = " text/javascript "  src = " js/jquery.datePicker.js " ></ script >

     < link rel = " stylesheet "  type = " text/css "  media = " screen "  href = " css/datePicker.css " >
     < link rel = " stylesheet "  type = " text/css "  media = " screen "  href = " css/demo.css " >

 加入javascript

< script type = " text/javascript " >
     $(function()
      ... {
         var cal;
         var $this;
         
         var checkForMouseout = function(event)
         ...{
            var el = event.target;
        
            while (true)...{
            if (el == cal) ...{
                return true;
            } else if (el == document) ...{
                $this.dpClose();
                return false;
            } else ...{
                el = $(el).parent()[0];
            }
         }
      };

      $('.date-pick')
        .datePicker()
        .bind(
            'dpDisplayed',
            function(event, datePickerDiv)
            ...{
                cal = datePickerDiv;
                $this = $(this);
                $(document).bind(
                    'mouseover',
                    checkForMouseout
                );
            }
        ).bind(
            'dpClosed',
            function(event, selected)
            ...{
                $(document).unbind(
                    'mouseover',
                    checkForMouseout
                );
            }
                );
       
       
       Date.format = 'mm/dd/yyyy';

       $('.date-pick').datePicker(...{startDate:'01/01/2005'});
     } );
     </ script >

主要是最后一行的代码就可以用该插件了，前面的function是运用了插件的鼠标离开就会使日期框消失的事件

设置class

< input name = " DateStart "  id = " DateStart "  type = " text "   class = " date-pick "  runat = " server "   />

2.checkbox

导入

< script src = " ssc/jquery-1.2.3.pack.js "  type = " text/javascript " ></ script >
     < script src = " ssc/jquery.checkbox.js "  type = " text/javascript " ></ script >

加入javascript

 

< script type = " text/javascript " >

    $(function() ... {

        $("#checkbox").checkbox(...{checked: "img/icon/asterisk_yellow.jpg", unchecked: "img/icon/asterisk_gray.jpg"});
        $("#cssCheckbox").cssCheckbox();

        $("form").submit(function() ...{

            var string = "";
            $(":checkbox", this).each(function()...{
                string += this.name + ": " + this.checked + " "
            });
            alert(string);
            return false;
        });
    } );

     </ script >

设置id

< form method = " post "  action = " / "  id = " checkbox " >
             < fieldset >
                 < legend > Checkbox Group </ legend >
                 < ol >
                     < li >
                         < input type = " checkbox "  name = " chk1 "  id = " chk1 "   />  option one
                     </ li >
                     < li >
                         < input type = " checkbox "  name = " chk2 "  id = " chk2 "   />  option two
                     </ li >
                     < li >
                         < input type = " checkbox "  name = " chk3 "  id = " chk3 "   />  option three
                     </ li >
                 </ ol >
             </ fieldset >

             < p >< input type = " submit "  value = " Show state "   class = " submit "   /></ p >
         </ form >

 

< form method = " post "  action = " / "  id = " cssCheckbox " >
             < fieldset >
                 < legend > Checkbox Group One </ legend >
                 < ol >
                     < li >
                          < input type = " checkbox "  name = " chk4 "   />   < label  for = " chk4 " > group one option one </ label >
                     </ li >
                     < li >
                         < input type = " checkbox "  name = " chk5 "   />   < label  for = " chk5 " > group one option two </ label >
                     </ li >
                     < li >
                         < input type = " checkbox "  name = " chk6 "   />   < label  for = " chk6 " > group one option three </ label >
                     </ li >
                 </ ol >
             </ fieldset >

             < p >< input type = " submit "  value = " Show state "   class = " submit "   /></ p >
         </ form >

3.jNice

< link href = " ssc/jNice.css "  rel = " stylesheet "  type = " text/css "   />
     < link href = " ssc/base.css "  rel = " stylesheet "  type = " text/css "   />
    
     < script type = " text/javascript "  src = " ../ssc/jquery-1.2.3.pack.js " ></ script >

     < script type = " text/javascript "  src = " ../ssc/jquery.jNice.js " ></ script >

用母页版的话就放到母页版中就可以

会认到页面源码中的type=“text”,"button","dropdownlist"等控件