はじめに
読者への挨拶。
プロジェクトの開発中に、隣接サイト用の小さなパーサーを作成する必要がありました。
この直前に、チームはDojoフレームワークを使用することを決定しました
熟考の結果、美しいHabrパーサーを作成すると同時に、Dojoを習得し、モバイル用にトラフィックを節約するという問題を解決するというアイデアが生まれました（よく読んでいます）。
このマニュアルは純粋に実用的であり、完璧であると主張していません。
機能
パーサーには2つの関数しかありません。
- ページを読み込み、コンテンツからトピックを強調表示し、見出しを表示します
- ユーザーが不要なトピックを閉じることができるようにする
最初の関数はSimple Html Dom PHPパーサーに対処するのに役立ち、2番目の関数はDojoを使用して実装されます。
ページ構成
ページはシンプルなスタイルになります。
<html> <head> <script src='dojo.js'></script> <!-- Dojo --> <script src='script.js'></script> <!-- --> <link rel='stylesheet' href='style.css' type='text/css' /> <!-- --> </head> <body> <div id='bzone'> <!-- , --> <span> </span> <!-- --> <div id='box'> <!-- --> <div id='tit' class='tit'> <!-- --> <div id='close' class='close'></div> <!-- , --> </div> <div id='text'> <!-- --> </div> </div> </div> </body> </html>
<html> <head> <script src='dojo.js'></script> <!-- Dojo --> <script src='script.js'></script> <!-- --> <link rel='stylesheet' href='style.css' type='text/css' /> <!-- --> </head> <body> <div id='bzone'> <!-- , --> <span> </span> <!-- --> <div id='box'> <!-- --> <div id='tit' class='tit'> <!-- --> <div id='close' class='close'></div> <!-- , --> </div> <div id='text'> <!-- --> </div> </div> </div> </body> </html>
CSSファイルはあまり興味がありません。コードを提供します。
body{ background:lightgrey; } #bzone{ background:gray; width:600px; min-height:600px; position:absolute; left:50%; margin-left:-300px; margin-top:50px; padding-bottom:10px; border-radius:10px; } #bzone span{ height:15px; padding:2px; position:relative; top:7px; display:block; width:597px; border-top:2px white solid; border-bottom:2px white solid; color:grey; background:lightgray; font-weight:bold; text-align:center; } #box{ width:550px; display:block; position:relative; left:25px; background:white; border:2px lightgrey solid; margin-top:10px; border-radius:10px; } #box #tit{ background:lightgrey; min-height:20px; width:100%; position:relative; font-weight:bold; color:grey; text-align:center; } #box #tit #close{ width:16px; height:16px; display:block; position:relative; float:right; background:url('img/close.png'); } #box #tit #close:hover{ background:url('img/close_h.png'); } #tit span{ display:none; } #box #text{ padding:2px; text-align:center; } #box a{ text-decoration:none; font-weight:bold; color:grey; } #box a:hover{ color:#ff6600; }
body{ background:lightgrey; } #bzone{ background:gray; width:600px; min-height:600px; position:absolute; left:50%; margin-left:-300px; margin-top:50px; padding-bottom:10px; border-radius:10px; } #bzone span{ height:15px; padding:2px; position:relative; top:7px; display:block; width:597px; border-top:2px white solid; border-bottom:2px white solid; color:grey; background:lightgray; font-weight:bold; text-align:center; } #box{ width:550px; display:block; position:relative; left:25px; background:white; border:2px lightgrey solid; margin-top:10px; border-radius:10px; } #box #tit{ background:lightgrey; min-height:20px; width:100%; position:relative; font-weight:bold; color:grey; text-align:center; } #box #tit #close{ width:16px; height:16px; display:block; position:relative; float:right; background:url('img/close.png'); } #box #tit #close:hover{ background:url('img/close_h.png'); } #tit span{ display:none; } #box #text{ padding:2px; text-align:center; } #box a{ text-decoration:none; font-weight:bold; color:grey; } #box a:hover{ color:#ff6600; }
取得したものは次のとおりです。
パーサーの仕事
ダウンロードしたSimple Html Domパーサーを接続して、 愛らしいページをロードします。
require 'simple_html_dom.php'; $html = file_get_html('http://habrahabr.ru/');
require 'simple_html_dom.php'; $html = file_get_html('http://habrahabr.ru/');
参照クラスでトピックを認識します： class = "topic"
foreach ($html->find('.topic') as $e) { /* */ echo" <div id='box'> /* */ <div id='tit' class='tit'> "; echo "<a href='"; /* */ echo $e->href; echo "'>"; echo $e->href; echo "</a>"; echo" <div id='close' class='close'></div> </div> <div id='text'>"; /* - */ echo $e->innertext ; echo " </div> </div> "; }
foreach ($html->find('.topic') as $e) { /* */ echo" <div id='box'> /* */ <div id='tit' class='tit'> "; echo "<a href='"; /* */ echo $e->href; echo "'>"; echo $e->href; echo "</a>"; echo" <div id='close' class='close'></div> </div> <div id='text'>"; /* - */ echo $e->innertext ; echo " </div> </div> "; }
したがって、プロジェクトはすでに完全に機能し、使いやすさと美しさを追加します。
日本の魔法
記事の冒頭に、dojo.jsとscript.jsの2つのスクリプトを含めました。
2番目のファイルでは、ユーザビリティに関連するすべてのコードを取り出しました。
dojo.addOnLoad(function(){ dojo.query(".tit .close").connect("onclick",function(){ // var nn=this; dojo.anim(nn,{height:0}).play(); dojo.anim(nn.parentNode,{height:0}).play(); // , , dojo.anim(nn.parentNode.parentNode,{height:0}).play(); dojo.empty(nn.parentNode.parentNode); }); });
dojo.addOnLoad(function(){ dojo.query(".tit .close").connect("onclick",function(){ // var nn=this; dojo.anim(nn,{height:0}).play(); dojo.anim(nn.parentNode,{height:0}).play(); // , , dojo.anim(nn.parentNode.parentNode,{height:0}).play(); dojo.empty(nn.parentNode.parentNode); }); });
閉じるボタンをクリックすると、ブロックが美しく折りたたまれます。
おわりに
私たちの小さなパーサーは、Habrからトピックを非常に素早く引き出し、
テープの形でそれらを提示します。
さらに、興味のない要素を非表示にすることができます。これには、目を楽にする滑らかなアニメーションが伴います。
最終結果
このプロジェクトには多くの改善が必要ですが、基本的な実用ガイドとしての機能は良好に機能します。
この記事が誰かに役立つことを願っています。このトピックを作成する予定です。