ipad端基本组件
ipad端所有涉及到的基本组件

按钮

按钮类型有两类,一类是a标签的方式,一类是button的方式,目前我们按钮采用的是a标签方式

                        <a href="#" class="ui-btn ui-btn-inline ui-btn-a">提交</a>
                        <a href="#" class="ui-btn ui-btn-inline ui-btn-b">取消</a>
                        <a href="#" class="ui-btn ui-btn-inline ui-btn-c">回复</a>
                        <a href="#" class="ui-btn ui-btn-inline ui-btn-d">快速回复</a>
                        <a href="#" class="ui-btn ui-btn-inline ui-btn-f"></a>
                        <a href="#" class="ui-btn ui-btn-inline ui-btn-icon-top ui-btn-icon-a ui-icon-attend-meeting">参加</a>
                        <a href="#" class="ui-btn ui-btn-inline ui-btn-icon-top ui-btn-icon-a ui-icon-unattended-meeting">不参加</a>
                        <a href="#" class="ui-btn ui-btn-inline ui-btn-icon-top ui-btn-icon-a ui-icon-unattended-meeting ui-state-disabled">不参加</a>
                        <a href="#" class="ui-btn ui-btn-inline ui-btn-icon-top ui-btn-icon-a ui-icon-unsure">待定</a>
                        <a href="#" class="ui-btn ui-btn-inline ui-btn-icon-top ui-btn-icon-a ui-icon-unsure">待定</a>
                        <a href="#" class="ui-btn ui-btn-inline ui-btn-icon-top ui-btn-icon-a ui-icon-photo">拍照</a>
                        <a href="#" class="ui-btn ui-btn-inline ui-btn-icon-top ui-btn-icon-a ui-icon-voice">语音</a>
                        <a href="#" class="ui-btn ui-btn-inline ui-btn-icon-top ui-btn-icon-a ui-icon-associate">关联文档</a>
                        <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>
                   
按钮禁用/启用

a标签类按钮禁用需加上class='ui-disabled'

botton标签类按钮禁用需加上disabled='disabled'

图标按钮的特殊样式

图标按钮中文字超过4个字的按钮,需要添加class="ui-btn-icon-lineheight2em"

开关

按钮类型有两类,一类是a标签的方式,一类是button的方式,目前我们按钮采用的是a标签方式

                     <input type="checkbox" data-role="flipswitch" name="flip-checkbox" data-on-text="开" data-off-text=""/>
                     <input type="checkbox" data-role="flipswitch" name="flip-checkbox" data-on-text="开" data-off-text="关"/>
                     <input type="checkbox" data-role="flipswitch" name="flip-checkbox" data-on-text="开" data-off-text="关" checked="checked"/>
                     <input type="checkbox" disabled="disabled" data-role="flipswitch" name="flip-checkbox" data-on-text="开" data-off-text="关" checked="checked"/>
                   
开关使用说明</div>

开关采用input[type="checkbox"]形式,默认是关,要设置默认打开许要添加属性checked="checked"

开关禁用需加上disabled='disabled'

单选

参加
不参加
待定
                       <div class="ui-grid-b users_select comp" comp="type:'radio',inputId:'receipt_select_value'">
                           <div class="ui-block-a margin_tb_10">
                               <div class="ipad_radio">
                                   <span class="feedbackradio ico_pad_radio_checked30 margin_r_10" radio_value="1"></span>
                                   <span class="ico32 attend_meeting_32 margin_r_10"></span>参加
                               </div>
                           </div>
                           <div class="ui-block-b margin_tb_10">
                               <div class="ipad_radio">
                                   <span class="feedbackradio ico_pad_radio30 margin_r_10" radio_value="0"></span>
                                   <span class="ico32 unattended_meeting_32 margin_r_10"></span>
                                   不参加
                               </div>
                           </div>
                           <div class="ui-block-c margin_tb_10">
                               <div class="ipad_radio">
                                   <span class="feedbackradio ico_pad_radio30 margin_r_10" radio_value="-1"></span>
                                   <span class="ico32 unsure_32 margin_r_10"></span>
                                   待定
                               </div>
                           </div>
                           <input type="hidden" value="1" id="receipt_select_value"/>
                       </div>
                  
单选使用说明

单选外层父级需要添加公共组件属性comp,inputId对应的值为单选所选取值的id

左侧页头

                      <div class="nav_list_banner">会议</div>
                  

选项卡

1、文字选项卡

内容区域一

内容区域二

2、图标选项卡

内容区域三

内容区域四

                       <div data-role="tabs">
                           <div data-role="navbar">
                               <ul class="model_header_tabs">
                                   <li><a href="#one" class="tab-ui-btn-a ui-btn-active" data-ajax="false">选项卡一</a></li>
                                   <li><a href="#two" class="tab-ui-btn-a" data-ajax="false">选项卡二</a></li>
                               </ul>
                           </div>
                           <div id="one">
                               <h4>内容区域一</h4>
                           </div>
                           <div id="two">
                               <h4>内容区域二</h4>
                           </div>
                       </div>
                       <div data-role="tabs">
                           <div data-role="navbar" class="navbar_add_icon">
                               <ul>
                                   <li>
                                       <a href="#one1" class="tab-ui-btn-a ui-btn-active" data-ajax="false">
                                           <span class="ico32 attend_meeting_32 margin_r_5"></span>参加
                                           <span class="ico_pad_16 drop_up_btn_16 margin_l_25"></span>
                                       </a>
                                   </li>
                                   <li>
                                        <a href="#two2" class="tab-ui-btn-a" data-ajax="false">
                                            <span class="ico32 accessory_32"></span>(<label>10</label>)
                                        </a>
                                  </li>
                               </ul>
                           </div>
                           <div id="one1">
                               <h4>内容区域三</h4>
                           </div>
                           <div id="two2">
                               <h4>内容区域四</h4>
                           </div>
                       </div>
                  

附件

1、详情列表

  • 500MB

  • 500MB

  • 500MB

  • 500MB

2、上传附件

  • 500MB

  • 500MB

  • 500MB

  • 500MB

  • 你好的斯蒂文四大看得见@#$#$#%离开大家#%E十年山三打谁奥斯卡符合阿速度撒旦法卡丽.DVD

    500MB

                       <ul class="details_accessory padding_20 padding_b_0  clearFlow">
                           <li>
                               <div class="accessory_finish margin_5 margin_b_15">
                                   <div class="padding_lr_10">
                                       <span class="ico35 mp3_35 margin_t_10"></span>
                                   </div>
                                   <div class="accessory_name">
                                       <p class="receipt_accessory_content">
                                           <label>致远十年致远十年致远十年</label>
                                       </p>
                                       <p class="accessory_size">500MB</p>
                                   </div>
                                   <span class="ico_pad_28 cancel_upload_28 model_info_close"></span>
                               </div>
                           </li>
                       </ul>

                      <ul class="receipt_accessory_type clearFlow padding_t_30 padding_l_10 padding_r_10">
                          <li>
                              <div class="accessory_underway margin_lr_15 margin_tb_10">
                                  <div class="accessory_underway_content">
                                      <div class="padding_lr_10">
                                          <span class="ico35 mp3_35 margin_t_10"></span>
                                      </div>
                                      <div class="accessory_name">
                                          <p class="receipt_accessory_content">
                                              <label>致远十年致远十年致远十年致远十年致远十年</label>
                                          </p>
                                          <p class="underway_accessory_size">500MB</p>
                                      </div>
                                  </div>
                                  <p class="accessory_underway_bar"></p>
                                  <span class="ico_pad_28 cancel_upload_28 model_info_close"></span>
                              </div>
                          </li>
                            <li>
                                <div class="accessory_finish margin_lr_15 margin_tb_10">
                                    <div class="padding_lr_10">
                                        <span class="ico35 mp3_35 margin_t_10"></span>
                                    </div>
                                    <div class="accessory_name">
                                        <p class="receipt_accessory_content">
                                            你好的斯蒂文四大看得奥斯卡符合阿速度撒旦法卡丽.DVD
                                        </p>
                                        <p class="accessory_size">500MB</p>
                                    </div>
                                    <div class="accessory_download_icon padding_lr_10">
                                        <span class="ico40 accessory_download_40"></span>
                                    </div>
                                </div>
                            </li>
                         </ul>
                  
附件说明

详情附件每一行最多为3个

上传附件(弹出层上传)每一行最多为4个

页头

                        <div class="page_header">
                            <div class="left"><a href="#" class="ui-btn ui-btn-inline ui-btn-b">取消</a></div>
                            <div class="right"><a href="#" class="ui-btn ui-btn-inline ui-btn-a">提交</a></div>
                            <div class="page_header_title">会议详情</div>
                        </div>
                  

会议头部

会议来了会议来了会议来了会议来了会议来了会议
胡小一
                       <div class="content_header">
                           <div class="content_header_title">
                               <div>会议来了会议来了会议来了会议来了会议来了会议</div>
                               <div>
                                   <span class="right ico14 accessory_14"></span>
                               </div>
                           </div>
                           <div class="clearFlow">
                            <span class="content_header_time">
                                <label>2013年11月15日</label><label>10:30-11:30</label>
                            </span>
                               <span class="content_header_name padding_r_10">胡小一</span>
                           </div>
                       </div>
                  

会议内容

会议内容会议内容会议容会议内容会议内容。
                       <div class="content">
                           <div>会议内容会议内容会议容会议内容会议内容。</div>
                      </div>
                  

会议列表

会议时间:
会议地点:
主持人:
主持人:
                       <div class="content_list">
                       <div class="content_list">
                           <div>
                               会议时间:<label>17:00-17:30</label>
                           </div>
                           <div class="content_participants">
                               <a href="#meeting_user" data-rel="popup" data-position-to="#meeting_user_position" data-transition="pop">
                                <span class="content_participants_p">
                                    与会人员:<label>胡小一、周小小、罗丽、王栋、图腾、小 午、田田、周读、陈凯、胡小一</label>
                                </span>
                                   <span class="right ico_pad_28 spread_right_28 spread_right_position"></span>
                                   <span class="right" id="meeting_user_position"></span>
                               </a>
                           </div>
                           <div>会议地点:<label>第一会议室105</label></div>
                           <div>主持人:<label>张小二</label></div>
                           <div>主持人:<label>张小二</label></div>
                       </div>
                  

意见回复

1、回复意见

回复意见()

  • 9-26  13:33

    回复

                      <div data-role="collapsible" data-collapsed="false" data-iconpos="right" data-inset="false"
                           class="content_reply margin_20 margin_b_0" >
                          <h4 class="content_reply_title">回复意见(<label>12</label>)</h4>
                          <ul>
                              <li class="margin_tb_20 margin_l_10 margin_r_10">
                                  <div class="content_reply_content">
                                      <div class="first_content_reply  padding_b_5">
                                          <div class="user_head">
                                              <img src="../../../../skin/cmp/ipad/images/user1.png"/>
                                          </div>
                                          <div class="content_reply_info padding_l_10">
                                              <p class="reply_person_info">
                                                    <label>赵康永</label>
                                                    <span class="start_time">
                                                        9-26  13:33
                                                    </span>
                                              </p>
                                              <p class="reply_type margin_t_15 margin_b_5">
                                                  <label>已阅</label>
                                                  <a href="#" class="ui-btn ui-btn-inline ui-btn-c">回复</a>
                                              </p>
                                          </div>
                                      </div>
                                  </div>
                              </li>
                          </ul>
                      </div>
                  

2、震荡回复

回复意见()

  • 9-26  13:33

    回复

    与研发沟通达成的一致,客服上报人做好提前预警。

    • 500MB

    发自客户端

    9-26  13:33

    非常好!全力保障客户问题,研发沟通达成一致。

    发自客户端

                      <div data-role="collapsible" data-collapsed="false" data-iconpos="right" data-inset="false"
                           class="content_reply margin_20 margin_b_0" >
                          <h4 class="content_reply_title">回复意见(<label>12</label>)</h4>
                          <ul>
                              <li class="margin_tb_20 margin_l_10 margin_r_10">
                                  <div class="content_reply_content">
                                      <div class="first_content_reply padding_b_5">
                                          <div class="user_head">
                                              <img src="../../../../skin/cmp/ipad/images/user1.png"/>
                                          </div>
                                          <div class="content_reply_info padding_l_10">
                                              <p class="reply_person_info">
                                                  <label>赵康永</label>
                                                <span class="start_time">
                                                    9-26  13:33
                                                </span>
                                              </p>
                                              <p class="reply_type margin_t_15 margin_b_5">
                                                  <label>已阅</label>
                                                  <a href="#" class="ui-btn ui-btn-inline ui-btn-c">回复</a>
                                              </p>
                                              <p class="reply_person_content padding_tb_15">
                                                  与研发沟通达成的一致,客服上报人做好提前预警。
                                              </p>
                                              <div>
                                                  <ul class="details_accessory padding_r_15 clearFlow">
                                                      <li>
                                                          <div class="accessory_finish margin_5 margin_b_15">
                                                              <div class="padding_lr_10">
                                                                  <span class="ico35 mp3_35 margin_t_10"></span>
                                                              </div>
                                                              <div class="accessory_name">
                                                                  <p class="receipt_accessory_content">
                                                                      <label>致远十年致远十年致远十年</label>
                                                                  </p>
                                                                  <p class="accessory_size">500MB</p>
                                                              </div>
                                                              <div class="accessory_download_icon padding_lr_10">
                                                                  <span class="ico40 accessory_download_40"></span>
                                                              </div>
                                                          </div>
                                                      </li>
                                                  </ul>
                                              </div>
                                              <p class="send_type padding_t_5">发自<label class="clientType">iphone</label>客户端</p>
                                          </div>
                                      </div>
                                      <div class="user_reply_content margin_t_15 padding_lr_20">
                                          <div class="user_reply_list user_reply_first_list">
                                              <div class="user_head">
                                                  <img src="../../../../skin/cmp/ipad/images/user1.png" class="padding_t_20"/>
                                              </div>
                                              <div class="content_reply_info padding_t_20 padding_l_10">
                                                  <p class="reply_person_info">
                                                      <label>张大伟</label>
                                                    <span class="start_time">
                                                        9-26  13:33
                                                    </span>
                                                  </p>
                                                  <p class="reply_person_content padding_tb_15">
                                                      非常好!全力保障客户问题,研发沟通达成一致。
                                                  </p>
                                                  <p class="user_reply_type padding_b_15">发自<label class="clientType">Android</label>客户端</p>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </li>
                          </ul>
                      </div>