插件帮助文档 --- JQueryUI

 

官方网站：

  

插件描述：

 

说明：

 

建议：

 

 

 

插件使用：

1           Tab使用：

注意项：使用JQueryUI---tab时，如果使用了RenderPartial，

  <%Html.RenderPartial("BasicInfoControl",ViewData["operation"]); %>

那么，RenderPartial中不能再引用任何Jquery.js。否则报错“Microsoft JScript 运行时错误: 对象不支持此属性或方法”。原因不明。

解决方案：将需要的js文件引用，在使用RenderPartial的页面使用，而非RenderPartial内部使用。

1.1          Ajax调用：

页面：

     <div id="hospitals" class="hospital" style="width:600px"> 

  <ul>

  <%foreach (var item in ViewData["hospitalLevel"] as List<AjaxData>)

    {

         %>

         <li class="hoverhospital"><a href='<%=Url.Action("RecommendHospitals", "Home", new { hospitalLevelId=item.Id })%>'><%=Html.Encode(item.Name) %></a></li>

         <%

    } %>

  </ul>

  </div>

调用：

$(function() {

            $("#hospitals").tabs({

                event: "mouseover",

                ajaxOptions: {

                    error: function(xhr, status, index, anchor) {

                        $(anchor.hash).html(

                                                        "对不起,加载失败.");

                    }

                }

            });

        });

 

 

2           DatePicker使用：

1.1          本地化

引用中文文件：

<script src="http://www.cnblogs.com/Scripts/JQueryUI/i18n/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></script>

设置本地化：

$(function() {

        $.datepicker.setDefaults($.datepicker.regional['zh-CN']);

        $(".dateTimePicker").datepicker();

});

设置时间范围：

$(".dateTimePicker").datepicker({

                minDate: +0, maxDate: +8

            });s

注意项：使用中文插件时，标题的年月变为两行。

解决办法：修正样式

.ui-datepicker .ui-datepicker-title select {font-size:1em; margin:1px 0; }  

 .ui-datepicker select.ui-datepicker-month-year {width: 100%;}  

  .ui-datepicker select.ui-datepicker-month,  

  .ui-datepicker select.ui-datepicker-year { width: 40%;}  

  .ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: left; }  

  /* 控制字体大小  

    .ui-datepicker-div, .ui-datepicker-inline, #ui-datepicker-div {font-size:1.2em} 

   */