Fork me on GitHub

插件帮助文档 --- 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} 

   */ 

posted @ 2012-02-15 16:44  idoku  阅读(676)  评论(0编辑  收藏  举报