nikofan
- 浏览: 222658 次
- 性别:
- 来自: 上海
-
最新评论
-
pealing1985：
受教了，，不知道实际的开发中 jquery ui 用的多吗。。 ...
jQuery MiniUI 开发教程 树形控件 树操作：增加、删除、修改、移动（六） -
nikofan：
IE6下没有问题
jQuery MiniUI 开发教程 表格控件 表格编辑：表单编辑（十二） -
hgztx：
这个系列的控件对IE6 的支持怎么样？有没有试过会有内存溢出的 ...
jQuery MiniUI 开发教程 表格控件 表格编辑：表单编辑（十二） -
jacking124：
这个用起来怎么样了，！！
jQuery MiniUI 开发教程 表格控件 表格：过滤行（七） -
masuweng：
界面、按钮都不错！
jQuery MiniUI 开发教程 表单控件 表单：控件尺寸调整（四）
文章列表
弹出：选择表格
参考示例：弹出：选择表格 弹出：多选表格 弹出：多选表格（复杂） 弹出：选择表格（JS）
mini.open
mini.open({
url: bootPATH + "../demo/CommonLibs/SelectGridWindow.html",
title: "选择列表",
width: 650,
height: 380,
ondestroy: function (action) {
...
表单：控件尺寸调整
参考示例：表单：加载、保存
宽度调整
可以在style中直接设置：
<input class="mini-textbox" style="width:200px;"/>
高度调整
如果需要调整按钮、输入框、下拉框、日期框等控件的高度，需要通过CSS样式，如下代码：
/* button */
.mini-button-text
{
padding-top:1px;
padding-bottom:2px;
padding-top:3px\9;
padding-bottom:1p ...
表单验证
参考示例： 验证规则 表单验证 表单验证：文本提示 表单验证：组合验证
绑定validation事件
<input id="username" name="username" onvalidation="onUserNameValidation" class="mini-textbox" required="true" />
function onUserNameValidation(e) {
if (e.isValid) {
...
表单：加载、保存
参考示例：表单：加载、保存
创建表单
只需要一个id即可创建表单对象：
var form = new mini.Form("#form1");
加载表单
$.ajax({
url: "../data/FormService.aspx?method=LoadData",
type: "post",
success: function (text) {
var data = mini.decode(text); //反序列化成对象
form.setDat ...
DataBinding：数据绑定
参考示例：DataBinding：数据绑定
数据绑定
数据绑定后：当表格变化时，控件值跟随变动；控件值修改时，表格单元格内容变动。
最后使用表格的数据提交保存，达到：多次修改、一次保存的效果。
//绑定表单
var db = new mini.DataBinding();
db.bindForm("editForm1", grid);
//绑定控件
db.bindField(textbox, grid, "username");
主框架布局之：Menu
参考示例：主框架布局之：Menu
一：创建界面布局
<!--Layout-->
<div id="layout1" class="mini-layout" style="width:100%;height:100%;">
<div class="header" region="north" height="7 ...
主框架布局之：Tree
参考示例：主框架布局之：Tree
一：创建界面布局
<!--Layout-->
<div id="layout1" class="mini-layout" style="width:100%;height:100%;">
<div class="header" region="north" height="70" showSplit="false" showHeader="false ...
主框架布局之：OutlookMenu
参考示例：主框架布局之：OutlookMenu
一：创建界面布局
<!--Layout-->
<div id="layout1" class="mini-layout" style="width:100%;height:100%;">
<div class="header" region="north" ...
主框架布局之：OutlookTree
参考示例：主框架布局之：OutlookTree
一：创建界面布局
<!--Layout-->
<div id="layout1" class="mini-layout" style="width:100%;height:100%;">
<div class="header" region="north" height="70" showSplit="false" showHea ...
CRUD之：弹出面板编辑
参考示例：CRUD之：弹出面板编辑
一：创建弹出编辑面板
<div id="editWindow" class="mini-window" title="Window" style="width:650px;"
showModal="true" allowResize="true" allowDrag="true"
>
<div id="editform" cl ...
CRUD之：行内表单编辑
参考示例：CRUD之：行内表单编辑
一：创建编辑表单
<div id="editForm1" style="display:none;padding:5px;position:relative;">
<input class="mini-hidden" name="id"/>
<table style="width:100%;">
<tr>
<td styl ...
CRUD之：行编辑
参考示例：CRUD之：行编辑
一：创建单元格编辑器
<div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;"
url="../data/DataService.aspx?method=SearchEmployees"
>
<div property="columns">
<div name="action ...
CRUD之：单元格编辑
参考示例：单元格编辑
一：创建单元格编辑器
<div id="datagrid1" class="mini-datagrid" style="width:800px;height:280px;"
url="../data/AjaxService.aspx?method=SearchEmployees" idField="id"
allowResize="true" pageSize="20"
al ...
下面实现一个最典型主框架布局。
效果图如下：
一：创建界面布局
<!--Layout-->
<div id="layout1" class="mini-layout" style="width:100%;height:100%;">
<div class="header" region="north" height="70" showSplit="false" showHeader="false" ...
表单开发包括：布局、验证、加载、提交、清除、重置等。
效果图如下：
表单布局
使用HTML Table标签实现任意丰富的表单布局：
<table class="form-table" border="0" cellpadding="1" cellspacing="2">
<tr>
<td class="form-label" style="width:60px;">姓名：</td>
& ...