jQuery MiniUI 開發教程 表單控制元件 表單:控制元件尺寸調整(四)
阿新 • • 發佈:2019-02-07
[b]表單:控制元件尺寸調整[/b]
[img]http://www.miniui.com/docs/api/images/diysize.gif[/img]
參考示例:[url=http://www.miniui.com/demo/form/form.html]表單:載入、儲存[/url]
[b]寬度調整[/b]
可以在style中直接設定:
<input class="mini-textbox" style="width:200px;"/>
[b]高度調整[/b]
如果需要調整按鈕、輸入框、下拉框、日期框等控制元件的高度,需要通過CSS樣式,如下程式碼:
/* button */
.mini-button-text
{
padding-top:1px;
padding-bottom:2px;
padding-top:3px\9;
padding-bottom:1px\9;
}
/* textbox */
.mini-textbox
{
height:19px;
}
.mini-textbox-input
{
height:17px;
line-height:15px;
}
/* buttonedit */
.mini-buttonedit
{
height:19px;
}
.mini-buttonedit-border
{
height:17px;
}
.mini-buttonedit-input
{
height:17px;
line-height:15px;
}
.mini-buttonedit-button
{
height:13px;
}
.mini-buttonedit-icon
{
width:15px;
height:14px;
}
.mini-datepicker .mini-buttonedit-icon
{
background-position:50% 1px;
}
[img]http://www.miniui.com/docs/api/images/diysize.gif[/img]
參考示例:[url=http://www.miniui.com/demo/form/form.html]表單:載入、儲存[/url]
[b]寬度調整[/b]
可以在style中直接設定:
<input class="mini-textbox" style="width:200px;"/>
[b]高度調整[/b]
如果需要調整按鈕、輸入框、下拉框、日期框等控制元件的高度,需要通過CSS樣式,如下程式碼:
/* button */
.mini-button-text
{
padding-top:1px;
padding-bottom:2px;
padding-top:3px\9;
padding-bottom:1px\9;
}
/* textbox */
.mini-textbox
{
height:19px;
}
.mini-textbox-input
{
height:17px;
line-height:15px;
}
/* buttonedit */
.mini-buttonedit
{
height:19px;
}
.mini-buttonedit-border
{
height:17px;
}
.mini-buttonedit-input
{
height:17px;
line-height:15px;
}
.mini-buttonedit-button
{
height:13px;
}
.mini-buttonedit-icon
{
width:15px;
height:14px;
}
.mini-datepicker .mini-buttonedit-icon
{
background-position:50% 1px;
}