За последние 24 часа нас посетили 17206 программистов и 1686 роботов. Сейчас ищут 1224 программиста ...

DOM

Тема в разделе "JavaScript и AJAX", создана пользователем artem-Kuzmin, 8 мар 2012.

Страница 1 из 2
  1. artem-Kuzmin

    artem-Kuzmin Активный пользователь

    С нами с:
    16 фев 2012
    Сообщения:
    809
    Симпатии:
    0
    Люди кто ни будь знает способ перемещения элемента по DOM с сохранением обработчиков на этом элементе.

    Добавлено спустя 26 секунд:
    Не навешиванием их повторно, а с сохранением
     
    #1 artem-Kuzmin, 8 мар 2012
  2. sobachnik

    sobachnik Старожил

    С нами с:
    20 апр 2007
    Сообщения:
    3.380
    Симпатии:
    13
    Адрес:
    Дмитров, МО
    Код (Text):
    1. function moveElement() {
    2.     var elem = document.getElementById('third');
    3.     document.getElementById('second').removeChild(elem);
    4.     document.getElementById('first').appendChild(elem);
    5. }
    Переместит элемент с id="third" из элемента с id="second" в элемент с id="first". Стили, обработчики - сохранятся. Пример:

    Код (Text):
    1. <html>
    2.     <head>
    3.         <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    4.         <title>ТЕСТ</title>
    5.         <script type="text/javascript">
    6.             function moveElement() {
    7.                 var elem = document.getElementById('third');
    8.                 document.getElementById('second').removeChild(elem);
    9.                 document.getElementById('first').appendChild(elem);
    10.             }
    11.         </script>
    12.         <style type="text/css">
    13.             #first {
    14.                 border: solid 1px black;
    15.                 width: 300px;
    16.                 height: 150px;
    17.             }
    18.             #second {
    19.                 border: solid 1px black;
    20.                 width: 200px;
    21.                 height: 100px;
    22.             }
    23.             #third {
    24.                 border: solid 1px black;
    25.                 background-color: black;
    26.                 width: 100px;
    27.                 height: 50px;
    28.             }
    29.         </style>
    30.     </head>
    31.     <body>
    32.         <input type="button" onclick="moveElement()" value="Переместить" />
    33.         <div id="first">
    34.             <div id="second">
    35.                 <div id="third" onclick="javascript:alert('ASD')"></div>
    36.             </div>
    37.         </div>
    38.     </body>
    39. </html>
     
    #2 sobachnik, 9 мар 2012
  3. artem-Kuzmin

    artem-Kuzmin Активный пользователь

    С нами с:
    16 фев 2012
    Сообщения:
    809
    Симпатии:
    0
    Если обработчки навешены...
    document.getElementById('id').onclick=handlend
    Они при таком переносе исчезают...
    <div id="third" onclick="javascript:alert('ASD')"></div> А такие это не совсем то я так весь код загажу..
    Ну я впринципе чтоб особо не возиться заново на все нужные мне элементы кидаю обработчики как при старте страницы...
    Просто есть структура....
    Код (Text):
    1. <ul class="menu" id="menu">
    2. <li id="m_1">
    3. <div class="position">
    4. <a href="#" class="top"></a>
    5. <a href="#" class="bottom"></a>
    6. </div>
    7. <input type="text" name="" value="Контакты" />
    8. <input type="text" name="" value="main.html" />
    9. <input type="text" name="" value="это контакты" />
    10. <a href="#" class="add_pod_menu">Создать Подменю</a>
    11. </li>
    12. <li id="m_2">
    13. <div class="position">
    14. <a href="#" class="top"></a>
    15. <a href="#" class="bottom"></a>
    16. </div>
    17. <input type="text" name="" value="О нас" />
    18. <input type="text" name="" value="main.html" />
    19. <input type="text" name="" value="это о нас" />
    20. <a href="#" class="del_pod_menu">Удалить Подменю</a>
    21. <ul class="menu" id="menu1">
    22. <li id="m_2_1">
    23. <div class="position">
    24. <a href="#" class="top"></a>
    25. <a href="#" class="bottom"></a>
    26. </div>
    27. <input type="text" name="" value="О нас" />
    28. <input type="text" name="" value="main.html" />
    29. <input type="text" name="" value="это о нас" />
    30. <a href="#" class="remove"></a>
    31. <a href="#" class="add_pod_menu">Создать Подменю</a>
    32. </li>
    33. <li class="action"><a href="#" class="add_menu">Создать пункт</a></li>
    34. </ul></li>
    35. <li class="action"><a href="#" class="add_menu">Создать пункт</a></li>
    36. </ul>
    То кликая чтобы вверх вниз перемещались элементы с них падают обработчики... А это и создать подменю и удалить подменю и удалить пункт меню и переместить его вверх вниз
     
    #3 artem-Kuzmin, 9 мар 2012
  4. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    а зачем двигать элементы в доме? =)
    столько усилий положено чтобы растащить представление и код.
     
    #4 igordata, 9 мар 2012
  5. artem-Kuzmin

    artem-Kuzmin Активный пользователь

    С нами с:
    16 фев 2012
    Сообщения:
    809
    Симпатии:
    0
    Ну первое, что пришло в голову когда начал писать код меню.. Это двигать их вверх вниз...
    Щелкнули кнопку вверх тогда взяли его выдернули из своего места и поставили выше..
     
    #5 artem-Kuzmin, 9 мар 2012
  6. sobachnik

    sobachnik Старожил

    С нами с:
    20 апр 2007
    Сообщения:
    3.380
    Симпатии:
    13
    Адрес:
    Дмитров, МО
    Ничего не исчезают.
    Код (Text):
    1. <html>
    2.     <head>
    3.         <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    4.         <title>ТЕСТ</title>
    5.         <script type="text/javascript">
    6.             function loaded() {
    7.                 document.getElementById('third').onclick = myalert;
    8.             }
    9.             function moveElement() {
    10.                 var elem = document.getElementById('third');
    11.                 document.getElementById('second').removeChild(elem);
    12.                 document.getElementById('first').appendChild(elem);
    13.             }
    14.             function myalert() {
    15.                 alert('ASD');
    16.             }
    17.         </script>
    18.         <style type="text/css">
    19.             #first {
    20.                 border: solid 1px black;
    21.                 width: 300px;
    22.                 height: 150px;
    23.             }
    24.             #second {
    25.                 border: solid 1px black;
    26.                 width: 200px;
    27.                 height: 100px;
    28.             }
    29.             #third {
    30.                 border: solid 1px black;
    31.                 background-color: black;
    32.                 width: 100px;
    33.                 height: 50px;
    34.             }
    35.         </style>
    36.     </head>
    37.     <body onload="javascript:loaded()">
    38.         <input type="button" onclick="moveElement()" value="Переместить" />
    39.         <div id="first">
    40.             <div id="second">
    41.                 <div id="third"></div>
    42.             </div>
    43.         </div>
    44.     </body>
    45. </html>
     
    #6 sobachnik, 9 мар 2012
  7. artem-Kuzmin

    artem-Kuzmin Активный пользователь

    С нами с:
    16 фев 2012
    Сообщения:
    809
    Симпатии:
    0
    А и впрямь странно, в какой то момент меня кажется не сохранись может в коде где допустил ошибку тупило а щас да смотрю и впрямь)спасиб...
    Буду теперь от мусора код чистить
     
    #7 artem-Kuzmin, 9 мар 2012
  8. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    проще держать внутри элемента какойнить menu='3' и повесить на класс и не париться. а где оно находится - пофик.
     
    #8 igordata, 9 мар 2012
  9. artem-Kuzmin

    artem-Kuzmin Активный пользователь

    С нами с:
    16 фев 2012
    Сообщения:
    809
    Симпатии:
    0
    Да по моему по простоте у меня норм.
    Всем элементам li присваиваю id m_1 m_2 для вложенных m_1_1 m_1_2
    И так далее ....
    А когда буду отправлять на сервер вот там уже все поля вложенные в li проименую исходя из id...
    А если держать меню = 3 то и руками писать это не удобно проще вверх вниз пункты меню двигать наглядно
     
    #9 artem-Kuzmin, 9 мар 2012
  10. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    ничерта не понял, но это велосипед. =)
     
    #10 igordata, 10 мар 2012
  11. artem-Kuzmin

    artem-Kuzmin Активный пользователь

    С нами с:
    16 фев 2012
    Сообщения:
    809
    Симпатии:
    0
    Ну если интересно вот как этот велосипед работает)..
    На сервере сериализация и в файл менюху
    По моему вполне рабочий вариант...
    Да и всего 220 строкмоему немного, хотя я знаю, что еще можно доработать и как сократить строк хотя бы до 180
    Если считать к тому же, что без jQ
    Код (Text):
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml"><head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    5. <title>Меню сайта</title>
    6. <style>
    7. #a_open{
    8. width:100%;
    9. height:100%;
    10. min-height:auto;
    11. min-width:auto;
    12. }
    13. #a_open input[type=text],#a_open input[type=password]{
    14. border:1px #b6b6b6 solid;
    15. width:300px;
    16. height:30px;
    17. font:17px Tahoma;
    18. color:#bfbfbf;
    19. padding-left:20px;
    20. margin:20px 0px 10px 20px;
    21. }
    22. #a_open input[type=image]{
    23. margin:20px 0px 0px 200px;}
    24. #a_open input[type=text]:focus,#a_open input[type=password]:focus{
    25. color:black;
    26. }
    27. #admin_open{
    28. width:650px;
    29. height:402px;
    30. left:30%;
    31. position:absolute;
    32. top:20%;
    33. overflow:hidden;
    34. background:#f2f2f2;}
    35. #top_open{
    36. font:bold 18px Tahoma;
    37. color:#424242;
    38. text-align:center;
    39. padding-top:14px;
    40. height:37px;
    41. background:url(../images/admin_open.png) top left;
    42. }
    43. #content_open{
    44. height:300px;
    45. }
    46. #footer_open{
    47. text-align:center;
    48. padding:5px 10px 0px;
    49. height:46px;
    50. background:url(../images/admin_open.png) bottom left;
    51. }
    52. #content{
    53. width:960px;
    54. margin:0 auto;
    55. }
    56. #admin_title{
    57. color:#4e4b52;
    58. text-align:center;
    59. margin:10px 0px;
    60. }
    61. .separator{clear:both;}
    62. .items{
    63. float:left;
    64. width:300px;
    65. margin-right:20px;
    66. }
    67. .head_block{
    68. width:3px;
    69. float:left;
    70. height:25px;
    71. background:url(../images/block_admin.png) top;
    72. }
    73. .head_center{
    74. float:left;
    75. height:19px;
    76. width:274px;
    77. overflow:hidden;
    78. color:#4e4b52;
    79. font:bold 14px Tahoma;
    80. padding:3px 10px;
    81. background:url(../images/block_admin.png) left -100%;
    82. }
    83. .head_right{
    84. background:url(../images/block_admin.png) left -200%;
    85. }
    86. .items ul{
    87. margin:15px 0px 0px 13px;
    88. list-style-type:none;
    89. }
    90. .items ul a{
    91. background:url(../images/admin_icons.png) no-repeat left top;
    92. display:block;
    93. padding-left:30px;
    94. padding-top:4px;
    95. height:20px;
    96. margin-bottom:15px;
    97. color:black;
    98. text-decoration:none;
    99. font:14px Tahoma;}
    100. .items ul a:hover{
    101. color:red;
    102. }
    103. .items #admin_nav{
    104. background-position:-57px -46px;
    105. }
    106. .items #admin_comments{
    107. background-position:-180px -130px;
    108. }
    109. .items #admin_golos{
    110. background-position:-248px -169px;
    111. }
    112. .items #admin_users{
    113. background-position:-116px -89px;
    114. }
    115. .items #admin_sliders{
    116. background-position:-390px -264px;
    117. }
    118. .items #admin_klips{
    119. background-position:-479px top;
    120. }
    121. .items #admin_albums{
    122. background-position:-312px -217px;
    123. }
    124. .items #admin_video_day{
    125. background-position:-442px -309px;
    126. }
    127. #footer_admin{
    128. clear:both;
    129. margin:10px 0px;
    130. padding-top:5px;
    131. text-align:right;
    132. border-top:1px black solid;
    133. }
    134. #footer_content{
    135. width:960px;
    136. margin:0 auto;
    137. }
    138. #user_login{
    139. text-align:right;
    140. padding:0px 20px 5px 0px;
    141. margin-left:400px;
    142. }
    143. #bread_crumbs{
    144. padding:5px 0px;
    145. border:1px solid #bfbfbf;
    146. border-left:0px;
    147. border-right:0px;
    148. }
    149. #bread_crumbs a{
    150. color:#5f5f5f;}
    151. #bread_crumbs a:hover{
    152. color:black;
    153. text-decoration:underline;}
    154. #bread_crumbs span{
    155. font:bold 14px Tahoma;
    156. }
    157. #bread_crumbs .delim{
    158. font:400 18px Tahoma;
    159. }
    160. #groups_right{
    161. width:830px;}
    162.  #groups_right th, #groups_right td{
    163. width:150px;
    164. line-height:20px;
    165. padding:5px 10px;
    166. border-right:1px solid #5f5f5f;
    167. border-bottom:1px solid #5f5f5f;
    168. }
    169.  #groups_right th.first, #groups_right td.first{
    170.  padding-left:0px;
    171.  }
    172.  #groups_right th.last, #groups_right td.last{
    173.  border-right:0px;
    174.  }
    175.  #groups_right tr.last td{
    176. border-bottom:0px;
    177. }
    178. #groups_right td.first{
    179. margin-left:0px;
    180. }
    181. #groups_right td{
    182. width:90px;
    183. padding-left:60px;
    184. }
    185.  
    186. /**************************************
    187. Лист постов
    188. **************************************/
    189. .pagination a{
    190. display:block;
    191. width:24px;
    192. height:24px;
    193. float:left;
    194. margin-right:5px;
    195. }
    196. .pagination .first{
    197. background:url(../images/pagination.png) left top;
    198. }
    199. .pagination .prev{
    200. background:url(../images/pagination.png) right top;
    201. }
    202. .pagination .next{
    203. background:url(../images/pagination.png) right bottom;
    204. }
    205. .pagination .last{
    206. margin-right:0px;
    207. background:url(../images/pagination.png) left bottom;
    208. }
    209. .pagination .page{
    210. float:left;
    211. width:180px;
    212. margin: 0px 10px;
    213. margin-left:30px;
    214. }
    215. .pagination .page .str,.pagination .page  .counts{
    216. width:70px;
    217. padding-top:2px;
    218. margin-right:5px;
    219. font:14px/18px Tahoma;
    220. }
    221. .pagination .page  .counts{
    222. width:30px;
    223. margin-left:5px;
    224. }
    225. .pagination .page div{
    226. width:40px;
    227. float:left;}
    228. .pagination input{
    229. float:left;
    230. padding:0px;
    231. margin:0px;
    232. font:14px/18px Tahoma;
    233. display:block;
    234. width:40px;
    235. text-align:center;
    236. height:24px;
    237. }
    238. .pagination_top{
    239. float:right;
    240. }
    241. .pagination .nums{
    242. margin-left:20px;
    243. padding-top:3px;
    244. float:left;
    245. }
    246. .pagination .op{
    247. font:14px/18px Tahoma;
    248. float:left;
    249. margin-right:10px;
    250. }
    251. .pagination .nums a{
    252. margin-top:1px;
    253. color:#313131;
    254. }
    255. .pagination .nums .current{
    256. font-weight:600;
    257. }
    258. #tops{
    259. margin:10px 0px;
    260. }
    261. .create_elements{
    262. display:block;
    263. float:left;
    264. font:14px/18px Tahoma;
    265. padding-top:3px;
    266. }
    267. #mainform #product-table .last{
    268. width:80px;
    269. padding-right:5px;
    270. }
    271. #mainform #product-table .name{
    272. width:500px;
    273. padding-right:10px;
    274. }
    275. #mainform #product-table .author{
    276. width:110px;
    277. }
    278. #mainform #product-table .rubriks{
    279. width:150px;
    280. }
    281. #mainform #product-table .last .icon-1{
    282. margin-left:7px;
    283. }
    284. #mainform #product-table  .empty{
    285. color:#ff3b3b;
    286. }
    287. #small_tinymce{
    288. width:790px;
    289. margin-bottom:10px;
    290. }
    291. #prev_img{
    292. margin:10px 0px 20px;
    293. }
    294. .desc{
    295. font:400 14px Tahoma;
    296. }
    297. #add_content{
    298. margin:10px 0px;
    299. }
    300. .menu_name{
    301. font:14px;
    302. margin:5px 0px 10px 5px;}
    303. .action{
    304. clear:both;
    305. display:block;
    306. margin-bottom:30px;}
    307. .add_menu,.add_pod_menu,.del_pod_menu{
    308.  
    309. padding:3px 0px;
    310. display:block;
    311. border:1px solid #cfcfcf;
    312. width:130px;
    313. text-align:center;
    314. color:#9d9d9d;
    315. border-radius:3px;
    316. }
    317.  
    318. .add_pod_menu,.del_pod_menu{
    319. float:right;
    320. }
    321. .add_menu:hover,.add_pod_menu:hover,.del_pod_menu:hover{
    322. border-color:#7d7d7d;
    323. color:#646464;}
    324. .menu{
    325. display:block;
    326. clear:both;
    327. margin-left:20px;
    328. margin-top:10px;
    329. list-style-type:none;}
    330. .menu .menu{
    331. margin:20px 0px 20px 25px;
    332. }
    333. .menu li{
    334. position:relative;
    335. clear:both;
    336. display:block;
    337. margin:15px 0px;
    338. }
    339. .menu input{
    340. height:20px;
    341. width:150px;
    342. margin-right:20px;
    343. line-height:20px;
    344. border:0px;
    345. padding-left:2px;
    346. border-left:2px solid #7d7d7d;}
    347. .menu input:focus{
    348. height:18px;
    349. border:1px solid #7d7d7d;}
    350. .menu .remove{
    351. display:block;
    352. margin:8px 0px 0px 5px;
    353. width:11px;
    354. float:right;
    355. height:11px;
    356. background:red;
    357. }
    358. .menu .position{
    359. width:20px;
    360. position:relative;
    361. float:left;
    362. }
    363. .menu .position .top,.menu .position .bottom{
    364. display:block;
    365. width:9px;
    366. height:9px;
    367. margin-bottom:2px;
    368. background:green;
    369. }
    370. .menu .position .bottom{
    371. margin-bottom:0px;
    372. background:blue;
    373. }
    374. #submit_form{
    375. clear:both;
    376. padding:3px 0px;
    377. display:block;
    378. border:1px solid #cfcfcf;
    379. text-align:center;
    380. color:#9d9d9d;
    381. border-radius:3px;
    382. }
    383. #submit_form:hover{
    384. border-color:#7d7d7d;
    385. color:#646464;
    386. }
    387.  
    388.  
    389. </style>
    390. </head>
    391. <body>
    392. <h1 id="admin_title">Меню сайта</h1>
    393. <div id="content">
    394.  
    395.  
    396. <h2 class="menu_name">Нижнее меню</h2>
    397. <form id="mainform" method="post" action="">
    398. <ul class="menu" id="menu">
    399. <li id="m_1">
    400. <div class="position">
    401. <a href="#" class="top"></a>
    402. <a href="#" class="bottom"></a>
    403. </div>
    404. <input class="name" name="" value="Контакты" type="text">
    405. <input class="url" name="" value="main.html" type="text">
    406. <input class="title" name="" value="это контакты" type="text">
    407. <a href="#" class="remove"></a>
    408. <a href="#" class="add_pod_menu">Создать Подменю</a>
    409. </li>
    410. <li id="m_2">
    411. <div class="position">
    412. <a href="#" class="top"></a>
    413. <a href="#" class="bottom"></a>
    414. </div>
    415. <input class="name" name="" value="О нас" type="text">
    416. <input class="url" name="" value="main.html" type="text">
    417. <input class="title" name="" value="это о нас" type="text">
    418. <a href="#" class="remove"></a>
    419. <a href="#" class="del_pod_menu">Удалить Подменю</a>
    420. <ul class="menu" id="menu1">
    421. <li id="m_2_1">
    422. <div class="position">
    423. <a href="#" class="top"></a>
    424. <a href="#" class="bottom"></a>
    425. </div>
    426. <input class="name" name="" value="О нас" type="text">
    427. <input class="url" name="" value="main.html" type="text">
    428. <input class="title" name="" value="это о нас" type="text">
    429. <a href="#" class="remove"></a>
    430. <a href="#" class="add_pod_menu">Создать Подменю</a>
    431. </li>
    432. <li class="action"><a href="#" class="add_menu">Создать пункт</a></li>
    433. </ul></li>
    434. <li class="action"><a href="#" class="add_menu">Создать пункт</a></li>
    435. </ul>
    436. <div style="clear:both;height:20px"></div>
    437. <input name="save" value="yes" type="hidden">
    438. </form>
    439. <a id="submit_form" href="#">Сохранить</a>
    440.  
    441. <script type="text/javascript">
    442. function init(){
    443. var a=document.getElementsByTagName('a');
    444. var len=a.length;
    445. for(var i=0;len>i;i++){
    446. if(a[i].className=='add_pod_menu')a[i].onclick=addpodmenu;
    447. else if(a[i].className=='del_pod_menu')a[i].onclick=delpodmenu;
    448. else if(a[i].className=='add_menu')a[i].onclick=add_menu;
    449. else if(a[i].className=='top')a[i].onclick=position;
    450. else if(a[i].className=='bottom')a[i].onclick=position;
    451. else if(a[i].className=='remove')a[i].onclick=remove_item;
    452. else if(a[i].id=='submit_form')a[i].onclick=submit_form;
    453. }
    454. }
    455. init();
    456. function addpodmenu(event){
    457. var event=event||window.event;
    458. var target=event.target||event.srcElement;
    459. target.innerHTML='Удалить подменю';
    460. target.onclick=delpodmenu;
    461. var ul=document.createElement('ul');
    462. ul.className="menu";
    463. var li=document.createElement('li');
    464. li.className="action"
    465. var a=document.createElement('a');
    466. a.className="add_menu";
    467. a.appendChild(document.createTextNode('Создать пункт'));
    468. li.appendChild(a);
    469. ul.appendChild(li);
    470. a.href="#";
    471. a.onclick=add_menu;
    472. target.className='del_pod_menu';
    473. target.parentNode.appendChild(ul);
    474. event.preventDefault ? event.preventDefault() : event.returnValue=false;
    475. }
    476. function delpodmenu(event){
    477. var event=event||window.event;
    478. var target=event.target||event.srcElement;
    479. target.innerHTML='Создать подменю';
    480. target.className='add_pod_menu';
    481. target.onclick=addpodmenu;
    482. var child=target.parentNode.childNodes;
    483. for(var i=0;i<child.length;i++){
    484. if(child[i].tagName=='UL')target.parentNode.removeChild(child[i])
    485. }
    486. event.preventDefault ? event.preventDefault() : event.returnValue=false;
    487. }
    488. function add_menu(event){
    489. var b=0;
    490. var level=0;
    491. var event=event||window.event;
    492. var target=event.target||event.srcElement;
    493. var before=target.parentNode;
    494. var parent=before.parentNode;
    495. var elem=document.createElement('li');
    496. var child=parent.childNodes;
    497. var id='m_';
    498. var p=[];
    499. for(var i=0;child.length>i;i++){
    500. if(child[i].tagName=='LI' && child[i].className!='action')id=child[i].id
    501. }
    502. if(id=='m_'){
    503. var el=parent.parentNode;
    504. if(el.tagName=='LI')id=el.id+'_1';
    505. else id='m_1';
    506. }
    507. else if(id!=0){
    508. var pred=id.substr(id.length-1,1);
    509. pred=parseInt(pred)+1;
    510. id=id.substr(0,id.length-1)+pred;
    511. }
    512. p=id.split('_');
    513. level=p.length-1;
    514. elem.id=id
    515. elem.innerHTML='<input type="text" name="" class="name" value="Новое" /><input type="text" name="" class="url" value=".html" /><input type="text" class="title" name="" value="Описание" />';
    516. var remove=document.createElement('a');
    517. remove.className='remove';
    518. remove.href='#';
    519. remove.onclick=remove_item;
    520. elem.appendChild(remove);
    521. if(level<3){
    522. var add=document.createElement('a');
    523. add.className='add_pod_menu';
    524. add.href='#';
    525. add.appendChild(document.createTextNode('Создать подменю'));
    526. add.onclick=addpodmenu;
    527. elem.appendChild(add);
    528. }
    529. var elemch=elem.childNodes
    530. elem.insertBefore(addposition(),elemch[0]);
    531. parent.insertBefore(elem,before);
    532. event.preventDefault ? event.preventDefault() : event.returnValue=false;
    533. }
    534. function addposition(){
    535. var div=document.createElement('div');
    536. div.className='position';
    537. var top=document.createElement('a');
    538. top.className='top';
    539. top.href='#';
    540. var bottom=document.createElement('a');
    541. bottom.className='bottom';
    542. bottom.href='#';
    543. top.onclick=position;
    544. bottom.onclick=position;
    545. div.appendChild(top);
    546. div.appendChild(bottom);
    547. return div;
    548. }
    549. function position(event){
    550. var id=1;
    551. var event=event||window.event;
    552. var target=event.target||event.srcElement;
    553. var li=target.parentNode.parentNode;
    554. var parent=li.parentNode;
    555. var ins=0;
    556. var res=[];
    557. var id='';
    558. if(target.className=='top')res=list(li,'top')
    559. else if(target.className=='bottom')res=list(li,'bottom');
    560. if(res[0] !== undefined)ins=res[0];
    561. if(ins!=0){
    562. id=li.id;
    563. if(res[1] !== undefined){
    564. li.id=res[1].id
    565. res[1].id=id
    566. }
    567. else{
    568. li.id=ins.id
    569. ins.id=id
    570. }
    571. parent.removeChild(li);
    572. parent.insertBefore(li,ins);
    573. }
    574. event.preventDefault ? event.preventDefault() : event.returnValue=false;
    575. }
    576. function list(li,pos){
    577. var m=1;
    578. var child=li.parentNode.childNodes;
    579. var n=0;
    580. var i=0;
    581. var result=[];
    582. for(i;child.length>i;i++){
    583. if(child[i].id==li.id)break;
    584. }
    585. n=i;
    586. if(pos=='top'){
    587. for(;0<=i;i--){
    588. if(child[i].tagName=='LI' && child[n].id!=child[i].id){
    589. result[0]=child[i];
    590. break;
    591. }
    592. }
    593. }
    594. else if(pos=='bottom'){
    595. for(;child.length>i;i++){
    596. if(child[i].tagName=='LI' && child[n].id!=child[i].id){
    597. if(m==0){
    598. result[0]=child[i];
    599. break;
    600. }
    601. else{
    602. result[1]=child[i];
    603. m--;
    604. }
    605. }
    606. }
    607. }
    608. return result;
    609. }
    610. function remove_item(event){
    611. var event=event||window.event;
    612. var target=event.target||event.srcElement;
    613. target.parentNode.parentNode.removeChild(target.parentNode);
    614. }
    615. function submit_form(event){
    616. var event=event||window.event;
    617. var target=event.target||event.srcElement;
    618. var form=document.getElementById('mainform');
    619. var menu=document.getElementById('menu');
    620. menu_vn(menu,1);
    621. form.submit();
    622. event.preventDefault ? event.preventDefault() : event.returnValue=false;
    623. }
    624. function menu_vn(ul, level){
    625. var child=ul.childNodes;
    626. var name='';
    627. var len=child.length;
    628. for(var i=0;len>i;i++){
    629. if(child[i].tagName=='LI' && child[i].className!='action'){
    630. var ch=child[i].childNodes;
    631. var mass=child[i].id.split('_');
    632. if(level>1){
    633. var mass_p=child[i].parentNode.parentNode.id.split('_');
    634. mass[level-1]=mass_p[level-1]
    635. }
    636. var name_mass='';
    637. for(var n=1;mass.length>n;n++){
    638. name_mass+='['+mass[n]+']';
    639. }
    640. for(var y=0;ch.length>y;y++){
    641. if(ch[y].tagName=='INPUT'){
    642. switch(ch[y].className){
    643. case 'name':
    644. ch[y].name='menu'+name_mass+'[name]';
    645. break;
    646. case 'url':
    647. ch[y].name='menu'+name_mass+'[url]';
    648. break;
    649. case 'title':
    650. ch[y].name='menu'+name_mass+'[title]';
    651. break;
    652. }
    653. }
    654. else if(ch[y].tagName=='UL'){
    655. level++;
    656. menu_vn(ch[y],level);
    657. level--;
    658. }
    659. }
    660. }
    661. }
    662. }
    663. </script>
    664.        
    665.  
    666.  
    667. </div></body></html>
    Добавлено спустя 1 минуту 10 секунд:
    Эт я пример привел самой менюхи файл html создать и можно увидеть....
     
    #11 artem-Kuzmin, 10 мар 2012
  12. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    многа букаф. =)
     
    #12 igordata, 10 мар 2012
  13. artem-Kuzmin

    artem-Kuzmin Активный пользователь

    С нами с:
    16 фев 2012
    Сообщения:
    809
    Симпатии:
    0
    Главное норм работает) а ост не важно..
    Еще в отдельный файл и init на DomContentLoaded и для первого времени норм.
     
    #13 artem-Kuzmin, 11 мар 2012
  14. artem-Kuzmin

    artem-Kuzmin Активный пользователь

    С нами с:
    16 фев 2012
    Сообщения:
    809
    Симпатии:
    0
    Если есть люди кому не влом увидеть код и опробовать скажите те недочеты которые сразу бросаются в глаза..
    как бэ выложил для тех кому не лень критиковать..
    Ток не фразами типо
    Да такое Уже есть
    да НАх писать
    Да JQ рулит без него писать оч много строк получается..
     
    #14 artem-Kuzmin, 11 мар 2012
  15. AndreJM

    AndreJM Активный пользователь

    С нами с:
    25 янв 2012
    Сообщения:
    522
    Симпатии:
    0
    Дружище, рефакторинг и возможно тогда кому-то и не будет лень выискивает в твоем коде недочеты.
     
    #15 AndreJM, 11 мар 2012
  16. artem-Kuzmin

    artem-Kuzmin Активный пользователь

    С нами с:
    16 фев 2012
    Сообщения:
    809
    Симпатии:
    0
    Эээ а хм шо такое рефакторинг.
    Да тут суть другая я, что то и сам знаю, что точно можно улучшить. но может кому камнем кинуть не сложно))
     
    #16 artem-Kuzmin, 11 мар 2012
  17. AndreJM

    AndreJM Активный пользователь

    С нами с:
    25 янв 2012
    Сообщения:
    522
    Симпатии:
    0
    #17 AndreJM, 11 мар 2012
  18. artem-Kuzmin

    artem-Kuzmin Активный пользователь

    С нами с:
    16 фев 2012
    Сообщения:
    809
    Симпатии:
    0
    Слово заграничное) .
     
    #18 artem-Kuzmin, 11 мар 2012
  19. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    переделать, блеать! = требуется рефакторинг :D
     
    #19 igordata, 11 мар 2012
  20. artem-Kuzmin

    artem-Kuzmin Активный пользователь

    С нами с:
    16 фев 2012
    Сообщения:
    809
    Симпатии:
    0
    Тогда есче вопрос, а что к примеру здесь можно упростить для понимания людям?
    Переменные у меня со смыслом названы, повторяющиеся куски на функции поделили если, что может, последнее действие присвоение идов сделал рекурсией.
    Почитал я вики рефакторинг и смотрю так на этот код разу не пойму шо здесь можно..
    Комов разве наставить, да
    var param
    if(){
    sxsxs
    }
    else(){

    }
    Да разве, что переводов строк и табов
    Поэтому просьба подскажите, что здесь можно упростить для понимания какой то мелкий кусок далее допру
     
    #20 artem-Kuzmin, 12 мар 2012
  21. AndreJM

    AndreJM Активный пользователь

    С нами с:
    25 янв 2012
    Сообщения:
    522
    Симпатии:
    0
     
    #21 AndreJM, 12 мар 2012
  22. artem-Kuzmin

    artem-Kuzmin Активный пользователь

    С нами с:
    16 фев 2012
    Сообщения:
    809
    Симпатии:
    0
    if(ch[y].className == 'name' || ch[y].className == 'url' || ch[y].className == 'title')
    ch[y].name = 'menu' + name_mass +'[' + ch[y].className + ']';
    Да вот этот момент писал на скоро руку забылся спс.


    Код (Text):
    1. else if(ch[y].tagName=='UL'){
    2. level++;
    3. menu_vn(ch[y],level);
    4. level--;
    5. }
    А вот здесь это функция рекурсивная...
    Когда она вызывается для под меню увеличиваем уровень вложенности...
    Поэтому уменьшать обязательно надо тоже раз увеличили.. Так как в каждом пункте li может быть подменю ..
    Спс) буду приводить к порядку код
     
    #22 artem-Kuzmin, 12 мар 2012
  23. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    у меня бывало что я переделывал код дважды и он дважды уменьшался в два раза =)
     
    #23 igordata, 12 мар 2012
  24. AndreJM

    AndreJM Активный пользователь

    С нами с:
    25 янв 2012
    Сообщения:
    522
    Симпатии:
    0
    Автор, избавь себя от повторов :
    сделай таки на выносе:
    Код (Text):
    1.  
    2. function create(elm,class=null,href=null) {
    3.    var el = document.createElement(elm);
    4.    if(class != null) el.className = class;
    5.    if(href != null) el.href = href;
    6. }
    В итоге имеем следующее:
    Код (Text):
    1.  
    2. var div=create('div','position');
    3. var top=create('a','top','#');
    4. var bottom=create('a','bottom','#');
    и читать удобней и нет дублирования.
     
    #24 AndreJM, 12 мар 2012
  25. artem-Kuzmin

    artem-Kuzmin Активный пользователь

    С нами с:
    16 фев 2012
    Сообщения:
    809
    Симпатии:
    0
    Ну я как говорил писал наспех.
    Поэтому да есть много всего, а так спс), что не влом посмотреть.
    Я главное на том этапе протестил в ie chrome,mozile, дмаю и в опере будет работать это было важное, а теперь да оптимизировать хочу..
     
    #25 artem-Kuzmin, 12 мар 2012
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)
Страница 1 из 2