1<!DOCTYPE html> 2 3 4 5 6 7 8<html class="theme-next pisces use-motion" lang="zh-Hans"> 9<head> 10 <meta charset="UTF-8"/> 11<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 12<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 13 14 15 16 17 18 19 20 21 22<meta http-equiv="Cache-Control" content="no-transform" /> 23<meta http-equiv="Cache-Control" content="no-siteapp" /> 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" /> 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css"> 68 69 70 71 72 73 74 75<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" /> 76 77<link href="/css/main.css?v=5.1.1" rel="stylesheet" type="text/css" /> 78 79 80 <meta name="keywords" content="primeng," /> 81 82 83 84 85 86 87 88 89 <link rel="shortcut icon" type="image/x-icon" href="/favicon.png?v=5.1.1" /> 90 91 92 93 94 95 96<meta name="description" content="primeng æ¯ç®åå¸é¢ä¸ä¸ä¸ªæ¯è¾ä¼ç§ç Angular ç»ä»¶åºï¼ç»ä»¶ç§ç±»å¤ä¸å ¨ï¼å¯å®å¶åç¨åº¦é«ï¼ææ¡£ä¹åå¾éä¿ææã æ¬æå°å¯¹ primeng ç»ä»¶åºè¿è¡ç®ååæï¼æç å¼çï¼å¸æè½å¯¹ç¼åä½ èªå·±çç»ä»¶åºææå¸®å©ã 项ç®ç»æè¿å ¥é¡¹ç®ç®å½åï¼è¿è¡ tree -L 1 .ï¼å¦ææ²¡æå®è£ tree å½ä»¤ï¼ä½¿ç¨ brew install tree å®è£ ï¼ï¼æ¥çç®å½ç»æã 12345678910111213"> 97<meta name="keywords" content="primeng"> 98<meta property="og:type" content="article"> 99<meta property="og:title" content="Angular ç»ä»¶åº primeng åæ"> 100<meta property="og:url" content="http://yoursite.com/2017/08/05/primeng-analysis/index.html"> 101<meta property="og:site_name" content="å端è±å"> 102<meta property="og:description" content="primeng æ¯ç®åå¸é¢ä¸ä¸ä¸ªæ¯è¾ä¼ç§ç Angular ç»ä»¶åºï¼ç»ä»¶ç§ç±»å¤ä¸å ¨ï¼å¯å®å¶åç¨åº¦é«ï¼ææ¡£ä¹åå¾éä¿ææã æ¬æå°å¯¹ primeng ç»ä»¶åºè¿è¡ç®ååæï¼æç å¼çï¼å¸æè½å¯¹ç¼åä½ èªå·±çç»ä»¶åºææå¸®å©ã 项ç®ç»æè¿å ¥é¡¹ç®ç®å½åï¼è¿è¡ tree -L 1 .ï¼å¦ææ²¡æå®è£ tree å½ä»¤ï¼ä½¿ç¨ brew install tree å®è£ ï¼ï¼æ¥çç®å½ç»æã 12345678910111213"> 103<meta property="og:locale" content="zh-Hans"> 104<meta property="og:updated_time" content="2017-08-05T04:32:19.000Z"> 105<meta name="twitter:card" content="summary"> 106<meta name="twitter:title" content="Angular ç»ä»¶åº primeng åæ"> 107<meta name="twitter:description" content="primeng æ¯ç®åå¸é¢ä¸ä¸ä¸ªæ¯è¾ä¼ç§ç Angular ç»ä»¶åºï¼ç»ä»¶ç§ç±»å¤ä¸å ¨ï¼å¯å®å¶åç¨åº¦é«ï¼ææ¡£ä¹åå¾éä¿ææã æ¬æå°å¯¹ primeng ç»ä»¶åºè¿è¡ç®ååæï¼æç å¼çï¼å¸æè½å¯¹ç¼åä½ èªå·±çç»ä»¶åºææå¸®å©ã 项ç®ç»æè¿å ¥é¡¹ç®ç®å½åï¼è¿è¡ tree -L 1 .ï¼å¦ææ²¡æå®è£ tree å½ä»¤ï¼ä½¿ç¨ brew install tree å®è£ ï¼ï¼æ¥çç®å½ç»æã 12345678910111213"> 108 109 110
111<script type="text/javascript" id="hexo.configurations"> 112 var NexT = window.NexT || {}; 113 var CONFIG = { 114 root: '/', 115 scheme: 'Pisces', 116 sidebar: {"position":"left","display":"post","offset":12,"offset_float":0,"b2t":false,"scrollpercent":false,"onmobile":false}, 117 fancybox: true, 118 motion: true, 119 duoshuo: { 120 userId: '0', 121 author: 'å主' 122 }, 123 algolia: { 124 applicationID: '', 125 apiKey: '', 126 indexName: '', 127 hits: {"per_page":10}, 128 labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"} 129 } 130 }; 131</script>
131 132 133 134 135 <link rel="canonical" href="http://yoursite.com/2017/08/05/primeng-analysis/"/> 136 137 138 139 140
141<script> 142var _hmt = _hmt || []; 143(function() { 144 var hm = document.createElement("script"); 145 hm.src = "https://hm.baidu.com/hm.js?9b56b7702f31d1fe7fab8b57548b41de"; 146 var s = document.getElementsByTagName("script")[0]; 147 s.parentNode.insertBefore(hm, s); 148})(); 149</script>
149 150 151 <title>Angular ç»ä»¶åº primeng åæ | å端è±å</title> 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167</head> 168 169<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans"> 170 171 172 173 174 175 176 <div class="container sidebar-position-left page-post-detail "> 177 <div class="headband"></div> 178 179 <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader"> 180 <div class="header-inner"><div class="site-brand-wrapper"> 181 <div class="site-meta "> 182 183 184 <div class="custom-logo-site-title"> 185 <a href="/" class="brand" rel="start"> 186 <span class="logo-line-before"><i></i></span> 187 <span class="site-title">å端è±å</span> 188 <span class="logo-line-after"><i></i></span> 189 </a> 190 </div> 191 192 <p class="site-subtitle">frontend garden</p> 193 194 </div> 195 196 <div class="site-nav-toggle"> 197 <button> 198 <span class="btn-bar"></span> 199 <span class="btn-bar"></span> 200 <span class="btn-bar"></span> 201 </button> 202 </div> 203</div> 204 205<nav class="site-nav"> 206 207 208 209 <ul id="menu" class="menu"> 210 211 212 <li class="menu-item menu-item-home"> 213 <a href="/" rel="section"> 214 215 <i class="menu-item-icon fa fa-fw fa-home"></i> <br /> 216 217 é¦é¡µ 218 </a> 219 </li> 220 221 222 <li class="menu-item menu-item-archives"> 223 <a href="/archives/" rel="section"> 224 225 <i class="menu-item-icon fa fa-fw fa-archive"></i> <br /> 226 227 彿¡£ 228 </a> 229 </li> 230 231 232 <li class="menu-item menu-item-tags"> 233 <a href="/tags/" rel="section"> 234 235 <i class="menu-item-icon fa fa-fw fa-tags"></i> <br /> 236 237 æ ç¾ 238 </a> 239 </li> 240 241 242 243 </ul> 244 245 246 247</nav> 248 249 250 251 </div> 252 </header> 253 254 <main id="main" class="main"> 255 <div class="main-inner"> 256 <div class="content-wrap"> 257 <div id="fullscreen"> 258 <i class="fa fa-arrows-alt" aria-hidden="true"></i> 259 <span id="fullscreen-text">å ¨å±é 读</span> 260 </div> 261 <div id="content" class="content"> 262 263 264 <div id="posts" class="posts-expand"> 265 266 267 268 269 270 271 272 273 <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article"> 274 <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/08/05/primeng-analysis/"> 275 276 <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"> 277 <meta itemprop="name" content="zxhfighter"> 278 <meta itemprop="description" content=""> 279 <meta itemprop="image" content="/images/avatar.gif"> 280 </span> 281 282 <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"> 283 <meta itemprop="name" content="å端è±å"> 284 </span> 285 286 287 <header class="post-header"> 288 289 290 291 <h1 class="post-title" itemprop="name headline">Angular ç»ä»¶åº primeng åæ</h1> 292 293 294 <div class="post-meta"> 295 <span class="post-time"> 296 297 <span class="post-meta-item-icon"> 298 <i class="fa fa-calendar-o"></i> 299 </span> 300 301 <span class="post-meta-item-text">å表äº</span> 302 303 <time title="å建äº" itemprop="dateCreated datePublished" datetime="2017-08-05T00:00:00+08:00"> 304 2017-08-05 305 </time> 306 307 308 309 310 311 </span> 312 313 314 <span class="post-category" > 315 316 <span class="post-meta-divider">|</span> 317 318 <span class="post-meta-item-icon"> 319 <i class="fa fa-folder-o"></i> 320 </span> 321 322 <span class="post-meta-item-text">åç±»äº</span> 323 324 325 <span itemprop="about" itemscope itemtype="http://schema.org/Thing"> 326 <a href="/categories/angular/" itemprop="url" rel="index">
327 <span itemprop="name">angular</span> 328 </a> 329 </span> 330 331 332 333 ï¼ 334 335 336 <span itemprop="about" itemscope itemtype="http://schema.org/Thing"> 337 <a href="/categories/angular/primeng/" itemprop="url" rel="index"> 338 <span itemprop="name">primeng</span> 339 </a> 340 </span> 341 342 343 344 345 </span> 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 </div> 362 </header> 363 364 365 <div class="post-body" itemprop="articleBody"> 366 367 368 369 370 371 <p><a href="http://primefaces.org/primeng/" target="_blank" rel="external">primeng</a> æ¯ç®åå¸é¢ä¸ä¸ä¸ªæ¯è¾ä¼ç§ç Angular ç»ä»¶åºï¼ç»ä»¶ç§ç±»å¤ä¸å ¨ï¼å¯å®å¶åç¨åº¦é«ï¼ææ¡£ä¹åå¾éä¿ææã</p> 372<p>æ¬æå°å¯¹ primeng ç»ä»¶åºè¿è¡ç®ååæï¼æç å¼çï¼å¸æè½å¯¹ç¼åä½ èªå·±çç»ä»¶åºææå¸®å©ã</p> 373<h2 id="项ç®ç»æ"><a href="#项ç®ç»æ" class="headerlink" title="项ç®ç»æ"></a>项ç®ç»æ</h2><p>è¿å ¥é¡¹ç®ç®å½åï¼è¿è¡ <code>tree -L 1 .</code>ï¼å¦ææ²¡æå®è£ <code>tree</code> å½ä»¤ï¼ä½¿ç¨ <code>brew install tree</code> å®è£ ï¼ï¼æ¥çç®å½ç»æã</p> 374<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line">$ tree -L 1 .</div><div class="line">.</div><div class="line">âââ .angular-cli.json --- angular-cli é ç½®æä»¶</div><div class="line">âââ LICENSE.md --- ä½¿ç¨ MIT LICENSE</div><div class="line">âââ README.md --- README</div><div class="line">âââ e2e --- åºäº Protractor çéæï¼ç«¯å°ç«¯ï¼æµè¯ï¼å æ¬å 个åºç¡ç»ä»¶</div><div class="line">âââ gulpfile.js --- ä½¿ç¨ gulp æ¥å¤çä¸äº css å image èµæº</div><div class="line">âââ karma.conf.js --- karma æµè¯é ç½®æä»¶</div><div class="line">âââ package.json --- package.json</div><div class="line">âââ primeng.d.ts --- ä½¿ç¨ es2015 模åè¯æ³å¯¼åºææç»ä»¶ä¸å®ä¹ç对象</div><div class="line">âââ primeng.js --- ä½¿ç¨ commonjs 模åè¯æ³å¯¼åºææç»ä»¶ä¸å®ä¹ç对象</div><div class="line">âââ protractor.conf.js --- e2e éææµè¯é ç½®æä»¶ï¼ä¼è¿è¡ e2e ä¸å®ä¹çæµè¯ case</div><div class="line">âââ src --- æºç®å½</div><div class="line">âââ tsconfig-aot.json --- ç¼è¯é ç½®æä»¶ï¼ä½¿ç¨ aot æå»ºï¼ææ¶æ²¡æçå°ä½¿ç¨çå°æ¹</div><div class="line">âââ tsconfig-release.json --- ç¼è¯é ç½®æä»¶ï¼ææ¶æ²¡æçå°ä½¿ç¨çå°æ¹</div><div class="line">âââ tsconfig.json --- ç¼è¯åºæ¬é ç½®ï¼ä¼è¢« src å e2e ç®å½ä¸çé ç½®æä»¶æç»§æ¿ï¼extendsï¼</div><div class="line">âââ tslint.json --- lint é ç½®</div></pre></td></tr></table></figure> 375<p>å¯ä»¥çåºï¼primeng 项ç®ç»æä¹éç¨äº angular-cli æå»ºï¼ç¸æ¯ angular-cli åå§åç项ç®ï¼å¤äºå¦ä¸å个æä»¶ï¼</p> 376<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">primeng.d.ts</div><div class="line">primeng.js</div><div class="line">tsconfig-aot.json</div><div class="line">tsconfig-release.json</div></pre></td></tr></table></figure> 377<p>ä¸è¿ææ¶æ²¡æçå° <code>tsconfig-aot.json</code> å <code>tsconfig-release.json</code> 两个ç¼è¯é ç½®æä»¶ç¨å¨ä½å¤ã</p> 378<p>忥çä¸ src ç®å½ä¸çæä»¶ï¼</p> 379<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line">$ tree -L 2 .</div><div class="line"></div><div class="line">.</div><div class="line">âââ app</div><div class="line">â âââ components --- ç»ä»¶åºï¼æ¯ä¸ªç»ä»¶ä¸ä¸ªæ¨¡å</div><div class="line">â âââ showcase --- demoåº</div><div class="line">âââ assets --- å ¨å±èµæºï¼å æ¬å¾ç(images)å䏻颿 ·å¼(themes)</div><div class="line">â âââ components --- ç»ä»¶åºç¨å°çèµæº</div><div class="line">â âââ showcase --- demoåºç¨å°çèµæº</div><div class="line">âââ environments --- ç¯å¢åéé ç½®</div><div class="line">â âââ environment.prod.ts --- çæç¯å¢åéé ç½®</div><div class="line">â âââ environment.ts --- å¼åç¯å¢åéé ç½®</div><div class="line">âââ favicon.png</div><div class="line">âââ index.html --- 主页</div><div class="line">âââ main.ts --- å ¥å£æä»¶</div><div class="line">âââ polyfills.ts --- polyfillsï¼å æ¬ core-jsãzone.jsãintlãweb-animations-js ç</div><div class="line">âââ styles.css --- å ¨å±æ ·å¼</div><div class="line">âââ test.ts --- æµè¯å ¥å£æä»¶</div><div class="line">âââ tsconfig.app.json --- 主项ç®ç¼è¯æä»¶</div><div class="line">âââ tsconfig.spec.json --- æµè¯ç¼è¯æä»¶</div><div class="line">âââ typings.d.ts --- èªå®ä¹ç±»å</div><div class="line">âââ upload.php --- ä¸ä¼ å¤ç页</div></pre></td></tr></table></figure> 380<h2 id="ç»ä»¶è®¾è®¡"><a href="#ç»ä»¶è®¾è®¡" class="headerlink" title="ç»ä»¶è®¾è®¡"></a>ç»ä»¶è®¾è®¡</h2><p>ç»ä»¶ç代ç ä½äº <code>src/app/components</code> ç®å½ä¸ï¼ç»ä»¶çä¸äºè®¾è®¡æè·¯å¦ä¸ï¼</p> 381<ul> 382<li><strong>ä¸ä¸ªç»ä»¶ä¸ä¸ªæ¨¡å</strong></li> 383</ul> 384<p>è¿æ ·å¯ä»¥å¾æ¹ä¾¿çæéå¼å ¥ç»ä»¶ï¼ä¹å©äºç»ä»¶çå¼ååç»´æ¤ã
384</p> 385<p>å¦å¤ï¼ä¸ºäºæ¹ä¾¿ï¼å¨ä¸ä¸ªæä»¶ä¸å®ä¹äºå¤ä¸ªç»ä»¶ï¼ä¸è¬æ¯è¯¥ç»ä»¶çä¸äºä¾èµç»ä»¶ï¼ï¼ä»¥å该å å«è¯¥ç»ä»¶ç模åã</p> 386<ul> 387<li>ç»ä»¶æ ·å¼<strong>å ¨å±å¼å ¥</strong></li> 388</ul> 389<p>ç»ä»¶æ ·å¼ä¸å¨ç»ä»¶ä¸åç¬å¼å ¥ï¼é£æ ·ä¼ç»ææç»ä»¶æ ·å¼æ·»å é»è®¤ç scope éå®ï¼<code>encapsulation = ViewEncapsulation.Emulated</code>ï¼ï¼å¦æå¤å±éè¦è¦çå å±ç»ä»¶æ ·å¼ï¼ä¼å¾ä¸æ¹ä¾¿ãå æ¤ç»ä»¶çæ ·å¼å ¨é¨å¨ <code>src/styles.css</code> ä¸å¼å ¥ãå½ç¶ä¹å¯ä»¥å° <code>encapsulation</code> 设置æ <code>ViewEncapsulation.None</code> æ¥é¿å scope éå®ï¼è¿ä¸¤ç§æ¹å¼äºéä¸å³å¯ã</p> 390<p><code>styles.css</code> å 容å¦ä¸ï¼</p> 391<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">@<span class="keyword">import</span> <span class="string">'assets/showcase/css/primeng.css'</span>;</div><div class="line">@<span class="keyword">import</span> <span class="string">'assets/showcase/css/code.css'</span>;</div><div class="line">@<span class="keyword">import</span> <span class="string">'assets/showcase/css/site.css'</span>;</div></pre></td></tr></table></figure> 392<p><code>assets/showcase/css/primeng.css</code> æä»¶å¼å ¥äºææ components çæ ·å¼ã</p> 393<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">@<span class="keyword">import</span> <span class="string">'../../../app/components/common/common.css'</span>;</div><div class="line">@<span class="keyword">import</span> <span class="string">'../../../app/components/autocomplete/autocomplete.css'</span>;</div><div class="line">@<span class="keyword">import</span> <span class="string">'../../../app/components/accordion/accordion.css'</span>;</div><div class="line"><span class="comment">/* ... */</span></div></pre></td></tr></table></figure> 394<ul> 395<li>å ¨é¨å èæ¨¡æ¿</li> 396</ul> 397<p>primeng å ¨é¨å°æ¨¡æ¿åæäºå èæ¨¡æ¿ï¼ä¼ç¹æ¯æä»¶å 容紧åï¼ä¸ä¼åæ£æ³¨æåï¼ç¼ºç¹å°±æ¯ç¼ºä¹è¯æ³é«äº®ï¼ç¼åHTMLæ¨¡æ¿æ æ³ä½¿ç¨ emmet çèªå¨è¯æ³æç¤ºã</p> 398<p>å¨ç»ä»¶åºä¸ï¼æä¸¤ä¸ªæä»¶å¤¹å¼å¾ç¹å«æ³¨æã</p> 399<h3 id="common-æä»¶å¤¹"><a href="#common-æä»¶å¤¹" class="headerlink" title="common æä»¶å¤¹"></a>common æä»¶å¤¹</h3><p>å¨ <code>common.css</code> ä¸å®ä¹äºéç¨æ ·å¼ï¼ä¾å¦ <code>.ui-widget</code>ã<code>.ui-helper-reset</code>çï¼è¿äºéç¨æ ·å¼å¯¹äºæ´æ¢ä¸»é¢æä¹é大ã</p> 400<p>æ¤å¤ï¼å ¶ä½å¤§é¨åæä»¶å®ä¹äºç»ä»¶åºä½¿ç¨çä¸äºå ¨å±æ§ç±»åæ¥å£ï¼ä¾å¦å¹¿æ³ä½¿ç¨ç <code>menuitem</code> ç»æã</p> 401<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// menuitem.ts</span></div><div class="line"><span class="keyword">export</span> interface MenuItem {</div><div class="line"> label?: string;</div><div class="line"> icon?: string;</div><div class="line"> command?: <span class="function">(<span class="params">event?: any</span>) =></span> <span class="keyword">void</span>;</div><div class="line"> url?: string;</div><div class="line"> routerLink?: any;</div><div class="line"> items?: MenuItem[];</div><div class="line"> expanded?: boolean;</div><div class="line"> disabled?: boolean;</div><div class="line"> visible?: boolean;</div><div class="line"> target?: string;</div><div class="line"> routerLinkActiveOptions?: any;</div><div class="line"> separator?: boolean;</div><div class="line"> badge?: string;</div><div class="line"> badgeStyleClass?: string;</div><div class="line"> style?:any;</div><div class="line"> styleClass?:string;</div><div class="line">}</div></pre></td></tr></table></figure> 402<p>å¦å¤ï¼å¨ <code>shared.ts</code> ä¸ï¼å®ä¹äºä¸äºéç¨ç模æ¿ç»ä»¶ï¼ä¾å¦ <code>p-header</code>ã<code>p-column</code>ã<code>p-templateLoader</code> çã</p> 403<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// shared.ts</span></div><div class="line">@Component({</div><div class="line"> selector: <span class="string">'p-header'</span>,</div><div class="line"> template: <span class="string">'<ng-content></ng-content>'</span></div><div class="line">})</div><div class="line"><span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">Header</span> </span>{}</div><div class="line"></div><div class="line">@Component({</div><div class="line"> selector: <span class="string">'p-footer'</span>,</div><div class="line"> template: <span class="string">'<ng-content></ng-content>'</span></div><div class="line">})</div><div class="line"><span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">Footer</span> </span>{}</div><div class="line"></div><div class="line"><span class="comment">
403// ...</span></div></pre></td></tr></table></figure> 404<h3 id="dom-æä»¶å¤¹"><a href="#dom-æä»¶å¤¹" class="headerlink" title="dom æä»¶å¤¹"></a>dom æä»¶å¤¹</h3><p>å°½ç®¡ä¸æ¨èç´æ¥æä½ domï¼ä½æ¯å¯¹äºä¸ä¸ªç»ä»¶åºæ¥è¯´ï¼æä½ dom æ¯æ æ³é¿å çï¼å æ¤ <code>domhandler.ts</code> æä»¶å°è£ äºå¤§é¨å dom æä½ã</p> 405<ul> 406<li><code>addClass</code></li> 407<li><code>addMultipleClasses</code></li> 408<li><code>removeClass</code></li> 409<li><code>hasClass</code></li> 410<li><code>siblings</code></li> 411<li><code>find</code></li> 412<li><code>findSingle</code></li> 413<li><code>index</code></li> 414<li><code>relativePosition</code></li> 415<li><code>absolutePosition</code></li> 416<li><code>getHiddenElementOuterHeight</code></li> 417<li><code>getHiddenElementOuterWidth</code></li> 418<li><code>getHiddenElementDimensions</code></li> 419<li><code>scrollInView</code></li> 420<li><code>fadeIn</code></li> 421<li><code>fadeOut</code></li> 422<li><code>getWindowScrollTop</code></li> 423<li><code>getWindowScrollLeft</code></li> 424<li><code>matches</code></li> 425<li><code>getOuterWidth</code></li> 426<li><code>getHorizontalPadding</code></li> 427<li><code>getHorizontalMargin</code></li> 428<li><code>innerWidth</code></li> 429<li><code>width</code></li> 430<li><code>getInnerHeight</code></li> 431<li><code>getOuterHeight</code></li> 432<li><code>getHeight</code></li> 433<li><code>getWidth</code></li> 434<li><code>getViewport</code></li> 435<li><code>getOffset</code></li> 436<li><code>getUserAgent</code></li> 437<li><code>isIE</code></li> 438<li><code>appendChild</code></li> 439<li><code>removeChild</code></li> 440<li><code>isElement</code></li> 441<li><code>calculateScrollbarWidth</code></li> 442<li><code>invokeElementMethod</code></li> 443<li><code>clearSelection</code></li> 444</ul> 445<p>çå°è¿ä¹ä¸å¤§ä¸²æ¹æ³åè¡¨ï¼æäººä¼çæï¼è¿ä¸å°±æ¯æåäº jQuery çä¸é¨ååè½åï¼ä¸ºä»ä¹ä¸ç´æ¥å¼å ¥ jQuery å¢ï¼</p> 446<p>è¿éå°±æ¶åå°ä¸ä¸ªåºç设计ååï¼<strong>ç»ä»¶åºç设计åºè¯¥çº¯ç²¹ï¼è½å¤æ¿æ¥å¼ç®±å³ç¨ï¼èä¸ç¨åå»é ç½®ç»ä»¶åºçä¸äºä¾èµ</strong>ã</p> 447<p>妿è¦å¼å ¥ jQueryï¼å¦æä½¿ç¨ es2015 çæ¨¡åæéå¼ç¨ï¼é£ä¹éè¦æå¨å»é ç½® jQuery ä¾èµï¼å¦æéåå ¨éå¼å ¥ï¼é£å°±éè¦å¨æå»ºæ¶å° jQuery ä»£ç æå å°æç»çæå»ºè¾åºä¸ï¼è¿å¹¶ä¸æ¯ä¸ä¸ªå¾å¥½çè®¾è®¡æ¹æ¡ã</p> 448<p>å æ¤ï¼è¿éèªå·±å®ç°äºä¸ä¸ª jQuery ç mini é忥æä½ domã</p> 449<h3 id="ç»ä»¶ä¾å"><a href="#ç»ä»¶ä¾å" class="headerlink" title="ç»ä»¶ä¾å"></a>ç»ä»¶ä¾å</h3><p>以ç»ä»¶ accordion 为ä¾ã</p> 450<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// accordion.ts</span></div><div class="line"><span class="comment">// import list</span></div><div class="line"></div><div class="line">@Component({</div><div class="line"> selector: <span class="string">'p-accordion'</span>,</div><div class="line"> template: <span class="string">`</span></div><div class="line"><span class="string"> <div [ngClass]="'ui-accordion ui-widget ui-helper-reset'" [ngStyle]="style" [class]="styleClass"></span></div><div class="line"><span class="string"> <ng-content></ng-content></span></div><div class="line"><span class="string"> </div></span></div><div class="line"><span class="string"> `</span>,</div><div class="line">})</div><div class="line"><span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">Accordion</span> <span class="title">implements</span> <span class="title">BlockableUI</span> </span>{</div><div class="line"> <span class="comment">
450// ...</span></div><div class="line">}</div><div class="line"></div><div class="line">@Component({</div><div class="line"> selector: <span class="string">'p-accordionTab'</span>,</div><div class="line"> template: <span class="string">`</span></div><div class="line"><span class="string"> <div class="ui-accordion-header"></span></div><div class="line"><span class="string"> </div></span></div><div class="line"><span class="string"> <div class="ui-accordion-content-wrapper"></span></div><div class="line"><span class="string"> </div></span></div><div class="line"><span class="string"> `</span></div><div class="line"> <span class="comment">// ...</span></div><div class="line">})</div><div class="line"><span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">AccordionTab</span> <span class="title">implements</span> <span class="title">OnDestroy</span> </span>{</div><div class="line"> <span class="comment">// ...</span></div><div class="line">}</div><div class="line"></div><div class="line">@NgModule({</div><div class="line"> imports: [CommonModule],</div><div class="line"> exports: [Accordion,AccordionTab],</div><div class="line"> declarations: [Accordion,AccordionTab]</div><div class="line">})</div><div class="line"><span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">AccordionModule</span> </span>{ }</div></pre></td></tr></table></figure> 451<p>æä»¶ä¸å®ä¹äºä¸ä¸ªæ¨¡å <code>AccordionModule</code>ï¼å®¹å¨ç»ä»¶ <code>p-accordion</code>ï¼ä»¥å颿¿ç»ä»¶ <code>p-accordionTab</code>ãå½ç¶ä¹å¯ä»¥å为ä¸ä¸ªæä»¶å»å®ä¹ç»ä»¶å模åï¼è¿ä¸¤ç§ä»£ç ç»ç»æ¹å¼ä¹æ¯ä»è è§ä»ï¼æºè è§æºçé®é¢ã</p> 452<h2 id="䏻颿 ·å¼"><a href="#䏻颿 ·å¼" class="headerlink" title="䏻颿 ·å¼"></a>䏻颿 ·å¼</h2><p>primeng ç䏻颿 ·å¼éåäºç»ä»¶ç»æå±æ ·å¼ï¼cssï¼åè
452¡¨ç°å±æ ·å¼ï¼scssï¼å离ççç¥ï¼ä¹å³ï¼</p> 453<ul> 454<li>ç»æå±æ ·å¼ï¼åªå®ä¹ç»ä»¶çç»æç¸å ³ç屿§ï¼ä¾å¦ box-model ç¸å ³å±æ§ <code>display</code>ï¼<code>position</code>ï¼<code>padding</code>ï¼<code>margin</code>ç</li> 455<li>表ç°å±æ ·å¼ï¼å®ä¹ç»ä»¶å±ç°çå¤è§å±æ§ï¼ä¾å¦ <code>border</code>ï¼<code>color</code>ï¼<code>background</code>ï¼<code>transition</code>ï¼<code>outline</code>ï¼<code>box-shadow</code>ç</li> 456</ul> 457<p>以 Button 为ä¾ï¼å¨ <code>src/app/components/button/button.css</code> ä¸ï¼å®ä¹äºæé®ç»æå±ç¸å ³æ ·å¼ã</p> 458<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/* Button */</span></div><div class="line"><span class="selector-class">.ui-button</span> {</div><div class="line"> <span class="attribute">display</span>: inline-block;</div><div class="line"> <span class="attribute">position</span>: relative;</div><div class="line"> <span class="attribute">padding</span>: <span class="number">0</span>;</div><div class="line"> <span class="attribute">margin-right</span>: .<span class="number">1em</span>;</div><div class="line"> <span class="attribute">text-decoration</span>: none <span class="meta">!important</span>;</div><div class="line"> <span class="attribute">cursor</span>: pointer;</div><div class="line"> <span class="attribute">text-align</span>: center;</div><div class="line"> <span class="attribute">zoom</span>: <span class="number">1</span>;</div><div class="line"> <span class="attribute">overflow</span>: visible; <span class="comment">/* the overflow property removes extra width in IE */</span></div><div class="line">}</div><div class="line"></div><div class="line"><span class="selector-class">.ui-button-icon-only</span> {</div><div class="line"> <span class="attribute">width</span>: <span class="number">2em</span>;</div><div class="line">}</div><div class="line"></div><div class="line"><span class="comment">/*button text element */</span></div><div class="line"><span class="selector-class">.ui-button</span> <span class="selector-class">.ui-button-text</span> {</div><div class="line"> <span class="attribute">display</span>: block;</div><div class="line"> <span class="attribute">line-height</span>: normal;</div><div class="line">}</div></pre></td></tr></table></figure> 459<p>å¨ <code>src/assets/components/themes/_theme.scss</code> ä¸ï¼å®ä¹äºç»ä»¶çä¸äºåºç¡è¡¨ç°å±æ ·å¼ï¼ä¾å¦ææçç»ä»¶é½å 嫿 <code>ui-widget</code> ç±»ï¼è¯¥ç±»å®ä¹å¦ä¸ï¼</p> 460<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.ui-widget</span> {</div><div class="line"> <span class="attribute">font-family</span>: $fontFamily;</div><div class="line"> <span class="attribute">font-size</span>: $fontSize;
460</div><div class="line"></div><div class="line"> input, select, textarea, button {</div><div class="line"> font-family: $fontFamily;</div><div class="line"> font-size: $fontSize;</div><div class="line"> }</div><div class="line"></div><div class="line"> <span class="selector-pseudo">:active</span> {</div><div class="line"> <span class="attribute">outline</span>: none;</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line"><span class="selector-class">.ui-widget-content</span> {</div><div class="line"> <span class="attribute">border</span>: $contentBorderWidth solid $contentBorderColor;</div><div class="line"> <span class="attribute">background</span>: $contentBgColor;</div><div class="line"> <span class="attribute">color</span>: $contentTextColor;</div><div class="line"></div><div class="line"> a {</div><div class="line"> color: $contentTextColor;</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure> 461<p>è¿ä¸¤ä¸ªæ ·å¼ç±»å®ä¹äºææç»ä»¶çéç¨è¡¨ç°æ ·å¼ï¼ä¾å¦åä½ãè¾¹æ¡ãèæ¯è²ã忝è²ã龿¥é¢è²çã</p> 462<p>å ¶ä¸çåéï¼ä¾å¦ <code>$fontFamily</code>ï¼<code>$contentBorderWidth</code> åå¨ä¸»é¢æä»¶ä¸å»å®ä¹ï¼primeng æä¾äºç¸å½å¤ç主é¢ï¼ä½ ä¹å¯ä»¥å¾è½»æ¾çèªå®ä¹èªå·±ç主é¢ã</p> 463<p>ä¾å¦ï¼çä¸ä¸»é¢ <code>cruze</code> çæ ·å¼å®ç°ã</p> 464<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/* src/assets/components/themes/cruze/theme.scss */</span></div><div class="line"></div><div class="line">$fontFamily: Segoe UI, Arial, sans-serif;</div><div class="line">$fontSize: 1em;</div><div class="line">$borderRadius: 6px;</div><div class="line">$disabledOpacity: 0.35;</div><div class="line"></div><div class="line">//Content</div><div class="line">$contentBorderWidth: 1px;</div><div class="line">$contentBorderColor: #dddddd;</div><div class="line">$contentBgColor: #ffffff;</div><div class="line">$contentTextColor: #444444;</div><div class="line"></div><div class="line"><span class="comment">/* ... */</span></div><div class="line"></div><div class="line">@<span class="keyword">import</span> <span class="string">'../_theme'</span>;</div></pre></td></tr></table></figure> 465<p>ä½ ä¹å¯ä»¥åä¸ä¸ªèªå·±ç主é¢é ç½®æä»¶æ¥å®ç°è½»æ¾æ¢è¤çè¦æ±ã</p> 466<h2 id="ææ¡£"><a href="#ææ¡£" class="headerlink" title="ææ¡£"></a>ææ¡£</h2><p>ææ¡£å°±æ¯ <code>src/app/showcase</code> 模åï¼å¨è¯¥æ¨¡åä¸å¼å ¥äº <code>src/app/components</code> ä¸çç»ä»¶ï¼ç¼åç¸åºçå¸®å©ææ¡£ã</p> 467<h2 id="æµè¯"><a href="#æµè¯" class="headerlink" title="æµè¯"></a>æµè¯</h2><p>primeng ææ¶æ²¡æå å«ç»ä»¶åå æµè¯ï¼åªæå¨ e2e æä»¶å¤¹æå ä¸ªéææµè¯ã</p> 468<p>ä¸ªäººå»ºè®®å¦ææ¶é´ç²¾åè¶³å¤çè¯ï¼æ¯ä¸ªç»ä»¶è¿æ¯éè¦åä¸åæµã</p> 469<p>åç»ææ¶é´ï¼ä¼æ½åºå 个æä»£è¡¨æ§çç»ä»¶è¿è¡åæï¼æ¬è¯·æå¾ ã</p> 470 471 472 </div> 473 474 <div> 475 476 477 478 479 </div> 480 481 <div> 482 483 484 <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;"> 485 <div>åæååææ¯åäº«ï¼æ¨çæ¯æå°è®©æå¨å¬å¤©æå°æ£åå¦ï¼^_^ï¼</div> 486 <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}"> 487 <span>èµ</span> 488 </button> 489 <div id="QR" style="display: none;"> 490 491 <div id="wechat" style="display: inline-block"> 492 <img id="wechat_qr" src="http://otwtmlrnk.bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E8%BD%AC%E8%B4%A6.jpeg" alt="zxhfighter WeChat Pay"/> 493 <p>微信æèµ</p> 494 </div> 495 496 497 <div id="alipay" style="display: inline-block"> 498 <img id="alipay_qr" src="http://otwtmlrnk.bkt.clouddn.com/%E6%94%AF%E4%BB%98%E5%AE%9D%E8%BD%AC%E8%B4%A6.jpeg" alt="zxhfighter Alipay"/> 499 <p>æ¯ä»å®æèµ</p> 500 </div> 501 502 </div> 503 </div> 504 505 506 507 </div> 508 509 <div> 510 511 512 513 514 </div> 515 516 <footer class="post-footer"> 517 518 <div class="post-tags"> 519 520 <a href="/tags/primeng/" rel="tag"># primeng</a> 521 522 </div> 523 524 525 526 527 528 529 530 <div class="post-nav"> 531 <div class="post-nav-next post-nav-item"> 532 533 <a href="/2017/08/01/webpack-amd/" rel="next" title="ç¨ webpack æå»º AMD 项ç®"> 534 <i class="fa fa-chevron-left"></i> ç¨ webpack æå»º AMD é¡¹ç® 535 </a> 536 537 </div> 538
539 <span class="post-nav-divider"></span> 540 541 <div class="post-nav-prev post-nav-item"> 542 543 </div> 544 </div> 545 546 547 548 549 </footer> 550 </article> 551 552 553 554 <div class="post-spread"> 555 556 </div> 557 </div> 558 559 560 </div> 561 562 563 564 565 <div id="container"></div> 566 <link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css"> 567
567<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
567 568
568<script> 569 var gitment = new Gitment({ 570 owner: 'zxhfighter', 571 repo: 'zxhfighter.github.io', 572 oauth: { 573 client_id: '7fc67caf2df967fab029', 574 client_secret: '70769447d9845a485dffda6fd22d08f1028b0525', 575 }, 576 }) 577 gitment.render('container') 578 </script>
578 579 580 581 </div> 582 583 584 585 <div class="sidebar-toggle"> 586 <div class="sidebar-toggle-line-wrap"> 587 <span class="sidebar-toggle-line sidebar-toggle-line-first"></span> 588 <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span> 589 <span class="sidebar-toggle-line sidebar-toggle-line-last"></span> 590 </div> 591 </div> 592 593 <aside id="sidebar" class="sidebar"> 594 595 <div class="sidebar-inner"> 596 597 598 599 600 <ul class="sidebar-nav motion-element"> 601 <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" > 602 æç« ç®å½ 603 </li> 604 <li class="sidebar-nav-overview" data-target="site-overview"> 605 ç«ç¹æ¦è§ 606 </li> 607 </ul> 608 609 610 <section class="site-overview sidebar-panel"> 611 <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"> 612 <img class="site-author-image" itemprop="image" 613 src="/images/avatar.gif" 614 alt="zxhfighter" /> 615 <p class="site-author-name" itemprop="name">zxhfighter</p> 616 617 <p class="site-description motion-element" itemprop="description">frontend, angular, angularjs, typescript, rxjs, spa, ionic, vue, vue.js, react, native react, nativescript</p> 618 619 </div> 620 <nav class="site-state motion-element"> 621 622 623 <div class="site-state-item site-state-posts"> 624 <a href="/archives/"> 625 <span class="site-state-item-count">3</span> 626 <span class="site-state-item-name">æ¥å¿</span> 627 </a> 628 </div> 629 630 631 632 633 634 <div class="site-state-item site-state-categories"> 635 636 <span class="site-state-item-count">3</span> 637 <span class="site-state-item-name">åç±»</span> 638 639 </div> 640 641 642 643 644 645 <div class="site-state-item site-state-tags"> 646 <a href="/tags/index.html"> 647 <span class="site-state-item-count">7</span> 648 <span class="site-state-item-name">æ ç¾</span> 649 </a> 650 </div> 651 652 653 </nav> 654 655 656 657 <div class="links-of-author motion-element"> 658 659 </div> 660 661 662 663 664 665 666 667 668 669 670 </section> 671 672 673 <!--noindex--> 674 <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"> 675 <div class="post-toc"> 676 677 678 679 680 681 682 <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#项ç®ç»æ"><span class="nav-number">1.</span> <span class="nav-text">项ç®ç»æ</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ç»ä»¶è®¾è®¡"><span class="nav-number">2.</span> <span class="nav-text">ç»ä»¶è®¾è®¡</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#common-æä»¶å¤¹"><span class="nav-number">2.1.</span> <span class="nav-text">common æä»¶å¤¹</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#dom-æä»¶å¤¹"><span class="nav-number">2.2.</span> <span class="nav-text">dom æä»¶å¤¹</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ç»ä»¶ä¾å"><span class="nav-number">2.3.</span> <span class="nav-text">ç»ä»¶ä¾å</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#䏻颿 ·å¼"><span class="nav-number">3.</span> <span class="nav-text">䏻颿 ·å¼</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ææ¡£"><span class="nav-number">4.</span> <span class="nav-text">ææ¡£</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#æµè¯"><span class="nav-number">5.</span> <span class="nav-text">æµè¯</span></a></li></ol></div> 683 684 685 </div> 686 </section> 687 <!--/noindex--> 688 689 690 691 692 </div> 693 </aside> 694 695 696 697 </div> 698 </main> 699 700 <footer id="footer" class="footer"> 701 <div class="footer-inner"> 702 <div class="copyright" > 703 704 © 705 <span itemprop="copyrightYear">2017</span> 706 <span class="with-love"> 707 <i class="fa fa-heart"></i> 708 </span> 709 <span class="author" itemprop="copyrightHolder">zxhfighter</span> 710</div> 711 712 713<div class="powered-by"> 714 ç± <a class="theme-link" href="https://hexo.io">Hexo</a> 强åé©±å¨ 715</div> 716 717<div class="theme-info"> 718 ä¸»é¢ - 719 <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next"> 720 NexT.Pisces 721 </a> 722</div> 723 724 725 726 727 728 </div> 729 </footer> 730 731 732 <div class="back-to-top"> 733 <i class="fa fa-arrow-up"></i> 734 735 </div> 736 737 738 </div> 739 740 741
742<script type="text/javascript"> 743 if (Object.prototype.toString.call(window.Promise) !== '[object Function]') { 744 window.Promise = null; 745 } 746</script>
746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770
770<script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
770 771 772 773
773<script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
773 774 775 776
776<script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
776 777 778 779
779<script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
779 780 781 782
782<script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
782 783 784 785
785<script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
785 786 787 788 789 790 791
791<script type="text/javascript" src="/js/src/utils.js?v=5.1.1"></script>
791 792 793
793<script type="text/javascript" src="/js/src/motion.js?v=5.1.1"></script>
793 794 795 796 797 798 799 800 801
801<script type="text/javascript" src="/js/src/affix.js?v=5.1.1"></script>
801 802 803
803<script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.1"></script>
803 804 805 806 807 808
808<script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.1"></script>
vendor: 1 bytes, line 808
808
809<script type="text/javascript" src="/js/src/post-details.js?v=5.1.1"></script>
809 810 811 812 813 814 815 816
816<script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.1"></script>
816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865
865<script type="text/javascript" src="/js/src/screenfull.min.js?v=5.1.1"></script>
865 866 867</body> 868</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.