会议——会议列表
会议列表主要内容包含2部分，待召开和已召开的会议,主要方法是list数据刷新
<section data-role="page" id="meeting_list">
<header data-role="header">
<h1 class="page_header_title">
会议
<span></span>
</h1>
</header>
<div data-role="content">
<div class="comp" comp="type:'tabs',callBack:userTabs">
<div data-role="navbar">
<ul class="model_header_tabs">
<li><a href="#" class="tab-ui-btn-a ui-btn-active" tgt="waitHeld">待召开</a></li>
<li><a href="#" class="tab-ui-btn-a" tgt="endHeld">已召开</a></li>
</ul>
</div>
<div class="tabs_body">
<div id="waitHeld" class="ele_active wrapper">
<div class="scroller comp" comp="type:'list',listType:'dataRefresh',listGather:listDataObj,callBack:userList"></div>
</div>
<div id="endHeld" class="ele_hide wrapper">
<div class="scroller comp" comp="type:'list',listType:'dataRefresh',listGather:listDataObj2,callBack:userList"></div>
</div>
</div>
</div>
</div>
</section>
<1>、type='list'公用方法介绍
comp="type:'list',listType:'dataRefresh',listGather:listDataObj,callBack:userList"
1、type:'list'——表示定义一个list列表
2、listType:'dataRefresh'——表示列表类型为刷新数据列表
3、listGather:'listDataObj'——列表初始化数据对象
function listDataObj(){
var listDataObj = {
list_type:'nav',
list_num: "420",
update_time: "2014-08-15 12:30",
more_num: "50",
data:[{
'listId':'001',
'transitionUrl':'test_meeting_details.html',
'leftIcon':'attend_meeting_22',
'centerContent':'明天下午三点小会议天下午三点小会议室集合',
'centerTime':'11-11 10:33-11:30',
'rightIcon':["1","2"],
'rightName':'卜宏宇'
},
{
'listId':'002',
'transitionUrl':'test_meeting_details.html',
'leftIcon':'unattended_meeting_22',
'centerContent':'明天下午三点小会议室集合',
'centerTime':'2013-11-11 10:33-11:30',
'rightIcon':["1"],
'rightName':'卜宏宇2'
}
],
callback:function(){
loaded('waitHeld',waitHeld,waitHeld);
}
};
return listDataObj;
}
4、callBack:'userList'——回调函数，有相关业务就写，没有可以省略
<2>、初始换方式
$("#meeting_list").bind("pageshow",function(){
pageInit();
})
<3>、数据刷新方法说明
/**
* 初始化iScroll控件-默认是纵向刷新滚动条，即state=0
* @param id 当前需要控制的对象的id名
* @param refreshFunc 下拉刷新数据方法
* @param loadMoreFunc 上拉获取更多方法
*/
function loaded(id,refreshFunc,loadMoreFunc) {
$.loadedScroll(id,0,refreshFunc,loadMoreFunc);
}
function waitHeld(obj,id) {
setTimeout(function () {
listData(id,{
list_type:'nav',
list_num: "400",
update_time: "2014-08-15 12:30",
more_num: "50",
data:[{
'listId':'003',
'transitionUrl':'test_meeting_details.html',
'leftIcon':'unattended_meeting_22',
'centerContent':'明天下午三点小会议室集合3',
'centerTime':'11-11 10:33-11:30',
'rightIcon':["1","2"],
'rightName':'卜宏宇3'
},
{
'listId':'004',
'transitionUrl':'test_meeting_details2.html',
'leftIcon':'unattended_meeting_22',
'centerContent':'明天下午三点小会议室集合4',
'centerTime':'2013-11-11 10:33-11:30',
'rightIcon':["1","2"],
'rightName':'卜宏宇4'
}
]
});
$.refreshScroll(id);
}, 1000);
}
会议——会议详情
会议详情主要内容是意见回复，主要方法是滚动条
<section data-role="page" id="meeting_details">
<header data-role="header" data-position="fixed" data-tap-toggle="false">
<h1 class="page_header_title">
会议详情
<span></span>
</h1>
<a data-rel="back" class="ui-btn ui-btn-inline ui-btn-icon-top ui-btn-icon-b ui-icon-return"
data-transition="slide"></a>
<a href="test_meeting_summary.html" class="ui-btn ui-btn-inline ui-btn-a" data-transition="slide">纪要</a>
</header>
<div data-role="content" id="f1" class="overflow_hidden">
<div class="scroller">
<div class="content_header">
<div class="content_header_title">
<div>一期需求规格说明书会需求会一期需求会</div>
<div><span class="right ico_phone_22 accessory_22 content_header_icon"></span></div>
</div>
<div class="content_manager_time clearFlow">
<span class="content_header_time">
<label class="padding_r_5">今天</label>
<label>10:30-11:30</label>
</span>
<span class="content_header_name">卜宏宇</span>
</div>
</div>
<div class="content">
<p>本期将和大家一起分享高效能人士七个习惯中的首要习惯——“积极主动”的相关内容。有这样一个事实</p>
</div>
<div class="content_list">
<div>
会议时间：<label class="padding_r_5">11-13</label><label>10:30-11:30</label>
</div>
<div class="content_participants">
<a href="test_attend_meeting_users.html" data-transition="slide">
<span class="content_participants_p">与会人员：<label>王未、胡赞一、唐玉婷、季洪利、单燕、王未、胡赞一、唐玉婷、季洪利、单燕</label></span>
</a>
<span class="right ico_phone_48 spread_right_48"></span>
</div>
<div>会议地点：<label>第一会议室105</label></div>
<div>主持人：<label>张小二</label></div>
<div>主持人：<label>张小二</label></div>
</div>
<div data-role="collapsible" data-collapsed="false" data-iconpos="right" data-inset="false"
class="content_reply margin_15 comp" comp="type:'slide',scrollId:'f1'">
<h4 class="content_reply_title"><span class="margin_r_5">附件(<label>12</label>)</span><span>关联文档(<label>12</label>)</span></h4>
<ul class="receipt_accessory_type padding_lr_10 padding_tb_5">
<li>
<div class="accessory_finish margin_tb_15">
<div class="accessory_icon padding_lr_10">
<span class="ico_phone_48 mp4_48 "></span>
</div>
<div class="accessory_name">
<p class="receipt_accessory_content">
<label>致远十年致远十年致远十年致远十年致远十年致远十年致远十年致远十年</label>
<label>.DVD</label>
</p>
<p class="accessory_size">500MB</p>
</div>
<div class="accessory_icon padding_lr_10">
<span class="ico_phone_48 accessory_download_48 "></span>
</div>
</div>
</li>
</ul>
</div>
<div data-role="collapsible" data-collapsed="false" data-iconpos="right" data-inset="false"
class="content_reply margin_15 margin_b_0 comp" comp="type:'slide',scrollId:'f1'">
<h4 class="content_reply_title">回复意见(<label>12</label>)</h4>
<ul>
<li>
<div class="content_reply_content">
<div class="first_content_reply padding_t_10 padding_b_5">
<div class="user_head">
<img src="../../skin/default/images/idea_user.png" class="user_head_pic"/>
</div>
<div class="content_reply_info">
<p class="reply_person_info">
<label>赵康永</label>
<label class="margin_l_10">已阅</label>
</p>
<p class="reply_person_content padding_t_5">
智能手机终端不仅是一个信息提供息的接收设备，而且也是系统。
</p>
<ul class="receipt_accessory_type margin_r_40">
<li>
<div class="accessory_finish margin_tb_15">
<div class="accessory_icon padding_lr_10">
<span class="ico_phone_48 mp4_48 "></span>
</div>
<div class="accessory_name">
<p class="receipt_accessory_content">
<label>致远十年致远十年致远十年致远十年致远十年致远十年致远十年致远十年</label>
<label>.DVD</label>
</p>
<p class="accessory_size">500MB</p>
</div>
<div class="accessory_icon padding_lr_10">
<span class="ico_phone_48 accessory_download_48 "></span>
</div>
</div>
</li>
</ul>
<div class="send_type">
<span class="padding_r_5">
2012-07-19 13:33
</span>
发自
<span class="clientType">
Android
</span>
客户端
<a href="test_meeting_return.html" class="ui-btn ui-btn-inline ui-btn-icon-top
ui-btn-icon-b ui-icon-reply reply_btn" data-transition="slide"></a>
</div>
</div>
</div>
<div class="user_reply_content">
<div class="user_reply_list">
<div class="user_head">
<img src="../../skin/default/images/idea_user.png" class="user_head_pic"/>
</div>
<div class="content_reply_info">
<p class="reply_person_info">
<label>张大伟</label>
</p>
<p class="reply_person_content padding_t_5">
智能手机终端不仅是一个。
</p>
<div class="user_reply_type">
<span class="padding_r_5">
2012-07-19 13:33
</span>
发自
<span class="clientType">
Android
</span>
客户端
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<footer data-role="footer" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li><a href="#" id="fast_dialog_bg" class="tab-ui-btn-a" data-rel="popup" data-position-to="window"><span class="ico_phone_48 rapid_receipt_48 margin_r_5 footer_icon"></span>快速回执</a></li>
<li><a href="test_meeting_return.html" class="tab-ui-btn-a" data-transition="slide"><span class="ico_phone_48 return__receipt_48 margin_r_5 footer_icon"></span>回执</a></li>
</ul>
</div>
</footer>
</section>
<1>、type='slide'公用方法介绍
comp="type:'slide',scrollId:'f1'"
1、type:'slide'——表示定义一个折叠组件扩展方法
2、scrollId:'f1'——表示折叠组件的id
<2>、初始换方式
$("#meeting_details").bind("pageshow", function () {
$.loadedScroll("f1",1,'v',function(){
var _h = $('body').height();
var header_h = $("#meeting_details > header").height();
var footer_h = $("#meeting_details > footer").height();
$("#meeting_details > div[data-role='content']").height(_h - header_h -footer_h);
});
pageInit();
$("#fast_dialog_bg").bind("tap",function(){
var dialog_html = $('<div class="popup_dialog" id="fast_dialog" data-role="popup" data-dismissible="false">'+
'<header>快速回执</header>'+
'<div class="user_text">'+
'<a href="#" data-rel="back">参加</a>'+
'<a href="#" data-rel="back">不参加</a>'+
'<a href="#" data-rel="back">待定</a>'+
'</div>'+
'<footer>'+
'<a href="#" data-rel="back">取消</a>'+
'</footer>'+
'</div>');
$("#meeting_details").append(dialog_html).trigger("create");
$(dialog_html).popup("open",{
transition:"pop"
});
})
})
<3>、滚动条初始化方法
/**
* 初始化iScroll控件
* @param id 当前需要控制的对象的id名
* @param state 状态值，0表示含有上下拉刷新，1表示只有滚动条
* @param refreshFunc 当state为0时，表示下拉刷新数据方法，当state为1时,表示为为"h"，横向滚动条，"v"，纵向滚动条
* @param loadMoreFunc 当state为0时，上拉获取更多方法，当state为1时,表示用于确定宽或高的自定义方法
*/
$.loadedScroll = function(id,state,refreshFunc,loadMoreFunc){}
//会议详情
$.loadedScroll("f1",1,'v',function(){
var _h = $('body').height();
var header_h = $("#meeting_details > header").height();
var footer_h = $("#meeting_details > footer").height();
$("#meeting_details > div[data-role='content']").height(_h - header_h -footer_h);
});
会议——与会人员
与会人员主要内容是人员名单，主要方法是tabs切换
<select name="select_menu" data-native-menu="false" data-iconpos="right" data-inline="true">
<section data-role="page" id="attend_meeting_users">
<header data-role="header">
<h1 class="page_header_title">
与会人员
</h1>
<a href="test_meeting_details.html" class="ui-btn ui-btn-inline ui-btn-icon-top
ui-btn-icon-b ui-icon-return" data-transition="slide"></a>
</header>
<div data-role="content">
<div class="meeting_user_content comp" comp="type:'tabs'">
<div data-role="navbar">
<ul>
<li><a href="#" class="tab-ui-btn-a ui-btn-active" tgt="attend_user">参加</a></li>
<li><a href="#" class="tab-ui-btn-a" tgt="no_ensure">待定</a></li>
<li><a href="#" class="tab-ui-btn-a" tgt="no_attend">不参加</a></li>
<li><a href="#" class="tab-ui-btn-a" tgt="no_return_receipt">未回执</a></li>
</ul>
</div>
<div class="tabs_body">
<ul class="clearFlow ele_active" id="attend_user" >
<li>王晔1</li>
<li>李晓东</li>
</ul>
<ul class="clearFlow ele_hide" id="no_ensure">
<li>王晔2</li>
<li>李晓东</li>
</ul>
<ul class="clearFlow ele_hide" id="no_attend">
<li>王晔3</li>
<li>李晓东</li>
</ul>
<ul class="clearFlow ele_hide" id="no_return_receipt">
<li><span class="ico_phone_28 see_28"></span>王晔晔</li>
<li><span class="ico_phone_28 unseen_28"></span>李晓东</li>
</ul>
</div>
</div>
</div>
</section>
会议——会议回执
与会人员主要内容是意见回复和附件上传，主要方法是附件关联
<section data-role="page" id="return_receipt">
<header data-role="header">
<a href="test_meeting_details.html" class="ui-btn ui-btn-inline ui-btn-icon-top ui-btn-icon-b ui-icon-return"
data-transition="slide"></a>
<h1 class="page_header_title">
回执
</h1>
<a href="#" class="ui-btn ui-btn-inline ui-btn-a">回执</a>
</header>
<div data-role="content" class="receipt_content">
<div class="ui-grid-b users_select comp" comp="type:'radio',inputId:'receipt_select_value'">
<div class="ui-block-a margin_tb_5">
<div class="iphone_radio">
<span class="feedbackradio ico_phone_radio_checked30 margin_r_5" radio_value="1"></span>
<span class="ico_phone_48 attend_meeting_48"></span>
参加
</div>
</div>
<div class="ui-block-b margin_tb_5">
<div class="iphone_radio">
<span class="feedbackradio ico_phone_radio30 margin_r_5" radio_value="0"></span>
<span class="ico_phone_48 unattended_meeting_48"></span>
不参加
</div>
</div>
<div class="ui-block-c margin_tb_5">
<div class="iphone_radio">
<span class="feedbackradio ico_phone_radio30 margin_r_5" radio_value="-1"></span>
<span class="ico_phone_48 unsure_48"></span>
待定
</div>
</div>
<input type="hidden" value="1" id="receipt_select_value"/>
</div>
<div class="writing_content">
<p class="hint_text">请输入处理意见</p>
<textarea></textarea>
<p class="hint_num">150</p>
</div>
<div class="comp" comp="type:'tabs',callback:userTabs">
<div data-role="navbar" class="navbar_add_icon">
<ul>
<li>
<a href="#" class="tab-ui-btn-a">
<span class="ico_phone_48 accessory_48"></span>
(<label>10</label>)
</a>
</li>
</ul>
</div>
<div class="tabs_body">
<div class="ui-grid-c accessory_upload_type">
<div class="ui-block-a margin_tb_10">
<a href="#" class="ui-btn ui-btn-inline ui-btn-icon-top ui-btn-icon-a ui-icon-photo">拍照</a>
</div>
<div class="ui-block-b margin_tb_10">
<a href="#" class="ui-btn ui-btn-inline ui-btn-icon-top ui-btn-icon-a ui-icon-voice">语音</a>
</div>
<div class="ui-block-c margin_tb_10">
<a href="test_relate_doc.html" data-transition="slide"
class="ui-btn ui-btn-inline ui-btn-icon-top ui-btn-icon-a ui-icon-associate">关联文档</a>
</div>
<div class="ui-block-d margin_tb_10">
<a href="#"
class="ui-btn ui-btn-inline ui-btn-icon-top ui-btn-icon-a ui-icon-local_doc ui-btn-icon-lineheight2em">本地文件和视频</a>
</div>
</div>
<div class="receipt_accessory">
<ul class="receipt_accessory_type padding_10">
<li>
<div class="accessory_finish margin_tb_15">
<div class="accessory_icon padding_lr_10">
<span class="ico_phone_48 mp4_48 "></span>
</div>
<div class="accessory_name">
<p class="receipt_accessory_content">
<label>致远十年致远十年致远十年致远十年致远十年致远十年致远十年致远十年</label>
<label>.DVD</label>
</p>
<p class="accessory_size">500MB</p>
</div>
<div class="accessory_icon padding_lr_10">
<span class="ico_phone_48 accessory_download_48 "></span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
统计——统计首页列表
统计首页列表,主要方法是list数据刷新
<section data-role="page" id="statistics_home">
<header data-role="header">
<h1 class="page_header_title">
统计
<span></span>
</h1>
</header>
<div data-role="content">
<div id="statisticsList" class="wrapper statistic_add">
<div class="scroller comp" comp="type:'list',listType:'dataRefresh',listGather:homeDataObj,callBack:userList"></div>
</div>
</div>
</section>
统计——统计表查看
<section data-role="page" id="statistics_chart">
<header data-role="header">
<div class="left">
<a href="test_statistic_detail.html" class="ui-btn ui-btn-inline ui-btn-icon-top ui-btn-icon-b ui-icon-return"
data-transition="slide"></a>
</div>
<h1 class="page_header_title">
北京区统计情况图表
<span></span>
</h1>
<div class="right">
<a href="test_statistic_filter.html" class="ui-btn ui-btn-inline ui-btn-a" data-transition="slide">筛选</a>
<a href="#no_chart_data" class="ui-btn ui-btn-inline ui-btn-a" data-rel="popup" data-position-to="window">统计图</a>
</div>
</header>
<div data-role="content">
<div class="statistics_filter padding_tb_5 statistics_chart">
<div class="layout_left_right padding_tb_5">
<div class="layout_list_box_left">
单据状态：
</div>
<div class="layout_list_box_right padding_r_10">
<label class="margin_r_10">未审核</label>
<label class="margin_r_10">审核通过</label>
<label class="margin_r_10">审核不通过</label>
<label class="margin_r_10">未核定</label>
<label class="margin_r_10">核定通过</label>
<label class="margin_r_10">核定不通过</label>
</div>
</div>
<div class="layout_left_right padding_tb_5">
<div class="layout_list_box_left">
流程状态：
</div>
<div class="layout_list_box_right padding_r_10">
<label class="margin_r_10">未结束</label>
<label class="margin_r_10">已结束</label>
<label class="margin_r_10">终止</label>
</div>
</div>
<div class="layout_left_right padding_tb_5">
<div class="layout_list_box_left">
统计时间：
</div>
<div class="layout_list_box_right padding_r_10">
<label>2013-09-18</label>
</div>
</div>
</div>
<div class="statistics_content">
<table data-role="table" class="ui-responsive table-stroke" data-column-btn-theme="b">
<thead>
<tr>
<th>人员</th>
<th>部分</th>
<th>职位</th>
<th>项目</th>
<th>描述</th>
<th>报销全额</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>王小二</td>
<td>研发</td>
<td>经理</td>
<td>1</td>
<td>1</td>
<td>11</td>
<td>2013年10月</td>
</tr>
<tr>
<td>王小二</td>
<td>研发</td>
<td>经理</td>
<td>1</td>
<td>1</td>
<td>11</td>
<td>2013年10月</td>
</tr>
<tr>
<td>王小二</td>
<td>研发</td>
<td>经理</td>
<td>1</td>
<td>1</td>
<td>11</td>
<td>2013年10月</td>
</tr>
<tr>
<td>王小二</td>
<td>研发</td>
<td>经理</td>
<td>1</td>
<td>1</td>
<td>11</td>
<td>2013年10月</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="no_chart_data" id="no_chart_data" data-role="popup">
<h3>提示</h3>
<p class="padding_20 padding_tb_5">系统中没有统计数据</p>
<p class="padding_20 padding_tb_5">
<a href="#" data-rel="back">好的</a>
</p>
</div>
</section>