PumpkinHouseWeb/template/uploadTemplate.html

   1 <!-- 图片上传弹出层 边框背景 模板 -->
   2 <script id="uploadTemplate" type="text/x-jQuery-tmpl">
   3 <div class="Dialog clearfix" style=" margin-top:0px; background:#fff; border:0px solid red; height:500px;">
   4         <div class="DialogTop clearfix" style="height:75px;">
   5         <div class="DialogTopBottomLine"></div>
   6         <ul>
   7                 <li><a href="javascript:void(0)" id="collectToolTab">收纳工具</a></li>
   8             <li><a href="javascript:void(0)" id="copyLinkTab">粘贴网址抓取</a></li>
   9                 <li><a href="javascript:void(0)" id="uploadTab">本地上传图片</a></li>
  10         </ul>
  11     </div>
  12     <div id="holder" class="clearfix"></div>
  13
  14 </div>
  15 </script>
  16
  17 <!-- 图片上传弹出层模板 -->
  18 <script id="uploadDialogTemplate" type="text/x-jQuery-tmpl">
  19         <div class="Dialog_left float_l">
  20         <div class="Dialog_pic" id="uploadFileControlHolder">
  21         </div>
  22         <div class="Dialog_description">
  23             <textarea id="comment" rows="3" cols="80" class="Rounded" style="width:643px; height:70px;"></textarea>
  24             {{tmpl "#publishTemplate"}}
  25             <input type="button" value=" " id="uploadBtn" class="DialogRelease" onclick="addPicture()" /><span class="resultMessage"></span>
  26         </div>
  27     </div>
  28     <div class="Dialog_right float_r">
  29          <h1 style="margin-top:0px;">选择盒子：</h1>
  30          <div id="albumList" style="position: relative" data-album-id="${albums[0].id}" class="albumList Rounded textOver" >${albums[0].name}</div>
  31         <div id="nameListHolder"></div>
  32         <div id="tagPanelDialog" class="ConmmonLabel"></div>
  33     </div>
  34 </script>
  35
  36 <script id="publishTemplate" type="text/x-jQuery-tmpl">
  37     <div style="height:15px; width:100%;">
  38         {{each partyList}}
  39             <input type="checkbox" class="syncChkbox" data-party="${$value}"/>
  40             {{if $value == 1}} <!-- sina -->
  41                 同步到新浪微博
  42             {{else $value == 2}} <!-- QQ -->
  43                 同步到QQ空间
  44             {{else $value == 3}} <!-- QQ weibo -->
  45                 同步到腾讯微博
  46             {{/if}}
  47         {{/each}}
  48     </div>
  49 </script>
  50
  51 <script id="collectToolTemplate" type="text/x-jQuery-tmpl">
  52     <div class="collectGjBox">
  53         <table width="884" border="0" cellspacing="5" cellpadding="5">
  54           <tr>
  55             <td width="262" height="110">&nbsp;</td>
  56             <td width="305">&nbsp;</td>
  57             <td width="267" rowspan="2"><img src="/img/collectBigJt.jpg" width="220" height="156" /></td>
  58           </tr>
  59           <tr>
  60             <td height="82">&nbsp;</td>
  61             <td><a href='javascript:void((function(){var d=document,e=d.createElement("script");e.setAttribute("charset","UTF-8");e.setAttribute("src","http://${host}/scripts/collectTool.js?"+Math.floor(new Date/1E7));d.body.appendChild(e)})());'><img alt="盒子工具" src="/img/collectBigBtn.jpg" width="305" height="72" /></a></td>
  62           </tr>
  63           <tr>
  64             <td colspan="3" align="center">
  65               <h1>拖拽【<span class="ColorAacd60">分享到木头盒子</span>】至浏览器收藏栏 </h1>
  66                   <h3 class="ColorC1 hide">（没看到浏览器收藏栏？快捷键 Ctrl+Shift+B 展开）</h3>
  67               <h2 class="ColorAacd60">添加后，可直接点击盒子工具抓取想收纳的图片哦！</h2></td>
  68             </tr>
  69         </table>
  70         <span class="xq"><a href="/Aboutus/Explain.aspx" target=_blank>查看详情></a></span>
  71     </div>
  72 </script>
  73
  74 <!-- 图片上传 点击上传模板 -->
  75 <script id="albumNamefileTemplate" type="text/x-jQuery-tmpl">
  76     <div id="fileUploadControlMessage" class="error"></div>
  77     <span class="FileUploadControl">
  78         <form id="fileUploadForm" action="/Images/FileUpload.ashx" method="post" enctype="multipart/form-data">
  79             <input type="file" name="fileUploadControl" value="" id="fileUploadControl" multiple/>
  80         </form>
  81     </span>
  82 </script>
  83
  84 <!-- 图片上传 复制网址模板 -->
  85 <script id="albumNameDialogWebUrlTemplate" type="text/x-jQuery-tmpl">
  86     <div class="DialogWebUrl">
  87         <span>拷贝完整的网址，我们将帮你保存网页的图片和地址。</span>
  88         <input type="text" class="WebUrl" />
  89         <input type="button" class="DialogWebSure" />
  90     </div>
  91 </script>
  92
  93 <!-- 图片上传 复制网址之后图片列表模板 -->
  94 <script id="externalPageImageTemplate" type="text/x-jQuery-tmpl">
  95     <div style="width:595px; text-align:left;">
  96     <table width="595" border="0" cellspacing="5" cellpadding="0">
  97       <tr>
  98         <td><div style="width:45px;">来源：</div></td>
  99         <td><span id="title">${title}</span></td>
 100       </tr>
 101       <tr>
 102         <td><div style="width:45px;">链接：</div></td>
 103         <td><a id="source" href="${url}" class="source_url textOver">${url}</a></td>
 104       </tr>
 105     </table>
 106
 107     </div>
 108
 109     <div style="" class="webUrlBox">
 110
 111         {{if list.length > 0}}
 112         <ul>
 113             {{each list}}
 114                 <li class="linkImage">
 115                 <img src="${src}" alt="${alt}"/>
 116                 </li>
 117             {{/each}}
 118          </ul>
 119         {{else}}
 120             <div><br/><br/><br/>对不起，本页没有合适的图片</div>
 121         {{/if}}
 122     </div>
 123 </script>
 124
 125 <script id="albumNameListTemplate" type="text/x-jQuery-tmpl">
 126     <div id="albumNameList" class="albumNameList">
 127         <div id="list" class="list">
 128                 <ul>
 129                 {{tmpl(albums) "#albumNameItemTemplate"}}
 130             </ul>
 131         </div>
 132         <div class="createAlbumBox">
 133                 <ul>
 134                 <li><input type="text" id="newAlbum" class="newAlbumBox"/>&nbsp;&nbsp;</li>
 135                 <li><input type="button" value=" " id="createAlbumBtn" class="createAlbumBtn"/></li>
 136             </ul>
 137         </div>
 138     </div>
 139 </script>
 140
 141 <script id="albumNameItemTemplate" type="text/x-jQuery-tmpl">
 142     <li data-album-id="${id}" class="albumName textOver">${name}</li>
 143 </script>
 144
 145 <!-- 图片抓取弹出层模板 -->
 146 <script id="collectTemplate" type="text/x-jQuery-tmpl">
 147 <div class="Dialog clearfix" style=" margin-top:0px; background:#fff; border:0px solid red;">
 148 <h1 class="clearfix ColorAacd60" style="font-size:24px; height:55px; line-height:55px; font-family:'微软雅黑'; font-weight:300;">木头盒子抓取工具</h1>
 149 <div class="Dialog_left float_l">
 150     {{if error}}
 151         <div class="error">${error}</div>
 152     {{else}}
 153     <table width="595" border="0" cellspacing="5" cellpadding="0">
 154       <tr>
 155         <td><div style="width:45px;">来源：</div></td>
 156         <td><span id="title">${originalTitle}</span></td>
 157       </tr>
 158       <tr>
 159         <td><div style="width:45px;">链接：</div></td>
 160         <td><a id="source" href="${originalUrl}" class="source_url textOver">${originalUrl}</a></td>
 161       </tr>
 162     </table>
 163         <div class="Dialog_pic" id="uploadFileControlHolder">
 164             <div id="statusHolder"></div>
 165                 <img id="preview" width="800" height="600" src="${url}" />
 166             </div>
 167             <div class="Dialog_description">
 168                 <textarea id="comment" rows="3" cols="80" class="Rounded"></textarea>
 169                 {{tmpl "#publishTemplate"}}
 170                 <input type="button" value=" " id="uploadBtn" class="DialogRelease" onclick="addPicture()" /><span class="resultMessage"></span>
 171             </div>
 172         </div>
 173     {{/if}}
 174     <div class="Dialog_right float_r">
 175         <h1 style="margin-top:0px;">选择盒子：</h1>
 176          <div id="albumList" style="position: relative" data-album-id="${albums[0].id}" class="albumList Rounded textOver" >${albums[0].name}</div>            <div id="nameListHolder"></div>
 177          <div id="tagPanel" class="ConmmonLabel">
 178         </div>
 179     </div>
 180 </div>
 181 </script>
 182
 183 <script id="imagePreviewTemplate" type="text/x-jQuery-tmpl">
 184     <img id="preview" width="800" height="600" />
 185 </script>
 186
 187  <!-- 最外面的div不要动 -->
 188 <script id="uploadSuccessTemplate" type="text/x-jQuery-tmpl">
 189     <div>
 190         <div>查看<a href="/picture/${pid}" class="ColorAacd60" target="_blank">我刚分享的</a>&nbsp;&nbsp;或去<a href="/dashboard" class="ColorAacd60" target="_blank">我的房子</a></div>
 191     </div>
 192 </script>