`

jquery ui 1.7版中的datepicker大小問題

阅读更多

http://www.imusm.net/wp/archives/983

 

可能已經有前輩或神人們已經有遇到並解決..但我google了一下…沒有人分享..所以我就班門弄斧囉!!

在官方下載ui回來用之後,的確很強大很好用!
但有沒有發現..在官方的demo 頁中..datepicker的大小是很適中的…
但是一旦自己加入自己的程式碼中…就變的超大…

 

原因是在官方的css檔中..有個地方影响了datepicker的大小
body {
font-size: 62.5%;

}

是的..兇手就是這一段..

如果你原本的程式碼也有相關的格式..那麼你的datepicker就會受到這段的影响!

解決方法..

找出你所使用的theme path 如“css/redmond/jquery-ui-1.7.custom.css” ==>如果你是官網上自訂
theme配色可能路徑就不同囉~~~別找錯檔!

找到
.ui-datepicker { width: 17em; padding: .2em .2em 0;}
改成
.ui-datepicker { width: 17em; padding: .2em .2em 0; font-size: 指定大小;}
就可以囉~~~

for English version:

I’ve got a datepicker problem. I am having is adjusting the size of
the datepicker .  If I run the demo of the datepicker that is included
in the dev bundle, the datepicker shows up at a reasonable size.  If I
run the datepicker on my test page, it is HUGE!  So I check the css
and found the one tag that seems to make the difference.  The body tag

body {
font-size: 62.5%;

}

So I put that in my
test page and now the datepicker is back to a reasonable size.

So find the path you use in your environment!
your theme path should like this“css/redmond/jquery-ui-1.7.custom.css”

and find the section

.ui-datepicker { width: 17em; padding: .2em .2em 0;}
modify it to

.ui-datepicker { width: 17em; padding: .2em .2em 0; font-size: the size you want;}

It should work now!!!^_^

<script type="text/javascript">AKPC_IDS += &quot;983,&quot;;</script>

Popularity: 86% [? ]

分享到:
评论

相关推荐

    JQuery UI1.7中文文档

    **jQuery UI 1.7中文文档详解** jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了一套完整的组件,包括交互、特效、小部件和主题,用于构建富有吸引力且易于使用的Web应用程序。jQuery UI ...

    jquery ui 1.7 min高压缩版

    综上所述,这个压缩包提供了轻量级的jQuery UI 1.7版本,适用于那些对文件大小有严格要求或者需要兼容旧版浏览器的项目。同时,`jquery.form.min.js` 为处理表单提供了便利。在实际开发中,根据项目需求,我们可以...

    jQuery UI 1.7(2009).pdf

    2. **Widgets(小部件)**:jQuery UI提供了多种预置的小部件,如拖放(Draggable)、可调整大小(Resizable)、选项卡(Tabs)、日期选择器(Datepicker)等,这些小部件极大地简化了复杂用户界面的开发过程。...

    jquery UI 1.7源代码

    在本文中,我们将深入探讨jQuery UI 1.7的源代码,了解其背后的实现原理和设计思路,帮助开发者更高效地利用这个强大的工具。 首先,我们来看看`index.html`。这是项目的主入口文件,通常包含HTML结构以及引入...

    JQuery UI1.7中文API

    在1.7版本中,jQuery UI包含了多种常用的UI元素和交互功能,如对话框、拖放、排序、日期选择器等。下面将对这些功能进行详细介绍。 1. **对话框(Dialog)**:jQuery UI的对话框组件允许将任何HTML元素转化为一个弹出...

    jQuery UI 1.7, The User Interface Library for jQuery.pdf

    《jQuery UI 1.7, The User Interface Library for jQuery》是关于jQuery UI库的一本权威指南,由Dan Wellman撰写,旨在帮助开发者构建高度交互式的Web应用程序。jQuery UI 是一个基于jQuery的开源库,提供了丰富的...

    jQuery UI 1.7 - The User Interface Library for jQuery

    1. **电商网站**:利用jQuery UI 1.7中的日期选择器、滑动条(slider)等功能,可以让用户更便捷地进行商品筛选或日期预订等操作。 2. **社交平台**:通过对话框、提示框(alerts)等小部件,增强用户体验,例如弹出...

    JQuery+UI1.7中文API

    在1.7版本中,jQuery UI 对多个组件进行了优化,提升了性能和稳定性,修复了一些已知问题,同时引入了新的特性,比如Sortable组件的连接列表功能。 ### 总结 jQuery UI 1.7中文API为开发者提供了详尽的中文文档,...

    jqueryui中插件Datepicker控件的使用

    ### jQuery UI 中 Datepicker 控件使用详解 #### 一、简介与基本使用 **Datepicker** 是 jQuery UI 提供的一个非常实用的日期选择插件,它可以帮助开发者轻松地在网页上添加日期选择功能。要使用 Datepicker,首先...

    jQuery UI Datepicker插件timepicker时分秒

    为了解决这个问题,开发者可以使用timepicker插件,这是一个针对jQuery UI Datepicker的扩展,它添加了小时、分钟和秒的选取功能。timepicker插件的核心文件有`jquery-ui-timepicker-addon.js`和对应的minified版本`...

    jquery-ui-1.7.zip

    在jQuery UI 1.7中,Dialog组件支持自定义样式、自动调整大小以及丰富的事件回调,使得对话框的实现既灵活又可控。 其次,Draggable和Sortable是jQuery UI中的两大动态交互组件。Draggable允许用户通过鼠标拖动元素...

    jquery-ui-datepicker中文版

    jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...

    jQuery.UI.1.7.jQuery用户界面库

    《jQuery.UI.1.7:全面解析jQuery用户界面库》 jQuery UI是基于JavaScript库jQuery的一个强大且功能丰富的用户界面组件集合,它为开发者提供了构建交互式网站的强大工具。jQuery UI 1.7版本是这一系列组件的重要...

    jquery ui datepicker all theme

    jQuery UI库中的Datepicker组件是此类功能的一个强大实现,它提供了丰富的功能和多样的主题,使得日期选择器既能满足功能需求,又能与网站设计无缝融合。本文将深入探讨jQuery UI Datepicker及其全主题,帮助开发者...

    jquery.ui.datepicker-zh-CN.js

    jquery-ui中文日历控件,使用的时候记得先把文档编码改为UTF-8,否则中文显示乱码!

    jquery-ui-1.11.2日期控件datepicker

    ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.css" &gt; ${ctx}/plugins/jquery-ui-1.11.2/external/jquery/jquery.js"&gt; ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.js"&gt; ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui-...

    JQuery 1.7及JQuery UI 英文API CHM版

    **jQuery 1.7及其jQuery UI英文API CHM版**是两个重要的资源,对于深入理解和高效使用jQuery框架具有极大价值。这两个CHM(Compiled Help Manual)文件分别提供了jQuery 1.7版本和jQuery UI的详细文档,是开发者的...

    jquery.ui.datepicker.js

    日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。

    jquery.datepicker-zh-CN.js

    jquery datepicker 的中文包...&lt;link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"&gt; $( "#datepicker" ).datepicker({dateFormat:"yy-mm-dd",regional:$.datepicker.regional['zh-CN']});

    jquery-ui-1.7.rar

    总结来说,jQuery UI 1.7是前端开发中的一个重要里程碑,其丰富的组件和主题系统为开发者提供了构建高效、用户友好的界面的强大工具。通过对`jquery-ui-1.7.2.custom.zip`和`jquery-ui-themes-1.7.1.zip`的深入理解...

Global site tag (gtag.js) - Google Analytics