widgets/ec_category_menu/include/template/admin_menu.tmpl.html

   1 <patTemplate:tmpl name="_widget">\r
   2 <link rel="stylesheet" href="{_ROOT_URL}/scripts/js_color_picker_v2/js_color_picker_v2.css" media="screen" />\r
   3 <script src="{_ROOT_URL}/scripts/js_color_picker_v2/color_functions.js"></script>\r
   4 <script type="text/javascript" src="{_ROOT_URL}/scripts/js_color_picker_v2/js_color_picker_v2.js"></script>\r
   5 <style type="text/css">\r
   6 <!--\r
   7 /* menu item with sub menu */\r
   8 .eccascademenu .hassubmenu {\r
   9         color: {COLOR4};\r
  10         background: url({_WIDGET_URL}/images/{FILENAME}) 0 -96px;\r
  11 }\r
  12 .eccascademenu {\r
  13         width: 160px;   /* menu width */\r
  14         border-style: none;\r
  15         border-width: 0px;\r
  16         margin: 0px;\r
  17 }\r
  18 .eccascademenu ul {\r
  19         list-style: none;\r
  20         margin: 0px;\r
  21         padding: 0px;\r
  22 }\r
  23 .eccascademenu  ul li {\r
  24         position: relative;     /* submenu position */\r
  25         background-image:none;\r
  26         padding: 0px;\r
  27         list-style       : none;\r
  28         list-style-image : none;\r
  29         height:32px;\r
  30         width: 160px;\r
  31         \r
  32         margin: 0px;\r
  33 }\r
  34 .eccascademenu ul li a {\r
  35         color: {COLOR1};\r
  36         height:100%;\r
  37         text-decoration: none;\r
  38         text-align:center;      /* centering text */\r
  39         line-height:30px;       /* centering text */\r
  40         overflow: auto;         /*force hasLayout in IE7 */\r
  41         /*border: 1px solid #ccc;*/ /* menu item outline */\r
  42         background: url({_WIDGET_URL}/images/{FILENAME});\r
  43 }\r
  44 .eccascademenu ul li a:link, .eccascademenu ul li a:visited {\r
  45         display: block;\r
  46 /*        background: url({_WIDGET_URL}/images/menu1.png);*/\r
  47 }\r
  48 \r
  49 .eccascademenu ul li a:hover, .eccascademenu li #current {\r
  50         color: {COLOR2};\r
  51         background: url({_WIDGET_URL}/images/{FILENAME}) 0 -32px;\r
  52 }\r
  53 \r
  54 .eccascademenu ul li a:active {\r
  55         color: {COLOR3};\r
  56         background: url({_WIDGET_URL}/images/{FILENAME}) 0 -64px;\r
  57 }\r
  58 /* sub menu */\r
  59 .eccascademenu ul li ul{\r
  60         position: absolute;\r
  61         top: 0;\r
  62         visibility: hidden;\r
  63 }\r
  64 /* for IE6 */\r
  65 * html .eccascademenu ul li { float: left;}\r
  66 /* 以下は、カスケードメニューがtableタグ内にあり、メニュー生成のjavascriptがtableタグ外にあると正しく表示できない問題を回避するもの */\r
  67 * html .eccascademenu ul li ul { margin-left: 160px;}\r
  68 \r
  69 /************* 以下はサンプル画像表示用 **************/\r
  70 .eccascademenu #normal {\r
  71         background: url({_WIDGET_URL}/images/{FILENAME});\r
  72 }\r
  73 .eccascademenu #active {\r
  74         background: url({_WIDGET_URL}/images/{FILENAME}) 0 -32px;\r
  75 }\r
  76 .eccascademenu #clicked {\r
  77         background: url({_WIDGET_URL}/images/{FILENAME}) 0 -64px;\r
  78 }\r
  79 .eccascademenu #submenu {\r
  80         background: url({_WIDGET_URL}/images/{FILENAME}) 0 -96px;\r
  81 }\r
  82 -->\r
  83 </style>\r
  84 <script type="text/javascript">\r
  85 <!--\r
  86 function updateItem(serialNo){\r
  87     if (!window.confirm('メニューを更新しますか?')) return false;\r
  88     document.main.act.value = 'update';\r
  89     document.main.submit();\r
  90     return true;\r
  91 }\r
  92 \r
  93 function selectMenu(){\r
  94     document.main.act.value = 'select';\r
  95     document.main.submit();\r
  96     return true;\r
  97 }\r
  98 function uploadCheck(){\r
  99         document.upload.act.value = 'upload';\r
 100         if (window.confirm('ファイルをアップロードします')){\r
 101                 document.upload.submit();\r
 102         }\r
 103 }\r
 104 function changeColor1(){\r
 105         $('normal').style.color = $('item_color1').value;\r
 106 }\r
 107 function changeColor2(){\r
 108         $('active').style.color = $('item_color2').value;\r
 109 }\r
 110 function changeColor3(){\r
 111         $('clicked').style.color = $('item_color3').value;\r
 112 }\r
 113 function changeColor4(){\r
 114         $('submenu').style.color = $('item_color4').value;\r
 115 }\r
 116 // 画像表示\r
 117 function showImage(filename){\r
 118         var imgPath = '{_WIDGET_URL}/images/' + filename;\r
 119         m3_showImagePopup(imgPath, filename);\r
 120 }\r
 121 // -->\r
 122 </script>\r
 123 <div align="center">\r
 124 <br />\r
 125 <!-- m3:ErrorMessage -->\r
 126 <table border="0" cellpadding="0" cellspacing="0"><tr><td><!-- don't remove this line for ie bug -->\r
 127 <div class="eccascademenu">\r
 128 <label>メニューサンプル</label>\r
 129 <ul id="category_menu">\r
 130 <li><a id="current" href="#">項目 1</a></li>\r
 131 <li><a href="#">項目 2</a></li>\r
 132 <li><a href="#">Folder 1</a>\r
 133   <ul>\r
 134   <li><a href="#">サブ項目 1.1</a></li>\r
 135   <li><a href="#">サブ項目 1.2</a></li>\r
 136   </ul>\r
 137 </li>\r
 138 <li><a href="#">項目 3</a></li>\r
 139 <li><a href="#">Folder 2</a>\r
 140   <ul>\r
 141   <li><a href="#">Sub Item 2.1</a></li>\r
 142   <li><a href="#">Folder 2.1</a>\r
 143     <ul>\r
 144     <li><a href="#">Sub Item 2.1.1</a></li>\r
 145     <li><a href="#">Sub Item 2.1.2</a></li>\r
 146     <li><a href="#">Sub Item 2.1.3</a></li>\r
 147     <li><a href="#">Sub Item 2.1.4</a></li>\r
 148     </ul>\r
 149   </li>\r
 150   </ul>\r
 151 </li>\r
 152 <li><a href="#">Item 4</a></li>\r
 153 </ul>\r
 154 </div>\r
 155 <!-- 以下のスクリプトはtableタグの内側にメニューと共に存在する必要がある(IE5バグ回避のため) -->\r
 156 <script type="text/javascript">\r
 157 <!--\r
 158 var menu = new m3_cascadeMenu('category_menu');\r
 159 // -->\r
 160 </script>\r
 161 </tr></td></table><!-- don't remove this line for ie bug -->\r
 162 <br />\r
 163 <form method="post" name="main">\r
 164 <input type="hidden" name="act" />\r
 165 <input type="hidden" name="serial" value="{SERIAL}" />\r
 166 <table>\r
 167 <tr><td>\r
 168 <table class="simple-table" border="0" cellpadding="0" cellspacing="0" align="center">\r
 169     <tbody>\r
 170         <tr>\r
 171             <td class="table-head">メニュータイトル</td>\r
 172             <td colspan="2">\r
 173                 <input type="text" name="item_title" value="{TITLE}" size="30" maxlength="30" />\r
 174             </td>\r
 175         </tr>\r
 176         <tr class="even">\r
 177             <td class="table-head">画像メニュー</td>\r
 178             <td colspan="2">\r
 179                 <input type="checkbox" name="item_image_menu" {IMAGE_MENU} />\r
 180             </td>\r
 181         </tr>\r
 182         <tr>\r
 183             <td class="table-head">画像ファイル</td>\r
 184             <td>\r
 185             <select name="item_image" onchange="selectMenu();">\r
 186                 <patTemplate:tmpl name="image_file_list">\r
 187                 <option value="{VALUE}" {SELECTED}>{NAME}</option>\r
 188                 </patTemplate:tmpl>\r
 189             </select>\r
 190             </td>\r
 191             <td align="right">\r
 192             <input type="button" value="画像を表示" onclick="showImage(document.forms[0].item_image.value);" />\r
 193             </td>\r
 194         </tr>\r
 195         <tr class="even">\r
 196             <td class="table-head">文字の色</td>\r
 197             <td>\r
 198                 <div class="eccascademenu">\r
 199                 <ul>\r
 200                 <li><a id="normal" href="#" style="color:{COLOR1};">通常表示</a></li>\r
 201                 <li><a id="active" href="#" style="color:{COLOR2};">アクティブ表示</a></li>\r
 202                 <li><a id="clicked" href="#" style="color:{COLOR3};">クリック時</a></li>\r
 203                 <li><a id="submenu" href="#" style="color:{COLOR4};">サブメニューあり</a>\r
 204                 </ul>\r
 205                 </div>\r
 206             </td>\r
 207             <td>\r
 208             <div style="height:32px;">\r
 209             <input type="text" id="item_color1" name="item_color1" value="{COLOR1}" size="7" maxlength="7" onchange="changeColor(this);" style="width:70px;margin-top:7px" />\r
 210             <input type="button" value="カラー" onclick="showColorPicker(this,document.forms[0].item_color1,changeColor1);" />\r
 211             </div>\r
 212             <div style="height:32px;">\r
 213             <input type="text" id="item_color2" name="item_color2" value="{COLOR2}" size="7" maxlength="7" style="width:70px;margin-top:7px" />\r
 214             <input type="button" value="カラー" onclick="showColorPicker(this,document.forms[0].item_color2,changeColor2);" />\r
 215             </div>\r
 216             <div style="height:32px;">\r
 217             <input type="text" id="item_color3" name="item_color3" value="{COLOR3}" size="7" maxlength="7" style="width:70px;margin-top:7px" />\r
 218             <input type="button" value="カラー" onclick="showColorPicker(this,document.forms[0].item_color3,changeColor3);" />\r
 219             </div>\r
 220             <div style="height:32px;">\r
 221             <input type="text" id="item_color4" name="item_color4" value="{COLOR4}" size="7" maxlength="7" style="width:70px;margin-top:7px" />\r
 222             <input type="button" value="カラー" onclick="showColorPicker(this,document.forms[0].item_color4,changeColor4);" />\r
 223             </div>\r
 224             </td>\r
 225         </tr>\r
 226         <tr>\r
 227             <td class="table-head">表示階層</td>\r
 228             <td colspan="2">\r
 229                 <input type="text" name="item_level_count" value="{LEVEL_COUNT}" size="2" maxlength="2" />まで\r
 230             </td>\r
 231         </tr>\r
 232         <tr class="even">\r
 233         <td align="center" colspan="2">\r
 234         </td>\r
 235         <td align="center">\r
 236                 <input type="button" class="button" onclick="updateItem();" value="更新" />\r
 237         </td>\r
 238         </tr>\r
 239     </tbody>\r
 240 </table>\r
 241 </td></tr>\r
 242 </table>\r
 243 </form>\r
 244 <form enctype="multipart/form-data" method="post" name="upload">\r
 245 <input type="hidden" name="act" />\r
 246 <table class="simple-table" border="0" cellpadding="0" cellspacing="0" align="center">\r
 247     <tbody>\r
 248         <tr>\r
 249             <td class="table-head" colspan="2">画像アップロード</td>\r
 250         </tr>\r
 251         <tr>\r
 252             <td colspan="2"><input type="file" name="upfile" size="50" /></td>\r
 253         </tr>\r
 254         <tr class="even">\r
 255         <td>\r
 256         </td>\r
 257         <td align="right">\r
 258                 <input type="button" class="button" onclick="uploadCheck();" value="アップロード" />\r
 259         </td>\r
 260         </tr>\r
 261     </tbody>\r
 262 </table>\r
 263 </form>\r
 264 </div>\r
 265 </patTemplate:tmpl>\r