按钮
<a href="javascript:void(0)" class="common_button common_button_gray">按钮</a>
<a href="javascript:void(0)" class="common_button common_button_disable">按钮禁用</a>
<a href="javascript:void(0)" class="common_button common_button_emphasize">蓝色按钮</a>
<a href="javascript:void(0)" class="common_button common_button_icon"><em class="ico16 affix_16"></em>图标按钮</a>
<a href="javascript:void(0)" class="img-button margin_r_0"><em class="ico16 affix_16 margin_r_5"></em>图标无背景按钮</a>
<a id="btnsave" class="common_button common_button_gray" href="javascript:void(0)">${ctp:i18n('common.button.save.label')}</a>
<a id="btnmodify" class="common_button common_button_gray" href="javascript:void(0)">${ctp:i18n('common.button.modify.label')}</a>
<a id="btnsearch" class="common_button common_button_gray" href="javascript:void(0)">${ctp:i18n('common.button.condition.search.label')}</a>
<a id="btnok" class="common_button common_button_gray" href="javascript:void(0)">${ctp:i18n('common.button.ok.label')}</a>
<a id="btncancel" class="common_button common_button_gray" href="javascript:void(0)">${ctp:i18n('common.button.cancel.label')}</a>
<a id="btnclose" class="common_button common_button_gray" href="javascript:void(0)">${ctp:i18n('common.button.close.label')}</a>
<a id="btnreset" class="common_button common_button_gray" href="javascript:void(0)">${ctp:i18n('common.button.reset.label')}</a>
<a id="btnsubmit" class="common_button common_button_gray" href="javascript:void(0)">${ctp:i18n('common.button.submit.label')}</a>
*.特殊说明
按钮的id必须有，ctp通过id绑定了快捷键
"ENTER"：依次为[保存]、[确定]、[提交]、[查询]、[重置]、[修改]
"ESC":依次为[取消]、[关闭]
一个页面中按钮的id不能重复，默认是绑定的第一个，如果重复可以把不需要绑定的id删除
设置按钮禁用/启用
| 事件 | 描述 |
| 按钮可用不可用 |
<script>
$(document).ready(function() {
$("#mybtn").toggle(function() {
$("#mycal1").disable();
$("#testRegion").disable();
}, function() {
$("#mycal1").enable();
$("#testRegion").enable();
});
});
</script>
<input type="button" id="mybtn" value="禁用/启用">
<div id="testRegion">
<a href="javascript:void(0)" class="common_button common_button_gray">按钮1</a><a href="javascript:void(0)"
class="common_button common_button_gray">按钮2</a> <input type="text" class="comp"
comp="type:'calendar',ifFormat:'%m-%Y-%d'"> <input type="checkbox"><input type="radio">
</div>
|
radio单选
用于在一组相关但互斥的选项中进行选择。用户能且仅能选择一个选项。
<div class="common_radio_box clearfix">
<label for="radio1" class="margin_r_10 hand">
<input type="radio" value="0" id="radio1" name="option" class="radio_com">选项1</label>
<label for="radio2" class="margin_r_10 hand">
<input type="radio" value="0" id="radio2" name="option" class="radio_com">选项2</label>
<label for="radio3" class="margin_r_10 hand">
<input type="radio" value="0" id="radio3" name="option" class="radio_com">选项3</label>
</div>
<div class="code_list">
<div class="common_radio_box clearfix">
<label for="radio9" class="margin_r_10 disabled_color">
<input type="radio" value="0" id="radio9" name="option" disabled="true" class="radio_com">选项5</label>
<label for="radio10" class="margin_r_10 disabled_color">
<input type="radio" value="0" id="radio10" name="option" disabled="true" class="radio_com">选项6</label>
<label for="radio11" class="disabled_color">
<input type="radio" value="0" id="radio11" name="option" disabled="true" class="radio_com">选项7</label>
</div>
</div>
<div class="common_radio_box clearfix">
<label for="radio5" class="margin_t_5 hand display_block">
<input type="radio" value="0" id="radio5" name="option" class="radio_com">选项1</label>
<label for="radio6" class="margin_t_5 hand display_block">
<input type="radio" value="0" id="radio6" name="option" class="radio_com">选项2</label>
<label for="radio7" class="margin_t_5 hand display_block">
<input type="radio" value="0" id="radio7" name="option" class="radio_com">选项3</label>
<label for="radio8" class="margin_t_5 hand display_block">
<input type="radio" value="0" id="radio8" name="option" class="radio_com">选项4</label>
</div>
<div class="common_radio_box clearfix">
<label for="radio12" class="margin_t_5 disabled_color display_block">
<input type="radio" value="0" id="radio12" name="option" disabled="true" class="radio_com">选项5</label>
<label for="radio13" class="margin_t_5 disabled_color display_block">
<input type="radio" value="0" id="radio13" name="option" disabled="true" class="radio_com">选项6</label>
<label for="radio14" class="margin_t_5 disabled_color display_block">
<input type="radio" value="0" id="radio14" name="option" disabled="true" class="radio_com">选项7</label>
</div>
<div class="common_radio_box clearfix align_center">
<label for="radio15" class="margin_r_10 hand">
<input type="radio" value="0" id="radio15" name="option" class="radio_com">选项1</label>
<label for="radio16" class="margin_r_10 hand">
<input type="radio" value="0" id="radio16" name="option" class="radio_com">选项2</label>
<label for="radio17" class="margin_r_10 hand">
<input type="radio" value="0" id="radio17" name="option" class="radio_com">选项3</label>
<label for="radio18" class="hand">
<input type="radio" value="0" id="radio18" name="option" class="radio_com">选项4</label>
</div>
实现右对齐
右对齐只需要把中对齐中“align_center”改为“align_right”即可
中对齐与右对齐radio
最后一个不用margin_r_10
checkbox复选
用于在两个或两个以上有清晰差别的选项中进行选择。复选框的标签是对选中状态的描述，而清除状态的含义必须与选中状态明确相反。因此，复选框应当仅用于切换选项的开关状态，或者是选择/取消选择一个项目。
<div class="common_checkbox_box clearfix ">
<label for="Checkbox1" class="margin_r_10 hand">
<input type="checkbox" value="0" id="Checkbox1" name="option" class="radio_com">选项1</label>
<label for="Checkbox2" class="margin_r_10 hand">
<input type="checkbox" value="0" id="Checkbox2" name="option" class="radio_com">选项2</label>
<label for="Checkbox3" class="margin_r_10 hand">
<input type="checkbox" value="0" id="Checkbox3" name="option" class="radio_com">选项3</label>
<label for="Checkbox4" class="margin_r_10 hand">
<input type="checkbox" value="0" id="Checkbox4" name="option" class="radio_com">选项4</label>
</div>
<div class="common_checkbox_box clearfix ">
<label for="radio5" class="margin_r_10 disabled_color">
<input type="checkbox" value="0" id="radio5" name="option" disabled="true" class="radio_com">选项5</label>
<label for="radio6" class="disabled_color">
<input type="checkbox" value="0" id="radio6" name="option" disabled="true" class="radio_com">选项6</label>
</div>
<div class="common_checkbox_box clearfix ">
<label for="Checkbox5" class="margin_t_5 hand display_block">
<input type="checkbox" value="0" id="Checkbox5" name="option" class="radio_com">选项1</label>
<label for="Checkbox6" class="margin_t_5 hand display_block">
<input type="checkbox" value="0" id="Checkbox6" name="option" class="radio_com">选项2</label>
<label for="Checkbox7" class="margin_t_5 hand display_block">
<input type="checkbox" value="0" id="Checkbox7" name="option" class="radio_com">选项3</label>
<label for="Checkbox8" class="margin_t_5 hand display_block">
<input type="checkbox" value="0" id="Checkbox8" name="option" class="radio_com">选项4</label>
</div>
<div class="common_checkbox_box clearfix ">
<label for="radio5" class="margin_t_5 disabled_color display_block">
<input type="checkbox" value="0" id="Checkbox17" name="option" disabled="true" class="radio_com">选项5</label>
<label for="radio6" class="margin_t_5 disabled_color display_block">
<input type="checkbox" value="0" id="Checkbox18" name="option" disabled="true" class="radio_com">选项6</label>
</div>
<div class="common_checkbox_box clearfix align_center">
<label for="radio14" class="margin_r_10 hand">
<input type="checkbox" value="0" id="radio14" name="option" class="radio_com">选项1</label>
<label for="radio15" class="margin_r_10 hand">
<input type="checkbox" value="0" id="radio15" name="option" class="radio_com">选项2</label>
<label for="radio16" class="margin_r_10 hand">
<input type="checkbox" value="0" id="radio16" name="option" class="radio_com">选项3</label>
<label for="radio17" class="hand">
<input type="checkbox" value="0" id="radi17" name="option" class="radio_com">选项4</label>
</div>
实现右对齐
右对齐只需要把中对齐中“align_center”改为“align_right”即可
进度条
用于查看长时间操作的进度, 为需要 2 秒甚至更长时间的操作提供某种类型的进度反馈信息，可显示大致的完成百分比，也可以显示操作正在进行中。
A8平台调用：
//显示遮罩
showMask()
//隐藏遮罩
hideMask()
//单独调用
var proce = $.progressBar();
var proce = $.progressBar({
text: "正在更新RSS信息...."
});
关闭进度条方法：
proce.close();
页签
提供了一种将相关信息显示在单独的带标签页的方法。
<div class="common_tabs clearfix">
<ul class="left">
<li class="current"><a href="javascript:void(0)">页签</a></li>
<li><a hidefocus="true" href="javascript:void(0)" class="disable">页签</a></li>
<li><a hidefocus="true" href="javascript:void(0)">页签</a></li>
<li><a hidefocus="true" href="javascript:void(0)">页签</a></li>
</ul>
</div>
<div id="tabs" class="comp" comp="type:'tab',width:600,height:200,parentId:'tabs'">
<div id="tabs_head" class="common_tabs clearfix">
<ul class="left">
<li class="current"><a hidefocus="true" href="javascript:void(0)" tgt="tab1_iframe"><span>OA</span></a></li>
<li><a hidefocus="true" href="javascript:void(0)" tgt="tab2_iframe"><span>seeyon</span></a></li>
<li><a hidefocus="true" href="javascript:void(0)" tgt="tab3_iframe"><span>OA</span></a></li>
<li><a hidefocus="true" href="javascript:void(0)" tgt="tab4_iframe"><span>seeyon</span></a></li>
</ul>
</div>
<div id="tabs_body" class="common_tabs_body ">
<iframe id="tab1_iframe" width="100%" src="" frameborder="no" border="0"></iframe>
<iframe id="tab2_iframe" width="100%" src="http://172.20.2.20/seeyon/main.do" frameborder="no" border="0" class="hidden"></iframe>
<iframe id="tab3_iframe" width="100%" src="" frameborder="no" border="0" class="hidden"></iframe>
<iframe id="tab4_iframe" width="100%" src="http://172.20.2.20/seeyon/main.do" frameborder="no" border="0" class="hidden"></iframe>
</div>
</div>
<div id="tabs2" class="comp" comp="type:'tab',width:600,height:200">
<div id="tabs2_head" class="common_tabs clearfix">
<ul class="left">
<li class="current"><a href="javascript:void(0)" tgt="tab1_div"><span>div1</span></a></li>
<li><a href="javascript:void(0)" tgt="tab2_div"><span>div2</span></a></li>
<li><a href="javascript:void(0)" tgt="tab3_div"><span>div3</span></a></li>
<li><a href="javascript:void(0)" tgt="tab4_div"><span>div4</span></a></li>
</ul>
</div>
<div id="tabs2_body" class="common_tabs_body ">
<div id="tab1_div">1</div>
<div id="tab2_div" class="hidden">2</div>
<div id="tab3_div" class="hidden">3</div>
<div id="tab4_div" class="hidden">4</div>
</div>
</div>
属性
| 属性 | 类型 | 描述 |
| id | string | ab id[必须] |
| width | number | 宽度 |
| height | number | 宽度 |
| parentId | string | 获取设置tab的宽高 |
| showTabIndex | number | 设置第index的tab为默认显示 |
| refreashTab | bool | 是否刷新iframe |
| tabsEquallyWidth | bool | 页签平分显示 |
方法
| 方法 | 描述 |
| disabled(id) | 禁用某个页签 |
| enable(id) | 可用某个页签 |
| setCurrent(id) | 设置某个页签可用 |
| setMouseOver(id) | 设置鼠标滑过触发选中效果 |
| setClick(id | 设置鼠标点击触发选中效果 |
| resetSize() | 重新整体宽高 |
From表单
用于显示、输入或编辑文本或数值。
<div class="form_area">
<div class="one_row">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th nowrap="nowrap">
<label class="margin_r_10" for="text">标题:</label></th>
<td width="100%">
<div class="common_txtbox_wrap">
<input type="text" id="text18">
</div>
</td>
</tr>
<tr>
<th nowrap="nowrap">
<label class="margin_r_10" for="text">人员编号:</label></th>
<td>
<div class="common_txtbox_wrap">
<input type="text" id="text19">
</div>
</td>
</tr>
<tr>
<th nowrap="nowrap">
<label class="margin_r_10" for="text">人员编号:</label></th>
<td>
<div class="common_selectbox_wrap">
<select>
<option>aaaaaaaaaaaaa</option>
</select>
</div>
</td>
</tr>
<tr>
<th nowrap="nowrap">
<label class="margin_r_10" for="text">备注:</label></th>
<td>
<div class="common_txtbox clearfix">
<textarea cols="30" rows="7" class="w100b "></textarea>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="align_center">
<a href="javascript:void(0)" class="common_button common_button_gray">确定</a>
<a href="javascript:void(0)" class="common_button common_button_gray">取消</a>
</div>
</div>
<div class="form_area">
<div class="form_area_content">
<div class="one_row">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th nowrap="nowrap">
<label class="margin_r_10" for="text">标题:</label></th>
<td width="100%">
<div class="common_txtbox_wrap">
<input type="text" id="text14">
</div>
</td>
</tr>
<tr>
<th nowrap="nowrap">
<label class="margin_r_10" for="text">人员编号:</label></th>
<td width="100%">
<div class="common_txtbox_wrap">
<input type="text" id="text15">
</div>
</td>
</tr>
<tr>
<th nowrap="nowrap">
<label class="margin_r_10" for="text">人员编号:</label></th>
<td>
<div class="common_selectbox_wrap">
<select>
<option>aaaaaaaaaaaaa</option>
</select>
</div>
</td>
</tr>
<tr>
<th nowrap="nowrap">
<label class="margin_r_10" for="text">备注:</label></th>
<td width="100%">
<div class="common_txtbox clearfix">
<textarea cols="30" rows="7" class="w100b "></textarea>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="one_row">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th nowrap="nowrap">
<label class="margin_r_10" for="text">标题:</label></th>
<td width="100%">
<div class="common_txtbox_wrap common_txtbox_wrap_dis">
<input type="text" id="text16" disabled="true">
</div>
</td>
</tr>
<tr>
<th nowrap="nowrap">
<label class="margin_r_10" for="text">人员编号:</label></th>
<td width="100%">
<div class="common_txtbox_wrap common_txtbox_wrap_dis">
<input type="text" id="text17" disabled="true">
</div>
</td>
</tr>
<tr>
<th nowrap="nowrap">
<label class="margin_r_10" for="text">人员编号:</label></th>
<td>
<div class="common_selectbox_wrap">
<select>
<option>aaaaaaaaaaaaa</option>
</select>
</div>
</td>
</tr>
<tr>
<th nowrap="nowrap">
<label class="margin_r_10" for="text">备注:</label></th>
<td width="100%">
<div class="common_txtbox clearfix">
<textarea cols="30" rows="7" class="w100b common_txtbox_wrap_dis" disabled="true"></textarea>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="align_center clear">
<a href="javascript:void(0)" class="common_button common_button_gray">确定</a>
<a href="javascript:void(0)" class="common_button common_button_gray">取消</a>
</div>
</div>
框架提供disable和enable函数用于批量禁用和启用某个区域的控件，代码例子如下：
<script>
$(document).ready(function() {
$("#mybtn").toggle(function() {
$("#mycal1").disable();
$("#testRegion").disable();
}, function() {
$("#mycal1").enable();
$("#testRegion").enable();
});
});
</script>
<input type="button" id="mybtn" value="禁用/启用">
<div id="testRegion">
<a href="javascript:void(0)" class="common_button common_button_gray">按钮1 </a>
<a href="javascript:void(0)"class="common_button common_button_gray">按钮2 </a>
<input type="text" class="comp" comp="type:'calendar',ifFormat:'%m-%Y-%d'">
<input type="checkbox">
<input type="radio">
</div>
表单验证
<div class="form_area align_center">
<form id="tableForm" action="list.htm" class="align_center">
<table border="0" cellspacing="0" cellpadding="0" width="500" align="center">
<tbody><tr>
<th nowrap="nowrap"><label class="margin_r_10" for="text">用户名:</label></th>
<td width="100%"><div class="common_txtbox_wrap">
<input id="name" type="text" class="validate" validate="type:'string',name:'姓名',notNull:true,minLength:4,maxLength:20,character:'-!@#$%^&*()_+'">
</div></td>
</tr>
<tr>
<th nowrap="nowrap"><label class="margin_r_5" for="text">真实姓名:</label></th>
<td><div class="common_txtbox_wrap">
<input id="truename" type="text" name="truename" class="validate" validate="fieldName:'真实姓名',notNullWithoutTrim:true">
</div></td>
</tr>
<tr>
<th nowrap="nowrap"><label class="margin_r_5" for="text">移动电话:</label></th>
<td><div class="common_txtbox_wrap">
<input id="phone" type="text" name="telephone" class="validate" validate="name:'移动电话',type:'telephone'">
</div></td>
</tr>
<tr>
<th nowrap="nowrap"> <label class="margin_r_5" for="text">办公电话:</label></th>
<td><div class="common_txtbox_wrap">
<input id="officenumber" type="text" name="officeNumber" class="validate" validate="name:'办公电话', type:'number', dotNumber:2, integerDigits:4, notNull:true">
</div></td>
</tr>
<tr><th nowrap="nowrap">
<label class="margin_r_10" for="text"> 出生日期:</label>
</th>
<td>
<div class="common_txtbox_wrap">
<input id="mycal2" type="text" class="comp validate " comp="type:'calendar',ifFormat:'%Y-%m-%d %H:%M',showsTime:true" validate="name:'出生日期',notNull:true,type:'5'">
</div>
</td>
</tr></tbody></table>
</form>
</div>
<div class="align_center margin_t_10">
<a href="javascript:void(0)" class="common_button common_button_gray" id="tableSubmit" onclick="formSubmit();">提交</a>
<a href="javascript:void(0)" class="common_button common_button_gray" id="myBtn" onclick="myBtn();">取消</a>
</div>
<script type="text/javascript">
function formSubmit(){
$("#tableForm").validate();
}
function myBtn(){
$("#myBtn").clearform();
}
</script>
<div class="form_area align_center">
<form id="tableForm1" action="list.htm" class="align_center">
<table border="0" cellspacing="0" cellpadding="0" width="500" align="center">
<tbody><tr>
<th nowrap="nowrap"><label class="margin_r_5" for="text">用户名:</label></th>
<td width="50%"><div class="common_txtbox_wrap">
<input id="name" type="text" name="username" class="validate" validate="type:'string',name:'姓名',notNull:true,minLength:4,maxLength:20,character:'-!@#$%^&*()_+'">
</div></td>
<th nowrap="nowrap"><label class="margin_r_5 margin_l_10" for="text">密码:</label></th>
<td width="50%"><div class="common_txtbox_wrap">
<input type="password" name="password" class="validate" validate="fieldName:'密码',notNullWithoutTrim:true">
</div></td>
</tr>
<tr>
<th nowrap="nowrap"><label class="margin_r_5" for="text">个人号码:</label></th>
<td><div class="common_txtbox_wrap">
<input type="text" name="email" class="validate" validate="type:'email',name:'电子邮件'">
</div></td>
<th nowrap="nowrap"><label class="margin_r_5" for="text"> 办公号码:</label></th>
<td><div class="common_txtbox_wrap ">
<input type="text" name="telephone" class="validate" validate="name:'电话号码',type:'telephone'">
</div></td>
</tr>
</tbody></table>
</form>
</div>
<div class="align_center margin_t_10">
<a href="javascript:void(0)" class="common_button common_button_gray" id="tableSubmit" onclick="formSubmit1();">提交</a>
<a href="javascript:void(0)" class="common_button common_button_gray" id="myBtn1" onclick="myBtn1();">取消</a>
</div>
<script type="text/javascript">
function formSubmit1(){
$("#tableForm1").validate();
}
function myBtn1(){
$("#tableForm1").clearform();
}
</script>
实例:在调用jquery扩展插件的formobj、jsonSubmit或validate方法时，会执行校验过程
$("#formId").jsonSubmit();
$("#formId").formobj();
$("#formId").validate();
属性
如要校验某种类型，要求input存在validate属性，并且 validate属性 的值要求是一个合法的 json字符串 。
例如：
<input name="username" type="text" validate="{type:'string',maxLength:20,minLength:6}" />
以下所说的属性，全部都是json字符串的属性。
主属性是验证某一个类型必须存在的属性，副属性可选，不是必须存在的属性。
目前一共可以验证13种类型，再加上最后一种给定自定义正则表达式的自定义验证类型。
name属性或displayName在显示错误信息的时候要用到，但是也可以选择不给出（此时作为输入框的name属性必须存在）
| 类型 | 主属性和可选值 | 副属性和可选值（空白表示无） |
| 1、非空 | notNull=true或nullable=true | |
| 2、包含空格的非空 | notNullWithoutTrim=true | |
| 3、数字（小数） | isNumber=true或type=number或type=1或type=2 | max或maxValue（必须是数字，如果两个都给出，只使用前者） min或minValue（必须是数字，如果两个都给出，只使用前者） integerDigits整数位数（必须是数字） decimalDigits或dotNumber小数位数（必须是数字，如果两个都给出，只使用前者） |
| 4、数字（整形） | isInteger=true | max或maxValue（必须是数字，如果两个都给出，只使用前者） min或minValue（必须是数字，如果两个都给出，只使用前者） |
| 5、电子邮件 | isEmail=true或type=email | |
| 6、字符串 | isWord=true或type=string或type=8或type=9 | character=""，将所有你认为是特殊字符的字符放进去，例如character="!@#$%^&*()"【单引号需要在前面加\】。 （如果特殊字符中存在中划线 - 的话，必须放在第一个） （如果特殊字符中存在脱字符 ^ 的话，必须不能放在第一个） |
| 7、不允许为默认值 | isDeaultValue=true、deaultValue=一个给定的值 | |
| 8、固定电话号码 | type=telephone | |
| 9、手机号码 | type=mobilePhone | |
| 10、日期类型（要求格式：yyyy-MM-dd） | type=3 | |
| 11、日期时间类型（要求各市：yyyy-MM-dd HH:mm:ss） | type=4 | |
| 12、最大长度 | maxLength=一个数字 | |
| 13、最小长度 | minLength=一个数字 | |
| 14、自定义正则表达式 | regExp=一个自定义的正则表达式，例如/[\d+]/ | |
| 15、自定义校验函数 | 主属性：func=一个自己定义的函数（必须是全局函数，可以是匿名函数） （该函数可以没有返回值（js中没有返回值的话默认为null），返回null或false表示校验未通过） | |
| 16、自定义错误提示 | 主属性：errorMsg=一个字符串，例如:请输入数字！ | |
| 17、js设置校验规则 请看下方的MxtCheckMsg方法 |
方法
| 方法名 | 描述 |
| MxtCheckForm | 校验一个form所有的输入框，校验规则由输入框的validate属性指定 最多允许两个参数 第一个参数可以是一个容器(Dom对象,例如一个form)的ID，也可以是一个容器（Dom对象） 第二个参数是一个jquery选择器，表示校验容器内的哪些输入框元素。 |
| MxtCheckInput | 校验单个输入框，校验规则由输入框的validate属性指定 只允许一个参数 可以是一个输入框的Id，也可以是一个输入框Dom对象。 |
| MxtCheckMsg | 使用js添加校验信息 允许两个参数，第一个是校验信息，必须；第二个参数可选，表示容器Id 例子如下： MxtCheckMsg( { "input[name=telephone]" : { type:'string',name:'电话',notNull:true,errorMsg:'动态修改的电话校验，不能为空！' } } , "tableForm"); 第一个参数应该是一个js对象，key表示一个jQuery选择器，value是校验信息（与validate属性类似） 第二个参数应该是一个容器Id，或者也可以是一个jQuery对象或Dom对象。 |
分组框
是围绕在一组相关控件周围的带标签的矩形边框。它提供了一种通过视觉展示控件关系的方法。
<fieldset>
<legend>分组框</legend>
</fieldset>
链接
用于导航至其他页面、窗口或帮助主题，也可用于显示定义、启动命令或设置选项。链接可能是文本或图像，通常用已访问或未访问的系统链接颜色来显示，以表明它是可以被单击的。
搜索框
用于在大量数据中通过筛选或高亮匹配项的方式快速定位至特定的对象或文本。
<ul class="common_search">
<li id="inputBorder" class="common_search_input">
<input class="search_input" type="text">
</li>
<li>
<a class="common_button common_button_gray search_buttonHand" href="javascript:void(0)">
<em></em>
</a>
</li>
</ul>
实现方案：在固定位置显示查询条件,适用于绝对布局,[如:我们的列表关键页面查询条件]
$(document).ready(function(){
var searchobj = $.searchCondition({
top:33,
right:10,
//left:10,
//bottom:10,
//点搜索按钮取值
searchHandler: function(){
var ssss = searchobj.g.getReturnValue();
alert($.toJSON(ssss))
},
conditions: [{
id: 'title',//查询条件生成input/select/data的id
name: 'title',//查询条件生成input/select/data的name
type: 'input',//类型: [input:输入框] [select:下拉选择] [datemulti:时间段]
text: '标题',//查询条件名称
value: 'subject'//查询条件value
}, {
id: 'importent',
name: 'importent',
type: 'select',
text: '重要程度',
value: 'importantLevel',
codecfg : "codeType:'java',codeId:'com.seeyon.apps.samples.test.enums.MyEnums'",
items: [{
text: '普通',
value: '0'
}, {
text: '重要',
value: '1'
}, {
text: '非常重要',
value: '2'
}]
}, {
id: 'spender',
name: 'spender',
type: 'input',
text: '发起人',
value: 'startMemberName'
}, {
id: 'datetime',
name: 'datetime',
type: 'datemulti',
text: '发起时间',
value: 'createDate',
dateTime: true
}]
});
//设置默认值
searchobj.g.setCondition("title","aaaaa");
});
属性
| 属性 | 类型 | 描述 |
| searchHandler | function | 点击查询按钮执行的操作 |
| id | 查询条件生成input/select/data的id | |
| name | 查询条件生成input/select/data的name | |
| type | 类型: [input:输入框] [select:下拉选择] [datemulti:时间段] | |
| text | 查询条件名称 | |
| value | 查询条件value | |
| validate | false | 输入框不验证特殊 |
| items | 查询类型为select的时候子查询select | |
| codecfg | select增加codecfg以支持框架级动态枚举配置[codecfg : "codeType:'java',codeId:'com.seeyon.apps.samples.test.enums.MyEnums'"] |
方法
| 方法 | 描述 |
| searchobj.p | 通过searchobj.p获取查询组件变量 |
| searchobj.p.id | 通过searchobj.p.id获取查询条件select id[查询条件最终操作的还是一个select，通过id可以获取这个select对象] |
| searchobj.g.getReturnValue() |
获取查询条件结果[返回null表示查询调价没有]任何变化，查询条件变化则返回json数组] 例如: input：{'type':'input','condition':'name','value':_result} select：{'type':'select','condition':'importent','value':_result} datemulti：{'type':'datemulti','condition':'datetime','value':['2012-12-12 12:00',''2012-12-12 18:00'']} |
|
searchobj.g.hideItem(id) 或者 searchobj.g.hideItem(id,bool) |
隐藏select下拉项 参数1：选项的id 参数2：是否初始化为默认项 |
| searchobj.g.showItem(id) | 显示select下拉项，参数为：选项的id |
| searchobj.g.setCondition('datetime', '2012-10-25 17:49', '2012-10-25 17:49'); | 设置条件默认值 |
| searchobj.g.clearCondition(); | 清空条件值 |
表格
表格是由最简单的行、列、单元格构成的，根据浏览的目的和希望突出的信息不同，行、列、单元格都可以通过一些变化进行强调，这是将信息通过表格传达出去的最为根本的使用方式。
| 1 | 2 | 3 |
|---|---|---|
| 1 | 2 | 3 |
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="only_table">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr class="erow">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
| 1 | 2 | 3 |
|---|---|---|
| 1 | 2 | 3 |
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="only_table edit_table">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
| 固定表头 | 2 | 3 |
|---|
| start | 2 | 3 |
| end | 2 | 3 |
| end | 2 | 3 |
| end | 2 | 3 |
| end | 2 | 3 |
| end | 2 | 3 |
| end | 2 | 3 |
| end | 2 | 3 |
<div class="list_content relative" style="height:100px;">
<div class=" table_head relative">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="only_table edit_table">
<tbody>
<tr>
<th width="10%">分离表格</th>
<th width="10%">2</th><
<th width="10%">3</th>
</tr>
</tbody>
</table>
</div>
<div class="table_body absolute">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="only_table edit_table">
<tbody>
<tr>
<td>start</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td width="10%">end</td>
<td width="10%">2</td>
<td width="10%">3</td>
</tr>
</tbody>
</table>
</div>
</div>
列表
用于通过单选或多选的方式，查看并操作一个数据对象集合，支持带标题的多个列、按列全局排序、更改列的宽度和顺序、拖拽排序、列信息可配置、列视图切换操作。
-------------------------------------xml-----------------------------------------------
<%--spring-samples-manager.xml-中配置manager-----------------%>
<bean id="testPagingManager" class="com.seeyon.apps.samples.TestPagingManagerImpl" />
-------------------------------------java----------------------------------------------
<%--TestPagingManagerImpl.java-manager层方法-----------------%>
@Override
public FlipInfo testPaging(FlipInfo fi, Map params) throws BusinessException {
StringBuffer sql = new StringBuffer();
Map p = new HashMap();
if (params.get("orgid") != null) {
sql.append("orgid=:orgid");
p.put("orgid", Long.parseLong((String) params.get("orgid")));
}
if (params.get("orgname") != null) {
if (sql.length() > 0)
sql.append(" and");
sql.append(" orgname like :orgname");
p.put("orgname", "%" + params.get("orgname") + "%");
}
if (params.get("parentid") != null) {
if (sql.length() > 0)
sql.append(" and");
sql.append(" parentid=:parentid");
p.put("parentid", Long.parseLong((String) params.get("parentid")));
}
sql.insert(0, "from Org o" + (sql.length() > 0 ? " where " : ""));
List result = DBAgent.find(sql.toString(), p, fi);
return fi;
}
-------------------------------------jsp-----------------------------------------------
<%@ page contentType="text/html; charset=utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/jsp/common/common.jsp"%>
<html>
<head>
<title>AjaxPagingGrid测试</title>
<script text="text/javascript">
$(function() {
var t = $("#mytable").ajaxgrid({
click : clk,//单击事件
dblclick : dblclk,//双击事件
render : rend,//function rend(txt,rowData, rowIndex, colIndex,colObj)
//自定义渲染器，
//可以对单元格显示数据和样式进行加工展现，据对象，
//txt为表身渲染单元格文本，rowData为渲染当前行数,rowIndex为当前行，colIndex为当前列,
//colObj为表头对象的width，name，display，align以及sortType等等
colModel : [ {
display : 'id',
name : 'orgid',
width : '40',
sortable : false,
align : 'center',
type : 'checkbox'
}, {
display : '组织名称',
name : 'orgname',
width : '180',
sortable : true,
align : 'left'
}, {
display : '父组织ID',
name : 'parentid',
width : '180',
sortable : true,
align : 'left',
codecfg : "codeId:'test_code'"//定义框架自动枚举转换规则，具体请参考“枚举组件”部分说明
} ],
searchitems : [ {
display : '组织ID',
name : 'orgid'
}, {
display : '组织名称',
name : 'orgname'
} ],
width : 1200,
height : 400,
managerName : "testPagingManager",
managerMethod : "testPaging"
});
function rend(txt,rowData, rowIndex, colIndex,colObj) {
if (c == 0)
return '<input type="checkbox" value="'+txt+'">';
else
return txt;
}
function clk(data, r, c) {
$("#txt").val("clk:" + $.toJSON(data) + "[" + r + ":" + c + "]");
}
function dblclk(data, r, c) {
$("#txt").val("dblclk:" + $.toJSON(data) + "[" + r + ":" + c + "]");
}
$("#btn").click(function() {
var v = $("#mytable").formobj({//获取表格数据对象，用于ajax或其它处理操作,另外，还可以使用$("#mytable").ajaxgridData(objs)手工加载数据，objs结构为{ rows : [], page : 0, total : 0 }，rows为数据对象数组，page为页，total为总记录数
gridFilter : function(data, row) {
return $("input:checkbox", row)[0].checked;
}
});
alert($.toJSON(v));
});
});
</script>
</head>
<body class="body-pading" leftmargin="0" topmargin="" marginwidth="0" marginheight="0">
<input id="txt" type="text" size="100">
<input id="btn" type="button" value="取数">
<div class="classification">
<div class="title">grid示例</div>
<div class="list">
<div class="button_box clearfix">
<table id="mytable" style="display: none"></table>
</div>
</div>
</div>
<div id="searchHTML">
组织ID：<input name="orgid" type="text" />组织名称<input name="orgname" type="text" />
</div>
</body>
</html>
参数
| 参数 | 类型 | 描述 |
| colModel |
colModel : [ {
display : 'id',//对应数据中的字段名
name : 'orgid',
width : '40%',//宽度可为数字或百分比[字符串]
type : 'checkbox',//是否是checkbox或radio[一般只有第一列显示]
hide:false//默认显示与否,
sortType:'number', //按数字排序
},{
display : 'id1',//对应数据中的字段名
name : 'orgid1',
width : '40%',//宽度可为数字或百分比[字符串]
type : 'date',//是否是checkbox或radio[一般只有第一列显示]
hide:false//默认显示与否,
sortType:'date',//按时间排序
isToggleHideShow:false//控制在表头下拉菜单中是否显示列项[默认把name为'id','name','title'隐藏了]
}]
|
|
| managerName | 后台Manager的名称（必须提供该参数） | |
| managerMethod | 后台对应Manager的方法名（必须提供该参数） | |
| colModel | 列描述，要求是一个数组（必须提供该参数）其中的每一个元素都应该是一个Object | |
| click | 单击事件返回值:row(行json对象),colIndex(所在列index值),rowIndex(所在行index值) | |
| dbclick | 双击事件返回值:row(行json对象),colIndex(所在列index值),rowIndex(所在行index值) | |
| parentId | 指定父元素ID，来适应其宽高 | |
| width | 宽度值[px],默认auto表示根据每列的宽度自动计算 | |
| height | 高度[px]，默认200px | |
| resizable | 是否可伸缩 | |
| usepager | 是否分页[false] | |
| rpMaxSize | 每页显示条数最大值[200] | |
| onChangeSort | 当改变排序时执行的函数，默认为false。当该属性设置时，组件不再使用自己的查询机制。 | |
| onCurrentPageSort | 是否只对当前页的数据进行排序，默认为false。当设置为true时，只对当前页的数据进行排序。 | |
onSuccess |
成功后执行的函数 | |
| slideToggleBtn | bool | 上下伸缩按钮是否显示 |
slideToggleUpHandle |
自定义列表上箭头事件 | |
slideToggleDownHandle |
自定义列表下箭头事件 | |
| resizeGridUpDown | 动态设置分割条位置，参数为'up','middle','down'。grid.grid.resizeGridUpDown('up') | |
| customize | 是否启用个性化存储，默认为true | |
| customId | 个性化存储id ，默认值为$.ctx._currentPathId,自定义的化在默认值后添加后缀,例如customId : $.ctx._currentPathId_+"${xxx.ff}"; |
回调方法
| 方法 | 描述 |
| .p | 获取grid所有参数 |
| .grid | 获取grid处理方法 |
| .grid.getSelectRows() | 获取选中行数组，例如[{"id": 10001, ... },{"id": 10001, ... }] |
.grid.resizeGridUpDown("middle")
//up，down |
列表显示上下结构 |
| .callBackTotle | 设置totle条数回调函数 类似:render |
翻页
当数据太多(或者数据项列表太长)一页显示不下时，将数据项列表拆分进一系列的页中。提供“上一页”和“下一页”的链接让用户可以访问被分页的数据，同时提供“第一页”和“最后一页”的链接。
左对齐
<div class="common_over_page align_left">
每页显示
<input type="text" class="common_over_page_txtbox">
<span class="margin_r_20">条/共6条</span>
<a href="javascript:;" class="common_over_page_btn" title="首页">
<em class="pageFirst"></em>
</a>
<a href="javascript:;" class="common_over_page_btn" title="上一页">
<em class="pagePrev"></em>
</a>
<span class="margin_l_10">第</span>
<input type="text" class="common_over_page_txtbox">页/13页
<a href="javascript:;" class="common_over_page_btn" title="下一页">
<em class="pageNext"></em>
</a>
<a href="javascript:;" class="common_over_page_btn" title="尾页">
<em class="pageLast"></em>
</a>
<a href="javascript:void(0)" id="A2" class="common_button common_button_gray margin_lr_10">go</a>
</div>
实现右对齐:
右对齐只需要把中对齐中“align_left”改为“align_right”即可
面包屑
反映当前页面在软件层次结构中的位置，显示所有父级页面的链接，向上追溯到主页面为止， 帮助用户轻松浏览软件层次结构。
<div class="common_crumbs">
<span class="margin_r_10">当前位置:</span><a href="javascript:;">文档中心</a><span class="common_crumbs_next margin_lr_5">-</span><a href="javascript:;" class="last">业务培训</a>
</div>
<div class="common_crumbs_disable">
<span class="margin_r_10">当前位置:</span><a href="javascript:;">文档中心</a><span class="margin_lr_5">-</span><a href="javascript:;">业务培训</a>
</div>
新老框架的区别
新框架:<div class="comp" comp="type:'breadcrumb',code:资源code"></div>
老框架:
<script>
showCtpLocation(code,{html:拼接的字符串});
</script>
页面标题
[1.新框架页面标题]
<div class="page_header clearfix">
<a href="javascript:void(0)" class="page_header_more">[更多]</a><--如果没有就不要拷贝这一行-->
<span class="page_header_title">待办事项</span><span class="page_header_number_box">(<span class="page_header_number">5</span>)</span>
</div>
[2.迁移页面标题]
迁移页面基本都有标题，基本不用修改，但有的页面的标题前面有空格，需要删除;有的标题区域下没有下边框，需要使用添加边框。
| 边框 | class |
| 上边框 | border-top |
| 下边框 | border-bottom |
| 左边框 | border-left |
| 右边框 | border-right |
如果需要新添加,则:
<div class="page_header clearfix">
<a href="javascript:void(0)" class="page_header_more">[更多]</a><--如果没有就不要拷贝这一行-->
<span class="page_header_title">待办事项</span><span class="page_header_number_box">(<span class="page_header_number">5</span>)</span>
</div>
向导菜单
导航菜单示例
<div class="example_box">
<div class="step_menu">
<ul>
<li class="first_step current">
<b></b>
<span>基础操作</span>
</li>
<li>
<b></b>
<span>操作设置</span>
</li>
<li>
<b></b>
<span>查询统计设置</span>
</li>
<li>
<b></b>
<span>应用绑定</span>
</li>
<li class="last_step">
<span>触发设置</span>
</li>
</ul>
</div>
<br>
<div class="step_menu">
<ul>
<li class="first_step step_complate">
<b></b>
<span>基础操作</span>
</li>
<li class="step_complate_last">
<b></b>
<span>操作设置</span>
</li>
<li class="current">
<b></b>
<span>查询统计设置</span>
</li>
<li>
<b></b>
<span>应用绑定</span>
</li>
<li class="last_step ">
<span>触发设置
</li>
</ul>
</div>
<br>
<div class="step_menu">
<ul>
<li class="first_step step_complate">
<b>
<span>基础操作
</li>
<li class="step_complate">
<b></b>
<span>操作设置</span>
</li>
<li class="step_complate">
<b></b>
<span>查询统计设置</span>
</li>
<li class="step_complate_last">
<b></b>
<span>应用绑定</span>
</li>
<li class="last_step current">
<span>触发设置</span>
</li>
</ul>
</div>
<br>
<div class="step_menu">
<ul>
<li class="first_step step_complate">
<b></b>
<span>基础操作</span>
</li>
<li class="step_complate_last">
<b></b>
<span>操作设置</span>
</li>
<li class="current">
<b></b>
<span>查询统计设置</span>
</li>
<li class="step_complate">
<b></b>
<span>应用绑定</span>
</li>
<li class="last_step step_complate">
<span>触发设置</span>
</li>
</ul>
</div>
回到顶部按钮
GoTo_Top({ showHeight: 100, marginLeft: 500, sTitle:"回到顶部" });
属性
| 属性 | 类型 | 描述 |
| obj | jquery对象 | 出现滚动条的jquery对象[默认：$(window)] |
| btnClass | string | 按钮的class名称[默认："GoTo_Top"] |
| showHeight | number | 滚动大于多少后，出现出现按钮[默认：obj的高度] |
| marginLeft | number | 按钮相对左边的距离[默认：798] |
| sTitle | string | 显示按钮的提示信息 |
| nGoToHeight | number | 指定回到哪个位置（默认是顶部） |
Layout
Tip:
禁止在“code区域”外添加元素，否则会导致页面显示错位！！！
<body>
<div id='layout' class="comp" comp="type:'layout'">
<div class="layout_north" layout="height:100,maxHeight:100,minHeight:30">
上边区域
</div>
<div class="layout_east" layout="width:200,minWidth:50,maxWidth:200">
右边区域
</div>
<div class="layout_center" layout="border:false">
中间区域
</div>
<div class="layout_west" layout="width:200,minWidth:50,sprit:false,maxWidth:300">
左边区域
</div>
<div class="layout_south" layout="height:50,maxHeight:300,minHeight:30">
下边区域
</div>
</div>
</body>
1.设置div的class为comp组件，同时设置comp属性type为layout，框架会自动将其作布局处理
2.class必须为layout_north的布局div，用layout属性进行宽高设置和最大、最小宽度/高度设置
3.class必须为layout_east的布局div，用layout属性进行宽高设置和最大、最小宽度/高度设置
4.class必须为layout_center的布局div，用layout属性进行宽高设置和最大、最小宽度/高度设置，内部还可进行布局嵌套定义
5.class必须为layout_west的布局div，用layout属性进行宽高设置和最大、最小宽度/高度设置
6.class必须为layout_south的布局div，用layout属性进行宽高设置和最大、最小宽度/高度设置
通过var layout = $("#layout").layout()函数获取Layout对象，用于动态调整布局宽度、高度，如layout.setEast(300);
属性
| 属性 | 类型 | 描述 |
| sprit | boolean | 是否显示中间拖动条 |
| border | boolean | 是否显示边线 |
| spiretBar | json |
是否显示中间上下/左右点击btn 及自定义分割条处理事件处理方式不一样，north 和 south为handlerB和handlerT;west 和 east为handlerL和handlerR
//上边区域
spiretBar: {
show: true,
handlerB: function () {
layout.setNorth(98);
},
handlerT: function () {
layout.setNorth(0);
}
}
//下边区域
spiretBar: {
show: true,
handlerB: function () {
layout.setSouth(0);
},
handlerT: function () {
layout.setSouth(48);
}
}
//右边区域
spiretBar: {
show: true,
handlerL: function () {
layout.setEast(198);
},
handlerR: function () {
layout.setEast(0);
}
}
//左边区域
spiretBar: {
show: true,
handlerL: function () {
layout.setWest(0);
},
handlerR: function () {
layout.setWest(198);
}
}
|
方法
| 名称 | 描述 |
| setNorth(int) |
//设置,北边区域高度:
//var layout = $("#layout").layout();
layout.setNorth(40);
|
| setSouth(int) |
//设置,南边区域高度:
//var layout = $("#layout").layout();
layout.setSouth(40);
|
| setWest(int) |
//设置,西边区域宽度:
//var layout = $("#layout").layout();
layout.setWest(40);
|
| setEast(int) |
//设置，右边区域宽度:
//var layout = $("#layout").layout();
layout.setEast(40);
|
| setNorthSp(bool); |
//设置，上边区域中间拖动条:
//var layout = $("#layout").layout();
layout.setNorthSp(false);
|
| setSouthSp(bool); |
//设置，下边区域中间拖动条:
//var layout = $("#layout").layout();
layout.setSouthSp(false);
|
| setWestSp(bool); |
//设置，左边区域中间拖动条:
//var layout = $("#layout").layout();
layout.setWestSp(false);
|
| setEastSp(bool); |
//设置，右边区域中间拖动条:
//var layout = $("#layout").layout();
layout.setEastSp(false);
|
静态布局
修改“头部”的高度：需要修改 .stadic_head_height 中的height:30px和 .stadic_body_top_bottom 中的top:30px。
修改“尾部”的高度：需要修改 .stadic_footer_height 中的height:30px和 .stadic_body_top_bottom 中的bottom:30px。
修改“左部”的宽度：需要修改 .stadic_right .stadic_content 中的margin-left:270px和 .stadic_left 中的width:265px。
“中间区域”宽度为自适应。
上下
<!DOCTYPE html>
<html class="h100b over_hidden">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>静态布局-上下</title>
<style>
.stadic_head_height{
height:30px;
}
.stadic_body_top_bottom{
bottom: 0px;
top: 30px;
}
</style>
</head>
<body class="h100b over_hidden">
<div class="stadic_layout">
<div class="stadic_layout_head stadic_head_height">
<!--code区域-->我在上边区域
</div>
<div class="stadic_layout_body stadic_body_top_bottom">
<!--code区域-->我在下边区域
</div>
</div>
</body>
</html>
上中下
<!DOCTYPE html>
<html class="h100b over_hidden">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>静态布局-上中下</title>
<style>
.stadic_head_height{
height:30px;
}
.stadic_body_top_bottom{
top: 30px;
bottom: 20px;
}
.stadic_footer_height{
height:20px;
}
</style>
</head>
<body class="h100b over_hidden">
<div class="stadic_layout">
<div class="stadic_layout_head stadic_head_height">
<!--code区域-->我在上边区域
</div>
<div class="stadic_layout_body stadic_body_top_bottom">
<!--code区域-->我在中间区域
</div>
<div class="stadic_layout_footer stadic_footer_height">
<!--code区域-->我在下边区域
</div>
</div>
</body>
</html>
左右
<!DOCTYPE html>
<html class="h100b over_hidden">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>静态布局-左右</title>
<style>
.stadic_right{
float:right;
width:100%;
height:100%;
position:absolute;
z-index:100;
overflow:auto;
}
.stadic_right .stadic_content{
margin-left:270px;
height:100%;
}
.stadic_left{
width:265px;
float:left;
position:absolute;
height:100%;
z-index:300;
}
</style>
</head>
<body class="h100b over_hidden">
<div class="stadic_layout">
<div class="stadic_right">
<div class="stadic_content">
<!--code区域-->我在中间区域
</div>
</div>
<div class="stadic_left">
<!--code区域-->我在左边区域
</div>
</div>
</body>
</html>
上下左右
<!DOCTYPE html>
<html class="h100b over_hidden">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>静态布局-上下左右</title>
<style>
.stadic_head_height{
height:30px;
}
.stadic_body_top_bottom{
top: 30px;
bottom: 20px;
}
.stadic_footer_height{
height:20px;
}
.stadic_right{
float:right;
width:100%;
height:100%;
position:absolute;
z-index:100;
}
.stadic_right .stadic_content{
overflow:auto;
margin-left:270px;
height:100%;
}
.stadic_left{
float:left;
width:265px;
height:100%;
position:absolute;
z-index:300;
}
</style>
</head>
<body class="h100b over_hidden">
<div class="stadic_layout">
<div class="stadic_layout_head stadic_head_height">
<!--code区域-->我在上边区域
</div>
<div class="stadic_layout_body stadic_body_top_bottom clearfix">
<div class="stadic_right">
<div class="stadic_content">
<!--code区域-->我在中间区域
</div>
</div>
<div class="stadic_left">
<!--code区域-->我在左边区域
</div>
</div>
<div class="stadic_layout_footer stadic_footer_height">
<!--code区域-->我在下边区域
</div>
</div>
</body>
</html>
只能在<!--code body-->所在的div内添加内容
其他位置添加内容，会导致页面变形。
一般都直接应用在<body>里面
<body>中不再添加其他内容，否则会导致页面变形。
时间控件
可选择不同的时间节点，用于设置时间点及时间段。
显示时间:showsTime:true
<input id="mycal" type="text" class="comp" comp="type:'calendar',ifFormat:'%Y-%m-%d %H:%M',showsTime:true,
cache:false,isClear:true,clearBlank:false,onUpdate:aaa"/>
<script>
//绑定选中点击事件
function aaa(){
alert("aaaa");
}
</script>
使用说明
显示时间:showsTime:true
指定显示格式:ifFormat:'%Y-%m-%d %H:%M'
调整分钟步长:minuteStep:1
图标外部显示:isOutShow:true
是否显示取消按钮:clearBlank:true/false
是否显示按钮:isClear:true/false
设置默认时间:dateString:'2012-12-16 17:59'
使用实例
开始时间:
结束时间：
开始时间:
<input id="fromdate" type="text" class="comp" comp="type:'calendar',dateString:'2012-12-16 17:59',onUpdate:checkfrom,ifFormat:'%Y-%m-%d %H:%M',showsTime:true,cache:false"/>
结束时间：
<input id="todate" type="text" value="2012-12-16 17:59" class="comp" comp="type:'calendar',onUpdate:checkto,ifFormat:'%Y-%m-%d %H:%M',showsTime:true,cache:false"/>
属性
| 属性 | 类型 | 描述 |
| displayArea | string | 要绑定日期控件的ID |
| ifFormat | string | 日期选择结果的格式 |
| showsTime | boolean | 是否显示时间选择 |
| autoShow | boolean | 是否直接显示时间日历 |
| dateString | string | 控件打开显示的默认日期 |
| position | [] | 显示的相对位置[10,10] |
onUpdate |
function | 选择日期后执行的方法 |
弹出框
<a href="javascript:showMessageBox0()" class="common_button common_button_gray">html</a>
<script type="text/javascript">
function showMessageBox0() {
var dialog = $.dialog({
id: 'html',
htmlId: 'htmlId',
height:100,
title: 'html',
bottomHTML:"<label for='Checkbox1' class='margin_r_10 hand'>"+
"<input type='checkbox' value='0' id='Checkbox1' name='option' class='radio_com'>选项1"+
"</label>",
overflow:'hidden',
buttons: [{
//id: 'ok',
text: "button1",
handler: function () {
//dialog.enabledBtn('cancel');
dialog.close({isFormItem:true});
}
}, {
//id: 'cancel',
//disabled: true,
//hide:true,
text: "button2",
handler: function () {
//dialog.disabledBtn('ok');
dialog.close();
}
}]
});
dialog.setTitle('新名称');
}
</script>
<a href="javascript:showMessageBox1()" class="common_button common_button_gray">url11</a>
function showMessageBox1() {
dialog = $.dialog({
id: 'url',
url: 'messageBox.html',
width: 3000,
height: 400,
title: 'url',
transParams:{name:"myName"},
checkMax:true,
closeParam:{
'show':true,
autoClose:false,
handler:function(){
//var d = dialog.getClose();
alert(1)
}
},
buttons: [{
text: "button1",
handler: function () {
dialog.startLoading()
var oooooooooo = dialog.getReturnValue({ 'name': 'macj' });
// alert(oooooooooo)
//dialog.close();
}
}, {
text: "button2",
handler: function () {
dialog.endLoading()
//dialog.close();
}
}]
});
}
属性
| 属性 | 类型 | 描述 |
| title | 窗口名称 | |
| html | 内容显示传入的html代码 | |
| url | 内容显示iframe，src为传入的ur | |
| width | 内容区宽度 | |
| height | 内容区高度 | |
| buttons |
数组:按钮及事件 buttons:[{ text: "确认", isEmphasize: true, //蓝色按钮 handler: function(){ alert('handler') } },{ text: "取消", handler: function(){ alert('handler') } }] |
|
| isDrag | 是否允许拖拽 | |
| type | 是'dialog'还是'panel',默认为'dialog' | |
| htmlId | 显示改id内的内容 | |
targetWindow |
跨iframe显示[window.parent]注：window必须存在 | |
closeParam |
关闭按钮参数[show：是否显示关闭按钮,参数true or false], [autoClose:点击关闭按钮是否自动关闭窗口,参数true or false], [handler:点击关闭后调用的方法],默认值:{'show':true,handler:function(){}} |
|
transParams |
当url不为空时即弹出窗口中加载的是另外的窗口时，可以通过transParams传参数到弹出窗口中，在子页面中通过window.parentDialogObj[id]获取窗口对象，然后调用getTransParams()来获取传过来的参数 | |
| checkMax | 检查弹出窗口是否超过浏览器可视区域 |
方法
| 方法 | 描述 |
| close() | 关闭窗口:dialog.close(); |
| getReturnValue() | 获取iframe页面中OK()方法返回值:dialog.getReturnValue(); |
| disabledBtn('按钮id') |
设置按钮不可用:dialog.disabledBtn('按钮id')
var dialog = $.dialog({
id: 'html',
htmlId: 'htmlId',
title: 'html',
buttons: [{
id: 'ok',
text: "button1",
handler: function () {
//dialog.enabledBtn('cancel');
dialog.close();
}
}, {
id: 'cancel',
//disabled: true,//按钮默认是否可用
//hide:true,//按钮默认是否可见
text: "button2",
handler: function () {
//dialog.disabledBtn('ok');
dialog.close();
}
}]
});
|
| enabledBtn('按钮id') | 设置按钮可用dialog.enabledBtn('按钮id') |
| hideBtn('按钮id') | 设置按钮不可见:dialog.hideBtn('按钮id') |
| showBtn('按钮id') | 设置按钮可见dialog.showBtn('按钮id') |
| reSize(json) | 设置dialog的大小dialog.reSize({width:300,height:300}) |
| getMin(json) | 调用欠入页面中MIN()方法:dialog.getMin(json); |
| getMax(json) | 调用欠入页面中MAX()方法:dialog.getMax(json); |
| getClose(json) | 调用欠入页面中CLOSE()方法:dialog.getClose(json); |
| getWidth() | 获取内容区域宽度:dialog.getWidth(); |
| getHeight() | 获取内容区域高度:dialog.getHeight(); |
| reloadUrl(url) | 重新设置url,如果不传参,为声明dialog的url参数:dialog.reloadUrl("http://www.qq.com"); |
setTitle(title) |
重新设置title |
| window.parentDialogObj[id] | 子页面获取dialog对象 |
| getTransParams() | 子页面获取dialog参数【window.parentDialogObj[id].getTransParams()】 |
| startLoading() | 显示遮罩 |
| endLoading() | 隐藏遮罩 |
提示窗口
//alert窗口
var alertObj = $.alert("这个是alert窗口!");
//提示信息
var infor = $.infor("这个是提示信息!");
//confirm
var confirm = $.confirm({
'msg': '点击按钮后执行某个方法!',
//绑定自定义事件
ok_fn: function () { alert('确定后执行，自定义方法!'); },
cancel_fn:function(){alert('取消后执行，自定义方法!');}
});
//错误对话框
var error = $.error("这个是错误对话框!");
//自定义
var random = $.messageBox({
'type': 100,
'msg': 'this is msg content!',
buttons: [{
id:'btn1',
text: "button1",
handler: function () { alert('handler') }
}, {
id:'btn2',
text: "button2",
handler: function () { alert('handler') }
}]
});
使用规范
| 红色叉子 | 是错误 、警告（只看警告结果，不可选择操作的） |
| 黄色叹号 | 警告（结果用户可选择）、询问（需要强调的） |
| 蓝色问号 | 询问（一般的询问，不需要很强调的） |
| 绿色对勾 | 正确操作的反馈 |
属性
| 属性 | 类型 | 描述 | ||||||||||||||||||||||||
| type | 消息窗口类型 | |||||||||||||||||||||||||
|
||||||||||||||||||||||||||
| title | 消息窗口名称 | |||||||||||||||||||||||||
| imgType | 消息窗口图片类型(0:成功)--(1:操作失败)--(2:警告)--(3:询问) | |||||||||||||||||||||||||
| msg | y提示信息内容 | |||||||||||||||||||||||||
| ok_fn | 点击确定后执行的函数 | |||||||||||||||||||||||||
| cancel_fn | 点击取消后执行的函数 | |||||||||||||||||||||||||
| yes_fn | 点击是后执行的函数 | |||||||||||||||||||||||||
| no_fn | 点击否后执行的函数 | |||||||||||||||||||||||||
| retry_fn | 点击重试后执行的函数 | |||||||||||||||||||||||||
| detail_fn | 点击详情后执行的函数 | |||||||||||||||||||||||||
| close_fn | 点击右上角 X 调用的方法 | |||||||||||||||||||||||||
| buttons | 自定义按钮及事件 | |||||||||||||||||||||||||
| isFrountEvent | 点击按钮后是否先执行自定义事件[默认先关闭窗口再执行自定义事件] | |||||||||||||||||||||||||
方法
| 方法 | 描述 |
| close() | 关闭窗口 |
var win = new MxtMsgBox({
'type': 0,
'msg': 'this is msg content!',
ok_fn:function(){alert('确定后执行，自定义方法test()!');}
});
//win.close();
toolbar区域
<div id="toolbar"></div>
属性
| 属性 | 类型 | 描述 | ||||||
| toolbar中按钮参数 例[删除] | ||||||||
| id | id | |||||||
| name | 名称 | |||||||
| click | 点击事件 | |||||||
| className | 样式名称[按钮图标--从通用class中查询] | |||||||
| subMenu |
下拉菜单
|
|||||||
| toolbar中添加select | ||||||||
type |
type默认值不写，还可以定义为select和checkbox | string | ||||||
| text | string | 默认select的值 | ||||||
| value | string | 默认select的value | ||||||
| disable | boolean | 设置select置灰 | ||||||
| onchange | function | select的onchange方法 | ||||||
| items | 数组 | select的option选项 | ||||||
| className:"hidden" | 设置class:hidden时隐藏select | |||||||
| isPager | 默认为true，控制toolbar是否显示分页 | |||||||
方法
| 方法 | 描述 |
| selected() | 设置某一个toolbar按钮高亮显示用 toolbar.selected(id) |
| unselected() | 1、设置某一个toolbar按钮不高亮显示: toolbar.unselected(id) 2、unselected(),不添加参数，所有按钮取消高亮显示 |
| disabled() | 设置某一个toolbar按钮不可用 toolbar.disabled(id) |
| enabled() | 设置某一个toolbar可用 toolbar.enabled(id) |
| disabledAll() | 所有toolbar按钮不可用 toolbar.disabledAll() |
| enabledAll() | 所有toolbar按钮可用 toolbar.enabledAll() |
| hideBtn(id) | toolbar隐藏按钮[参数为按钮id]: toolbar.hideBtn(id) |
| showBtn(id) | toolbar显示按钮[参数为按钮id] toolbar.showBtn() |
更多参数
| 参数 | 类型 | 描述 |
| showSeparate | boolean | 设置toolbar是否显示分隔线，默认显示。(6.0默认不显示) |
tree
用于通过单选或多选方式查看和操作以层级方式组织的一组对象。
tree示例一[简单的tree]
tree示例二[添加checkbox的tree]
tree示例三[拖动接点]
tree示例四[可编辑tree]
tree示例五[两列tree--]
tree示例六[自定义tree--进度条]
tree示例七[自定义tree--右键菜单]
| 定义 | 用于通过单选或多选方式查看和操作以层级方式组织的一组对象。 |
| 复杂功能 |
对于树组件的一些复杂功能如下代码所示：
<script type="text/javascript" language="javascript">
$().ready(function() {
$("#tree").tree({
onClick : clk,//1
beforeDrag : beforeDrag,//2
beforeDrop : beforeDrop,//3
managerName : "testCRUDManager",//4
managerMethod : "testLoadAll",//5
idKey : "orgid",
pIdKey : "parentid",
nameKey : "orgname",
enableCheck : true,//6
enableEdit : true,//7
enableRename : true,//8
enableRemove : true,//9
asyncParam : {//10
orgname : '组织'
},
nodeHandler : function(n) {//11
n.open = true;//12
if (n.data.orgid == '1') {
n.isParent = true;//13
//n.drag = false;
//n.drop = false;
}
n.isParent = true;
},
render : function(name, data) {//14
return data.orgid + " - " + name;
}
});
function clk(e, treeId, node) {
alert($.toJSON(node.data));
//node.children[0].data 取第0个子节点的数据对象
}
function beforeDrag(treeId, treeNodes) {
if (treeNodes[0].drag === false) {
return false;
}
return true;
}
function beforeDrop(treeId, treeNodes, targetNode, moveType) {
return targetNode ? targetNode.drop !== false : true;
}
$("#selectedBtn").click(function() {
var nodes = $("#tree").treeObj().getSelectedNodes();//15
alert($.toJSON(nodes));
});
$("#checkedBtn").click(function() {
var nodes = $("#tree").treeObj().getCheckedNodes();//16
alert($.toJSON(nodes));
});
$("#asyncBtn").click(function() {
$("#tree").treeObj().reAsyncChildNodes(null, "refresh");//17
});
});
</script>
<body>
<input type="button" id="selectedBtn" value="已选择节点">
<input type="button" id="checkedBtn" value="已勾选节点">
<input type="button" id="asyncBtn" value="异步加载当前节点">
<div id="tree"></div>
</body>
详细文档>> |
| 1.onClick单击事件,function clk(e, treeId, node)，通过node.data可以取得点击节点的数据对象，node.children取得子节点数组 | |
| 2.beforeDrag树节点拖拽前事件，function beforeDrag(treeId, treeNodes)，第二个参数为当前正在拖拽的节点数组（支持多节点拖拽），返回false取消此次拖拽 | |
| 3.beforeDrop树节点拖拽后事件，function beforeDrop(treeId, treeNodes, targetNode, moveType) ，targetNode为目标节点，返回false取消此次拖拽 | |
| 4.managerName，异步树加载Manager在spring中配置的bean id | |
5.managerMethod，异步树加载Manager的方法名，该Manager方法只允许有一个Map参数，用于接收查询参数，当前展开节点id将以idKey属性名传入，另外还可以通过asyncParam配置其它异步树加载查询参数
|
|
| 6.enableCheck用于指定是否显示ckeckbox，默认为false | |
| 7.enableEdit用于指定是否允许树编辑，比如拖拽，修改节点名称，默认为false | |
| 8.enableRename用于指定是否允许树节点直接重命名，默认为false | |
| 9.enableRemove用于指定是否允许树节点直接删除，默认为false | |
| 10.asyncParam用于指定异步树加载时的其它定制查询参数 | |
| 11.nodeHandler节点处理器，在树节点加载过程中可以对节点相关属性进行设置，比如是否为父节点，是否展开等 | |
| 12.节点的open属性设置为true表示节点展开 | |
| 13.节点的isParent属性设置为true表示该节点为可展开父节点，在enableAsync为true时，展开该节点将触发异步数据加载 | |
14.render用于树节点展现渲染，function(name, data)，第一个参数为树节点显示名称，第二个参数为数据对象，返回值为渲染后的树节点
|
|
| 15.取得选择的节点列表 | |
| 16.取得选中checkbox的节点列表 | |
| 17.重新异步加载树节点，enableAsync为true时有效，reAsyncChildNodes(null, "refresh")，第一个参数为要重新加载的节点，null表示根节点，第二个参数为refresh表示强制重新加载，其它值则不强制加载 |
属性
| 属性 | 类型 | 描述 |
| iconSkin | class |
更换图标
treeAccount:单位[父节点]
treeDepartment:部门[父节点]
treeMyKnowledge:我的知识库[父节点]
treeAccountFile:单位文档[父节点]
treeGroupFile:集团文档[父节点]
treeProjectFile:项目文档[父节点]
treeEdocFile:公文文档[父节点]
treeCustomAccountFile:自定义单位文档[父节点]
treeCustomGroupFile:自定义集团文档[父节点]
treeCustomFile:自定义[父节点]
flie:文档[子节点]
account:单位[子节点]
department:部门[子节点]
collaboration:协同模板[子节点]
edoc:公文模板[子节点]
format:格式模板[子节点]
flow:流程模板[子节点]
treeCustomMenu:自定义树节点[父节点]
enumerateType:枚举类型[子节点]
enumerationClassification:枚举分类[子节点]
实例:在后台产生数据的时候，添加iconSkin属性
...
{
name: "父节点11 - 折叠",
iconSkin:'treeAccount',
children: [{
name: "叶子节点111--disabled",
iconSkin:'account'
}, {
name: "叶子节点112",
iconSkin:'flie'
}, {
name: "叶子节点113",
iconSkin:'department'
}, {
name: "叶子节点114",
iconSkin:'department'
}]
}
...
|
气球状提示
是一个小型的弹出窗口，用于通知用户出现非关键性问题或控件处于某种特殊情况。由图标、标题、正文文本组成，且所有这些部分都是可选的。气球状提示还带有一个尾部箭头以指示它的来源。通常这个来源是一个控件——该控件被称为所有者控件。
tooltip鼠标触发提示
//$("#testID").tooltip();//不传如参数:获取id为'testID'dom的tooltip属性值
$("#testID").tooltip({
event:true,
htmlID: 'tooltip_html'//内容优先级顺序[ htmlID、msg、tooltip属性]
});
tooltip指定位置提示
关闭按钮,class为tooltip_close
$(function () {
$.tooltip({
width: 300,
openAuto: true,
event: false,
openPoint: [50, 100],
htmlID: 'tooltip_html2',
direction: "BL"
});
})
属性
| 属性 | 类型 | 描述 | |||||||||||||||||||||||||
| targetId | string | 显示在targetId对象的下方 | |||||||||||||||||||||||||
| openAuto | bool | 自动显示[默认,false] | |||||||||||||||||||||||||
| openPoint | [number,number] | 显示指定的[left,top] | |||||||||||||||||||||||||
| direction | string
|
箭头的位置 | |||||||||||||||||||||||||
| event | bool | 是否根据 targetId和鼠标坐标 定位[默认,false] | |||||||||||||||||||||||||
| id | string | 可以指定tooltip的ID | |||||||||||||||||||||||||
| width | number | 用于设置tooltip宽度[默认,200] | |||||||||||||||||||||||||
| htmlID、msg、tooltip属性 | string | tooltip内容,内容优先级顺序[ htmlID、msg、tooltip属性] | |||||||||||||||||||||||||
| targetWindow | 跨iframe显示[window.parent]注：window必须存在，目前支持$.tooltip方式 |
打印
function printColl{
var printSubject = "标题";
var printsub = "printsub";
printsub = "<center><hr style='height:1px' class='Noprint'&lgt;</hr><span style='font-size:24px;line-height:24px;'>"+printsub.escapeHTML()+"</span></center>";
var printSubFrag = new PrintFragment(printSubject, printsub);
var printSenderInfo = "发起人信息";
var printSender = "printSender";
printSender = "<center><span style='font-size:12px;line-height:16px;'>" + printSender + "</span></center>";
var printSenderFrag = new PrintFragment(printSenderInfo, printSender);
var printColBody= "正文";
var colBody = $('#col-contentText').html();
var colBodyFrag = new PrintFragment(printColBody, colBody);
var cssList = new ArrayList();
cssList.add("/apps_res/collaboration/css/collaboration.css")
var pl = new ArrayList();
pl.add(printSubFrag);
pl.add(printSenderFrag);
pl.add(colBodyFrag);
printList(pl,cssList);
}
日程视图
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div id="top_left">
<a id="newMeeting" class="common_button common_button_gray" href="javascript:void(0)">新建会议</a>
<a id="newPlan" class="common_button common_button_gray" href="javascript:void(0)">新建计划</a>
<a id="newTask" class="common_button common_button_gray" href="javascript:void(0)">新建任务</a>
<a id="newEvent" class="common_button common_button_gray" href="javascript:void(0)">新建事件</a>
</div>
<div class="dhx_cal_prev_button" id="dhx_cal_prev_button">
</div>
<div class="dhx_cal_next_button" id="dhx_cal_next_button">
</div>
<div class="dhx_cal_date" id="dhx_cal_date">
</div>
<span id="top_right">
<div id="dhx_cal_common_tabs" class="common_tabs clearfix" style="position:absolute;top:12px; right:75px;">
<ul class="left">
<li class="left">
<a hidefocus="true" href="javascript:void(0)" class="border_b left" style="padding:0;">
<div class="dhx_cal_tab" name="day_tab" id="day_tab" style="text-align:center; position:initial;top:initial;white-space:initial;padding:0 10px;position:static;"></div>
</a>
</li>
<li class="left current">
<a hidefocus="true" href="javascript:void(0)" class="border_b"style="padding:0;">
<div class="dhx_cal_tab" name="week_tab" id="week_tab" style="text-align:center; position:initial;top:initial;white-space:initial;padding:0 10px;position:static;"></div>
</a>
</li>
<li class="left">
<a hidefocus="true" href="javascript:void(0)" class="border_b last_tab"style="padding:0;">
<div class="dhx_cal_tab" name="month_tab" id="month_tab" style="text-align:center; position:initial;top:initial;white-space:initial;padding:0 10px;position:static;"></div>
</a>
</li>
</ul>
</div>
<div href="#" class="common_drop_list dhx_cal_type" name="more_tab" id="more_tab">
<span class="ico16 arrow_1_b" id="itemize"> </span>
<div class="common_drop_list_content common_drop_list_content_action hidden dhx_cal_content" id="itemize_content">
<a href="javascript:void(0)" value="0">
<span class="dhx_cal_type_color cal_meeting">■</span>会议
</a>
<a href="javascript:void(0)" value="1">
<span class="dhx_cal_type_color cal_plan">■</span>计划
</a>
<a href="javascript:void(0)" value="2">
<span class="dhx_cal_type_color cal_task">■</span>任务
</a>
<a href="javascript:void(0)" value="3">
<span class="dhx_cal_type_color cal_event">■</span>事件
</a>
<a href="javascript:void(0)" value="2">
<span class="dhx_cal_type_color cal_col">■</span>到期协同
</a>
<a href="javascript:void(0)" value="3">
<span class="dhx_cal_type_color cal_doc">■</span>到期公文
</a>
</div>
</div>
</span>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
<div id="showEvent" class="border_all hidden h100b">
<p class="hidden padding_5 font_bold" id="all_DayTitle">全天/跨日:
<ul id="allday_event" class="padding_5">
</ul>
<ul class="border_t_dashed margin_t_5 padding_5" id="oneday_event">
</ul>
</div>
function init() {
scheduler.config.multi_day = true;//日视图、周视图允许显示全天、跨天日程
scheduler.config.xml_date = "%Y-%m-%d %H:%i";//数据时间格式
scheduler.config.dblclick_create = false;//禁止双击创建
scheduler.config.drag_create = false;//禁止拖拽创建
scheduler.config.drag_resize = false;//日视图、周视图禁拖拽改变时间
scheduler.config.drag_move = false;//月视图禁止拖拽改变时间
scheduler.config.hour_size_px = 84;//时间高度
scheduler.config.scroll_hour = "03.00";//定位初始时间
scheduler.config.clickMenu = [{
name: "新建会xxxxxxxxxxx议",
isShow:false,
handle: function () {
//debugger;
alert(scheduler.config.currentDateTime);
}
}, {
isShow:true,
name: "新建计划",
handle: function () {
alert(scheduler.config.currentDateTime);
}
}];//单击是否有菜单on
//scheduler.config.tabClick = test;
//scheduler.config.prevClick = test;
//scheduler.config.nextClick = test;
scheduler.xy.bar_height = 30;//全天、跨天日程之前的间隔
scheduler.maxLength = 8;//全天、跨天日程最多显示的条数
scheduler.xy.nav_height = 40;//导航高度
scheduler.attachEvent("onClick", function (id) {
var event = this.getEvent(id);
var eventType = event.type;
alert(eventType)
});
scheduler.attachEvent("onDblClick", function () {
return false;
});
//portal使用参数
// scheduler.isPortal = true;//是否在portal显示
scheduler.config.goToPage = goToPage;
// scheduler.isPortal_scheduler = true;//如果是日程事件，则不显示日期切换
scheduler.dayEvent = [];//单日事件
scheduler.getId = function (id) { //单击事件，参数为事件id
var event = this.getEvent(id);
var eventType = event.type;
alert(eventType)
}
function goToPage(date) {
alert(date)
// window.open("http://www.baidu.com");
}
//portal使用参数 end
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
scheduler.init('scheduler_here', new Date(), "week");//初始化显示当天日期+周视图
//初始化数据,数据格式为json
scheduler.parse([{
id: '6896764909577916408',
type: 'collaboration',
start_date: '2012-12-24 10:30',
end_date: '2012-12-26 11:00',
text: '协同1',
ico: "work_time_set_16",
content: "+sfsdfsdsfsdswewew"
}, {
id: '6896764909577916418',
type: 'collaboration',
start_date: '2012-12-24 10:30',
end_date: '2012-12-24 11:00',
text: '任务2'
}, {
"id": "2825558033677960100",
"type": "plan",
"content": "dddddddddddddddddd",
"subject": "dddddddddddddddddd",
"endDate": "2012-12-30 23:59",
"title": "计划",
start_date: '2012-12-24 10:30',
end_date: '2012-12-24 11:00'
}, {
id: '6896764909577916448',
type: 'task',
start_date: '2012-12-13 00:00',
end_date: '2012-12-14 23:59',
text: '任务3'
}
, {
id: '6896764909577916428',
type: 'task',
start_date: '2012-11-13 00:00',
end_date: '2012-11-21 23:59',
text: '任务3'
}, {
id: '6896764909577916438',
type: 'plan',
start_date: '2012-12-14 00:00',
end_date: '2012-12-14 23:59',
text: '计划4'
, set_disable: true
}, {
id: '2078061340905455728',
type: 'event',
start_date: '2012-11-13 00:00',
end_date: '2012-11-22 23:59',
text: '事件5'
}, {
id: '2078061340905455738',
type: 'event',
start_date: '2012-11-13 00:00',
end_date: '2012-11-22 23:59',
text: '事件6'
}, {
id: '2078061340905455748',
type: 'event',
start_date: '2012-11-13 00:00',
end_date: '2012-11-22 23:59',
text: '事件7'
}, {
id: '2078061340905455758',
type: 'task',
start_date: '2012-11-13 00:00',
end_date: '2012-11-22 23:59',
text: '任务8',
ico: "milestone right"
}, {
id: '2078061340905455768',
type: 'event',
start_date: '2012-11-13 00:00',
end_date: '2012-11-22 23:59',
text: '事件9'
}, {
id: '2078061340905455778',
type: 'event',
start_date: '2012-11-13 00:00',
end_date: '2012-11-22 23:59',
text: '事件10'
}, {
id: '-5722754109640979663',
type: 'doc',
eventId: '-8165958465554986075',
eventCreateUserId: '684019058616189893',
eventReceiveMemberId: '',
eventPeriodicalId: 'null',
eventBeginDate: '2012-11-22',
start_date: '2012-12-25 11:00',
end_date: '2012-12-25 11:00',
text: '公文11',
ico: 'work_time_set_16'
}, {
id: '-7346394655019678232',
type: 'meeting',
eventId: '6836291771407417598',
eventCreateUserId: '684019058616189893',
eventReceiveMemberId: '',
eventPeriodicalId: 'null',
eventBeginDate: '2012-11-22',
start_date: '2012-11-22 11:00',
end_date: '2012-11-22 11:30',
text: '会议12'
}, {
id: '-4031401379237048532',
type: 'plan',
eventId: '3259770405833755198',
eventCreateUserId: '684019058616189893',
eventReceiveMemberId: '',
eventPeriodicalId: 'null',
eventBeginDate: '2012-11-23',
start_date: '2012-11-23 11:30',
end_date: '2012-11-23 12:00',
text: '计划13'
}, {
id: '-4031401379237048542',
type: 'task',
eventId: '3259770405833755198',
eventCreateUserId: '684019058616189893',
eventReceiveMemberId: '',
eventPeriodicalId: 'null',
eventBeginDate: '2012-11-23',
start_date: '2012-12-23 11:30',
end_date: '2012-12-23 12:00',
text: '任务14',
ico: 'milestone right',
set_disable: true
}, {
id: '-4031401379237048552',
type: 'task',
eventId: '3259770405833755198',
eventCreateUserId: '684019058616189893',
eventReceiveMemberId: '',
eventPeriodicalId: 'null',
start_date: '2011-12-19 11:30',
end_date: '2012-12-23 11:00',
text: '任务15',
ico: 'milestone right'
}], "json");
$("#itemize").bind({
mouseover: function () {
$("#itemize_content").removeClass("hidden");
},
mouseout: function () {
$("#itemize_content").addClass("hidden");
}
})
}
function test(type, nextDate){
alert(nextDate)
}
$(function() {
$("#dhx_cal_common_tabs li div").click(function () {
$("#dhx_cal_common_tabs li").removeClass("current");
$(this).parents("li").addClass("current");
});
$('#meeting11111').hide()
})
slider
使用的是jquery.ui的slider，接口参照jquery.ui文档
<div class="comp" comp="type:'slider',slide: function( event, ui ) {$('#text').html('当前值：'+ ui.value +'%')}"></div>
属性
| 属性 | 类型 | 描述 |
| animate | Boolean:false |
设置是否在拖动滑块时执行动画效果。
初始：$('.selector').slider({ animate: true });
获取：var animate = $('.selector').slider('option', 'animate');
设置：$('.selector').slider('option', 'animate', true);
|
| max | Number:100 |
设置滑动条的最大值。
初始：$('.selector').slider({ max: 7 });
获取：var max = $('.selector').slider('option', 'max');
设置：$('.selector').slider('option', 'max', 7);
|
| min | Number : 0 |
设置滑动条的最小值。
初始：$('.selector').slider({ min: -7 });
获取：var min = $('.selector').slider('option', 'min');
设置：$('.selector').slider('option', 'min', -7);
|
| orientation | String : 'auto' |
通常不需要设置此选项，程序会自动识别，如果未正确识别，则可以设置为：'horizontal' 或 'vertical'
初始：$('.selector').slider({ orientation: 'vertical' });
获取：var orientation = $('.selector').slider('option', 'orientation');
设置：$('.selector').slider('option', 'orientation', 'vertical');
|
| range | Boolean, String : false |
如果设置为true，滑动条会自动创建两个滑块，一个最大、一个最小，用于设置一个范围内值。
初始：$('.selector').slider({ range: 'min' });
获取：var range = $('.selector').slider('option', 'range');
设置：$('.selector').slider('option', 'range', 'min');
|
| step | Number : 1 |
在最大值和最小值中间设置滑块步进大小，此值必须能被(max-min)平分。
初始：$('.selector').slider({ step: 5 });
获取：var step = $('.selector').slider('option', 'step');
设置：$('.selector').slider('option', 'step', 5);
|
| value | Number : 0 |
设置初始时滑块的值，如果有多个滑块，则设置第一个滑块。
初始：$('.selector').slider({ value: 37 });
获取：var value = $('.selector').slider('option', 'value');
设置：$('.selector').slider('option', 'value', 37);
|
| values | Array : null |
此属性用于设置滑块的初始值，并且只当range设置为true时有效。（至少两个滑块值）
初始：$('.selector').slider({ values: [1,5,9] });
获取：var values = $('.selector').slider('option', 'values');
设置：$('.selector').slider('option', 'values', [1,5,9]);
|
事件
| start : slidestart |
当滑块开始滑动时，触发此事件。
初始：$('.selector').slider({ start: function(event, ui) { ... } });
绑定：$('.selector').bind('slidestart', function(event, ui) { ... });
|
| slide : slide |
当滑块滑动时，触发此事件。使用ui.value获取当前值，或$(..).slider('value', index)获取其它滑块的值。
初始：$('.selector').slider({ slide: function(event, ui) { ... } });
绑定：$('.selector').bind('slide', function(event, ui) { ... });
|
| change : slidechange |
当滑块滑动且值发生改变时，触发此事件。事件带两个参数event and ui，使用event.orginalEvent来判断
是键盘或鼠标或其它触发，用ui.value获取当前值，用$(this).slider('values', index)获取其它滑块的值。
初始：$('.selector').slider({ change: function(event, ui) { ... } });
绑定：$('.selector').bind('slidechange', function(event, ui) { ... });
|
| stop : slidestop |
当滑块停止滑动时，触发此事件。
初始：$('.selector').slider({ stop: function(event, ui) { ... } });
绑定：$('.selector').bind('slidestop', function(event, ui) { ... });
|
方法
| destroy | 销毁当前滑动条对象。用法：.slider( 'destroy' ) |
| disable | 禁用当前滑动条。用法：.slider( 'disable' ) |
| enable | 启用当前滑动条。用法：.slider( 'enable' ) |
| option | 获取或设置当前滑动条的参数。用法：.slider( 'option' , optionName , [value] ) |
| value | 获取或设置当前滑动条的值。用法：.slider( 'value' , [value] ) |
| values | 获取或设置当前滑动条的所有滑块的值。用法：.slider( 'values' , index , [value] ) |
表单专用-Input
用于显示、输入或编辑文本或数值。
选择关联表单
<input type="text" name="name" value="" class="comp" comp="type:'correlation_form',fun:'testFunction',title:'选择关联表单'">
插入附件
<input type="text" name="name" value="" class="comp" comp="type:'affix',fun:'testFunction',title:'插入附件'">
关联文档
<input type="text" name="name" value="" class="comp" comp="type:'associated_document',fun:'testFunction',title:'关联文档'">
插入图片
<input type="text" name="name" value="" class="comp" comp="type:'insert_pic',fun:'testFunction',title:'插入图片'">
选择关联项目
选择数据交换任务
查询控件交换引擎任务
<input type="text" name="name" value="" class="comp" comp="type:'search',fun:'testFunction',title:'查询控件交换引擎任务'">
上传附件
- 图片上传的附件.jpg
- 图片.jpg
<div class="file_box">
<div class="file_unload clearfix">
<a href="javascript:void(0)" class="common_button common_button_icon file_click">
<em class="ico16 affix_16"></em>上传
<input style="border:1px #f00 solid" type="file">
</a>
</div>
<ul class="file_select padding_10 border_all clearfix">
<li>
<span title="图片上传的附件.jpg">图片上传的附件.jpg</span>
<em class="ico16 affix_del_16"></em>
</li>
<li class="margin_l_10">
<span title="图片">图片.jpg</span>
<em class="ico16 affix_del_16"></em>
</li>
</ul>
</div>
多窗口
openCtpWindow({
url:url,//新窗口地址
id:id//父窗口存贮新窗口的key，不传则用新窗口的url作为标记
})