業務アプリ メニュー画面にアイコンボタンを追加（webix)No.019
前回のメニューサンプルは、パソコンのような大きな画面では、使えますが、スマホなどの小さい画面では操作性が悪いですよね。対策として、アイコンボタンでメニューを構成してみました。パソコンでは、ボタンを5列まで表示し、スマホでは、2列で表示しています。
以下は、表示例です。
パソコンのとき
スマホのとき
パソコンとPCでレイアウトを変更する操作は、PHP側でデバイスタイプを判断してJavascriptのソース作成時に変更する実装が正式ですが、今回は、ソースを見やすいように、Jacascript側で判断しています。
メニューアイコンは、すべてのメニューを表示するより、事前に選択した（よく使うメニューを選択）メニューを表示する実装の方が、現実的です。
サンプルソースでは、そのあたりの実装を省略しています。
また、アイコンボタンの色指定は、CSS(スタイル）で定義しています。この定義もPHP（サーバ側）でDBを検索後に、情報によって、JavascriptやHTML（スタイル定義）を編集するロジックが必要となります。
サンプルでは、編集後のソースとしてみてください。
webixのいくつかのコンポーネントを組み合わせた画面になっています。いろいろなコンポーネントを組み合わせると、ソースが少し複雑になっていますので、webixのマニュアルを参照にしながらみてください。
以下に変更したメニューのソース（UI）を紹介します。
webix_menu_samle.php
<?php
//webix_menu_samle.php
$TITLE_INFO ="webix";
$VER_INFO ="V01L10";
define('ROOT_PATH','/home/sunsun/www/webix01'); //ソースを保存しているパス（動作環境に応じて記述する必要あり）
define('SUB_FOLDER','/webix01'); //サブフォルダを指定したURL
$userid = 'admin';
$myfilename = basename(__FILE__); //自分自身のファイル名取得
$logheader = 'userid='.$userid.', '.$myfilename.':';//ログ出力時のヘッダー情報（自ファイル名,ログインIDを付与）
if(isset($_POST['userid'])){
$userid = $_POST['userid'];
}
$devicemode = "1";
if(isset($_POST['devicemode'])){
$devicemode = $_POST['devicemode'];
}
$userdevice = "pc";
if(isset($_POST['userdevice'])){
$userdevice = $_POST['userdevice'];
}
$logheader = 'userid='.$userid.', '.$myfilename.':';//ログ出力時のヘッダー情報（自ファイル名,ログインIDを付与）
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache">
<script src="<?php echo SUB_FOLDER; ?>/webix_GPL_1020/webix.js"></script>
<link href="<?php echo SUB_FOLDER; ?>/webix_GPL_1020/skins/compact.css?<?php echo date('Ymd-H'); ?>" rel="stylesheet" type="text/css">
<link href="<?php echo SUB_FOLDER; ?>/commonlib/webix_custom_css.css?<?php echo date('Ymd-H'); ?>" rel="stylesheet" type="text/css">
<link rel="icon" href="<?php echo SUB_FOLDER; ?>/image/webix_64.ico">
<script src="<?php echo SUB_FOLDER; ?>/commonlib/moment-with-locales.js"></script>
<link rel="stylesheet" href="<?php echo SUB_FOLDER; ?>/webix_GPL_1020/css/materialdesignicons.min.css" type="text/css" charset="utf-8">
<title><?php echo $TITLE_INFO.' ('.$VER_INFO.')' ?></title>
<style>
.h_title {
color: #FFFFFF;
}
.pop_style_er .webix_popup_title {
font-size: 25px;
color: red;
}
.pop_style_wr .webix_popup_title {
font-size: 25px;
color: blue;
}
.button_css button.webix_button{
background: #00007C;
border:1px solid #FFFFFF;
color: #FFFFFF;
font-size: 10px;
}
.webix_icon1{
font-size: 48px;
}
.bt_1 button.webix_button{
background: #4CB050;
border:1px solid #FFFFFF;
color: #000000;
font-size: 10px;
}
.bt_2 button.webix_button{
background: #3F51B5;
border:1px solid #FFFFFF;
color: #000000;
font-size: 10px;
}
.bt_3 button.webix_button{
background: #2196F3;
border:1px solid #FFFFFF;
color: #000000;
font-size: 10px;
}
.bt_4 button.webix_button{
background: #FF9700;
border:1px solid #FFFFFF;
color: #000000;
font-size: 10px;
}
.bt_5 button.webix_button{
background: #00BCD4;
border:1px solid #FFFFFF;
color: #000000;
font-size: 10px;
}
.button_css button.webix_button{
background: #00007C;
border:1px solid #FFFFFF;
color: #FFFFFF;
font-size: 10px;
}
</style>
</head>
<body>
<script type="text/javascript" charset="utf-8">
webix.i18n.setLocale("ja-JP");
var userid = '<?php echo $userid; ?>';
var devicemode = '<?php echo $devicemode; ?>';
var userdevice = '<?php echo $userdevice; ?>';
var menu_data = [
{id: "100", icon: "mdi mdi-logout", value:"ログアウト",menutyep:"menu",url:"/webix01/sample_login.php"},
{id: "200", icon: "mdi mdi-view-comfy", value: "マスター管理",menutyep:"group", data:[
{ id: "201", icon: "mdi mdi-collage", value: "組織",menutyep:"menu",url:""},
{ id: "202",icon: "mdi mdi-human", value: "従業員",menutyep:"menu",url:"/webix01/view/ZTEST/webix_sample08.php"}
]},
{id: "300", icon: "mdi mdi-table", value:"帳簿",menutyep:"group", data:[
{id: "301",icon:"mdi mdi-alpha-e-box-outline", value: "電子帳簿",menutyep:"menu",url:"/webix01/view/UD0010/UD0010_upload_lists.php"},
]},
{id: "400", icon: "mdi mdi-qrcode", value:"QRコード",menutyep:"menu",url:"/webix01/view/QR0010/QR0012_QRcode_read.php"},
{id: "500", icon: "mdi mdi-help", value:"HELP",menutyep:"group", data:[
{id: "501", icon: "mdi mdi-license",value: "webix Lisnce",menutyep:"menu",url:"/webix01/folder/pdf/GPL_LICENSE.pdf"},
]},
];
function exec_menu(url_info,win_mode,userid){
if(win_mode == ""){
webix.send(url_info,{userid:userid}, "GET");
}
else{
webix.send(url_info,{userid:userid}, "GET",win_mode);
}
}
var my_menu_button_collection = {};
if(userdevice == "smd"){
my_menu_button_collection ={
margin:5,
rows:[
{height:100, cols: [
{ view:"button", label: '<span class="webix_icon1 mdi mdi-logout"></span><div class="text">ログアウト</div>',width:100,inputWidth:100,css:"bt_1",
click:function(){
exec_menu("/webix01/sample_login.php",'',userid);
}
},
{ view:"button", label: '<span class="webix_icon1 mdi mdi-human"></span><div class="text">従業員</div>',width:100,inputWidth:100,css:"bt_2",
click:function(){
exec_menu("/webix01/view/ZTEST/webix_sample08.php",'_blank',userid);
}
},
]
},
{height:100, cols: [
{ view:"button", label: '<span class="webix_icon1 mdi mdi-alpha-e-box-outline"></span><div class="text">電子帳簿</div>',width:100,inputWidth:100,css:"bt_3",
click:function(){
exec_menu("/webix01/view/UD0010/UD0010_upload_lists.php",'_blank',userid);
}
},
{ view:"button", label: '<span class="webix_icon1 mdi mdi-qrcode"></span><div class="text">QRコード</div>',width:100,inputWidth:100,css:"bt_4",
click:function(){
exec_menu("/webix01/view/QR0010/QR0012_QRcode_read.php",'_blank',userid);
}
},
]
}
]
};
}
else{
my_menu_button_collection ={
margin:5,
rows:[
{height:100, cols: [
{ view:"button", label: '<span class="webix_icon1 mdi mdi-logout"></span><div class="text">ログアウト</div>',width:100,inputWidth:100,css:"bt_1",
click:function(){
exec_menu("/webix01/sample_login.php",'',userid);
}
},
{ view:"button", label: '<span class="webix_icon1 mdi mdi-human"></span><div class="text">従業員</div>',width:100,inputWidth:100,css:"bt_2",
click:function(){
exec_menu("/webix01/view/ZTEST/webix_sample08.php",'_blank',userid);
}
},
{ view:"button", label: '<span class="webix_icon1 mdi mdi-alpha-e-box-outline"></span><div class="text">電子帳簿</div>',width:100,inputWidth:100,css:"bt_3",
click:function(){
exec_menu("/webix01/view/UD0010/UD0010_upload_lists.php",'_blank',userid);
}
},
{ view:"button", label: '<span class="webix_icon1 mdi mdi-qrcode"></span><div class="text">QRコード</div>',width:100,inputWidth:100,css:"bt_4",
click:function(){
exec_menu("/webix01/view/QR0010/QR0012_QRcode_read.php",'_blank',userid);
}
},
]
}
]
};
}
var form_collection1 = [my_menu_button_collection];
if(userdevice == "smd"){
var menu_tab_width = 200;
var mymenu_form_width = 340
}
else{
var menu_tab_width = 680;
var mymenu_form_width = 680;
}
var mymenu_datas = {
animate:false,
cells:[
{
id:"Menu1",
view:"form", //作成されるエレメントの種類
scroll:"auto", //構成画面のスクロール設定
elements:form_collection1 , //フォームの構成要素を指定
width:menu_tab_width, //フォームの横幅
margin:3,
elementsConfig:{
labelPosition:"top",
labelWidth:140,
bottomPadding:18
}
}
]
};
var menu_tabbar = [{
view:"tabbar", type:"bottom", multiview:true,id:"menu_tabbar", options: [
{ value: "<span class='webix_icon wxi-user'></span><span style='padding-left: 4px'>マイメニュー</span>", id: 'Menu1' },
],height:10
},
mymenu_datas
];
var mymenu_form_data = {
view:"form", //作成されるエレメントの種類
id: "form1", //参照用のID情報
scroll:"auto",//構成画面のスクロール設定
elements:menu_tabbar , //フォームの構成要素を指定
width:mymenu_form_width, //フォームの横幅
margin:3,
elementsConfig:{
labelPosition:"top",
labelWidth:140,
bottomPadding:18
}
};
webix.ready(function(){
webix.ui({
rows: [
{ view: "toolbar", padding:3, elements: [
{ view: "icon", icon: "mdi mdi-menu",tooltip:"最小表示", click: function(){
$$("$sidebar1").toggle();
}
},
{ view: "label", label: "メニュー"},
{ view: "button", type: "icon", width: 45, icon: "mdi mdi-logout",tooltip:"ログアウト",
click:function(){
exec_menu("/webix01/sample_login.php",'',userid);
}
},
]
},
{ cols:[
{ view: "sidebar",
data: menu_data,
on:{
onAfterSelect: function(id){
var item = this.getItem(id);
if(item.url == ""){
webix.alert("本メニューは、未実装です。");
return;
}
if(item.value == "ログアウト"){
webix.send(item.url,{userid:userid}, "GET"); //ログインしたログインIDを付与して開く
return
}
else{
window.open(item.url, '_blank'); //新規タブで機能を開く
$$("sidebar").unselect(id);
}
}
}
},
{padding:5,cols:[
mymenu_form_data,
]
}
]
},
]
});
if(userdevice == "smd"){
webix.ui.fullScreen();
$$("$sidebar1").toggle();
}
});
</script>
</body>
</html>
今回の修正の結果、No.018の記述が変更となりますので、ご了承願います。
動作確認用のサンプルURLは、以下のとおりです。ログイン操作から実施願います。尚、個別メニュー側は閉じるボタン未実装なので、各画面を手動で閉じてください。今後、個別画面も変更します。
この記事が気に入ったらサポートをしてみませんか？