モバイルウェブサイトサイトを作成したいのですが、ナビゲーションを画面サイズに適応させようとしています。ナビゲーションのHTML構造が変更されます。CSSと@MEDIAの呼び出しを使用できることを認識しています。ただし、私の場合は適用されません。ZURBフレームワークのFoundationを使用しているため、要素をULからDDまたはDLなどに変更する必要があります。
いくつかのソースを調べたところ、AJAXの準備が整う前にPHPが最初に読み込まれるため、モバイルデバイスでナビゲーションを正しく表示できないことがわかりました。
画面サイズを検出し、その値をJoomlaのPHPメニュー生成関数に伝達する方法が必要でした。
私は次のことを試しました：
window.onload = function(){
var height = $(window).height();
var width = $(window).width();
$.ajax({
type: "POST",
url: '',
data: {
"height": height,
"width": width
},
success: function (data) {
},
});
}
mod_menuサンプル：
<?php
require_once('FirePHPCore/FirePHP.class.php');
$firephp = FirePHP::getInstance(true);
ob_start();
$width = $_POST['width'];
$firephp->group('Test Group');
$firephp->log('Width');
$firephp->log($width);
$firephp->groupEnd();
?>
if ($width > 767) {
?>
<!-- The class on the root UL tag was changed to match the Foundation nav style -->
<ul class="nav-bar<?php echo $params->get('class_sfx');?>"<?php
$tag = '';
if ($params->get('tag_id')!=NULL) {
$tag = $params->get('tag_id').'';
echo ' id="'.$tag.'"';
}
?>>
<?php
foreach ($list as $i => &$item) :
$id = '';
if($item->id == $active_id)
{
$id = ' id="current"';
}
$class = '';
if(in_array($item->id, $path))
{
$class .= 'current ';
}
if($item->deeper) {
$class .= 'parent ';
}
$class = ' class="'.$class.'item'.$item->id.'"';
echo '<li'.$id.$class.'>';
// Render the menu item.
switch ($item->type) :
case 'separator':
case 'url':
case 'component':
require JModuleHelper::getLayoutPath('mod_menu', 'default_'.$item->type);
break;
default:
require JModuleHelper::getLayoutPath('mod_menu', 'default_url');
break;
endswitch;
// The next item is deeper.
if ($item->deeper) {
echo '<ul>';
}
// The next item is shallower.
elseif ($item->shallower) {
echo '</li>';
echo str_repeat('</ul></li>', $item->level_diff);
}
// The next item is on the same level.
else {
echo '</li>';
}
endforeach;
?></ul>
<?php } ?>
次に、if条件を使用して画面の幅を確認し、ナビゲーションのタイプを選択します。1つのナビゲーションはUL構造を使用し、もう1つはDLDD構造を使用する必要があります。
FirePHPを使用してページがどのように読み込まれるかを確認しましたが、Ajaxの準備が整う前にPHPが最初に読み込まれるため、ナビゲーションが表示されません。そのため、ナビゲーションが表示されません。PHPで、Ajaxの準備ができるまで待つか、ページの一部を待つ必要があります。ここからどこへ行けばいいのかわからない。
私はJoomlaMooToolsを見ていますが、それを利用してAjaxが読み込まれるのを待ってからページが読み込まれるかどうかはわかりません。
Joomlaで新しいメニュー項目を作成したり、Joomlaで物を隠して機能させるなど、もっと簡単な方法があることは承知していますが、もっとクリーンでエレガントな方法が必要です。
誰かがコードサンプルを持っている場合。投稿してください。