ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Добавить к коду кнопки функцию Canvas
11 сообщений из 11, страница 1 из 1
Добавить к коду кнопки функцию Canvas
    #39112968
asdasd2131aa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
asdasd2131aa
Гость
Сделал кнопку по образцу, но при попытке размножить их по сайту заметил, что они работают некорректно. При нажатии на любую из них, открывается окно первой. Полагаю, надо добавить функцию Canvas, но я плохо понимаю, как ее правильно добавить в код. HELP


Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf8'>
<link rel="stylesheet" href="http://wwwwww.ucoz.net/sss.css" type="text/css" />
<style type="text/css">
	
	#wrap{
		display: none;
		opacity: 0.8;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 16px;
		background-color: rgba(1, 1, 1, 0.725);
		z-index: 100;
		overflow: auto;
	}
	
	#window{
		width: 600px;
		height: auto;
		margin: 50px auto;
		display: none;
		background: #fff;
		z-index: 100;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 16px;
	}
	
	.close{
		margin-left: 530px;
		margin-top: 4px;
		cursor: pointer;
	}
	
</style>
</head>
<body>
		<script type="text/javascript">

					//Функция показа
			function show(state){

					document.getElementById('window').style.display = state;			
					document.getElementById('wrap').style.display = state; 			
			}
			
		</script>
					<!-- Задний прозрачный фон-->
		<div onclick="show('none')" id="wrap"></div>

					<!-- Само окно-->
			<div id="window">
						
						 <!-- Картинка крестика-->
				<img class="close" onclick="show('none')" src="http://sergey-oganesyan.ru/wp-content/uploads/2014/01/close.png">
					
			<p style="text-align: center;"><span style="font-size:24px;">Bluedio H+</span></p>

<br>

<br><br><br><p><span style="line-height: 18.9091px;">Удобным и многофукнциональным наушникам Bluedio H+ найдется применение практически везде. Вы можете использовать их для разговора (в наушниках есть встроенный микрофон с функцией шумоподавления) или для прослушивания музыки. Чистый звук и мощные басы позволят вам сполна насладиться любимыми произведениями, а наличие слота под MicroSD и встроенного радио позволяет использовать Bluedio H+ как самостоятельное устройство без синхронизации с телефоном.</span><br style="line-height: 18.9091px;" />
&nbsp;</p>

<table border="0" cellpadding="0" cellspacing="0" style="line-height: 18.9091px; width: 447px;">
	<tbody>
		<tr>
			<td style="height: 25px; width: 251px;">Версия bluetooth:</td>
			<td style="width: 196px;">4,1</td>
		</tr>
		<tr>
			<td style="height: 25px;">Рабочее расстояние:</td>
			<td>до 10 метров</td>
		</tr>
		<tr>
			<td style="height: 25px;">Bluetooth профили:</td>
			<td>A2DP, AVRCP, HFP, HSP</td>
		</tr>
		<tr>
			<td style="height: 25px;">Частотная ххарактеристика:</td>
			<td>20 Гц - 20 ГГц</td>
		</tr>
		<tr>
			<td style="height: 25px;">Время активной работы:</td>
			<td>45 часов</td>
		</tr>
		<tr>
			<td style="height: 25px;">Время ожидания:</td>
			<td>1625 часов</td>
		</tr>
		<tr>
			<td style="height: 25px;">Время зарядки:</td>
			<td>3 часа</td>
		</tr>
		<tr>
			<td style="height: 25px;">Коэф. искажений:</td>
			<td>&lt;0,1%</td>
		</tr>
		<tr>
			<td style="height: 25px;">Чувствительность:</td>
			<td>110 Дб</td>
		</tr>
		<tr>
			<td style="height: 25px;">Встроенный микрофон:</td>
			<td>Да</td>
		</tr>
		<tr>
			<td style="height: 25px;">Доп. функции:</td>
			<td>Радио, поддержка microSD</td>
		</tr>
	</tbody>
</table><br><br>
				<center>
							
					
				</center>
				
			</div>

		<center><button id = "canvas1" class="myButton" onclick="show('block')">О товаре</button></center>	
			
		</center>
		
</body>
</html>
...
Рейтинг: 0 / 0
25.11.2015, 11:42
| Ответить | Цитировать | Написать  
Добавить к коду кнопки функцию Canvas
    #39113011
kunaksergey
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
kunaksergey
Гость
asdasd2131aa,
Так ты кроме как статуса ничего не передаешь.
...
Рейтинг: 0 / 0
25.11.2015, 12:25
| Ответить | Цитировать | Написать  
Добавить к коду кнопки функцию Canvas
    #39113085
asdasd2131aa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
asdasd2131aa
Гость
kunaksergey,
в каком смысле?
Более одной такой кнопки на сайте разместить нельзя? не верю.
Надо каждой присвоить индивидуальный ID, что бы они все корректно работали. Я почти уверен, что это возможно, только не знаю как.
...
Рейтинг: 0 / 0
25.11.2015, 13:33
| Ответить | Цитировать | Написать  
Добавить к коду кнопки функцию Canvas
    #39113776
kunaksergey
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
kunaksergey
Гость
asdasd2131aakunaksergey,
в каком смысле?
Более одной такой кнопки на сайте разместить нельзя? не верю.
Надо каждой присвоить индивидуальный ID, что бы они все корректно работали. Я почти уверен, что это возможно, только не знаю как.
это был намек.. передавайте или перехватывайте id элемента
...
Рейтинг: 0 / 0
26.11.2015, 10:10
| Ответить | Цитировать | Написать  
Добавить к коду кнопки функцию Canvas
    #39113856
asdasd2131aa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
asdasd2131aa
Гость
kunaksergey,

В теории я понимаю, что надо делать, а на практике кнопка ломается, когда я начинаю ее трогать.
...
Рейтинг: 0 / 0
26.11.2015, 11:44
| Ответить | Цитировать | Написать  
Добавить к коду кнопки функцию Canvas
    #39113935
kunaksergey
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
kunaksergey
Гость
Сколько у тебя планируется быть товаров?
...
Рейтинг: 0 / 0
26.11.2015, 12:51
| Ответить | Цитировать | Написать  
Добавить к коду кнопки функцию Canvas
    #39113989
kunaksergey
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
kunaksergey
Гость
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf8'>
<link rel="stylesheet" href="http://wwwwww.ucoz.net/sss.css" type="text/css" />
<style type="text/css">
  
  #wrap{
    display: none;
    opacity: 0.8;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 16px;
    background-color: rgba(1, 1, 1, 0.725);
    z-index: 100;
    overflow: auto;
  }
  
  #window{
    width: 600px;
    height: auto;
    margin: 50px auto;
    display: none;
    background: #fff;
    z-index: 100;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 16px;
  }
  
  .close{
    margin-left: 530px;
    margin-top: 4px;
    cursor: pointer;
  }

  .product{
    display: none;
  }
  
</style>
</head>
<body>
    <script type="text/javascript">

          //Функция показа
   function show(state,id){

          document.getElementById('window').style.display = state;      
          if(id){
          document.getElementById(id).style.display=state;
        }else{
          var elements=document.getElementsByClassName('product');
          
    
          Array.prototype.forEach.call(elements, function(child) {
          // делаем что-нибудь с объектом child
          child.style.display=state;
          });

        }
          document.getElementById('wrap').style.display = state;      
      }
      
    </script>
          <!-- Задний прозрачный фон-->
    <div onclick="show('none')" id="wrap"></div>

          <!-- Само окно-->
      <div id="window">
  
             <!-- Картинка крестика-->
        <img class="close" onclick="show('none')" src="http://sergey-oganesyan.ru/wp-content/uploads/2014/01/close.png">
        <div id="p1" class="product"> Товар1</div>
        <div id="p2" class="product"> Товар2</div>
        <div id="p3" class="product"> Товар3</div>
        <div id="p4" class="product"> Товар4</div>
      
      </div>

         <center>
        <button id = "canvas1" class="myButton" onclick="show('block','p1')">Товар1</button><br/>
        <button id = "canvas1" class="myButton" onclick="show('block','p2')">Товар2</button><br/>
        <button id = "canvas1" class="myButton" onclick="show('block','p3')">Товар3</button><br/>
        <button id = "canvas1" class="myButton" onclick="show('block','p4')">Товар4</button><br/>
        </center>  
      
    
    
</body>
</html>



Но твой подход изначально не верный. не стоит держать всю инфу в одном файле.
...
Рейтинг: 0 / 0
26.11.2015, 13:34
| Ответить | Цитировать | Написать  
Добавить к коду кнопки функцию Canvas
    #39114547
asdasd2131aa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
asdasd2131aa
Гость
kunaksergey,

6-10
...
Рейтинг: 0 / 0
27.11.2015, 03:43
| Ответить | Цитировать | Написать  
Добавить к коду кнопки функцию Canvas
    #39114548
asdasd2131aa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
asdasd2131aa
Гость
kunaksergey, спасибо. но кнопки должны находиться разных местах страницы. Ситуацию осложняет движок сайта, который позволяет это реализовать только посредством распихивания кода в имеющиеся HTML блоки.
Поэтому мне и нужно было создать макет, код которого можно копировать и распихивать в другие ячейки, меняя лишь ID.
...
Рейтинг: 0 / 0
27.11.2015, 03:51
| Ответить | Цитировать | Написать  
Добавить к коду кнопки функцию Canvas
    #39114550
asdasd2131aa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
asdasd2131aa
Гость
asdasd2131aakunaksergey, спасибо. но кнопки должны находиться разных местах страницы. Ситуацию осложняет движок сайта, который позволяет это реализовать только посредством распихивания кода в имеющиеся HTML блоки.
Поэтому мне и нужно было создать макет, код которого можно копировать и распихивать в другие ячейки, меняя лишь ID.


возможно резонно будет присвоить ID всему коду?)
...
Рейтинг: 0 / 0
27.11.2015, 04:00
| Ответить | Цитировать | Написать  
Добавить к коду кнопки функцию Canvas
    #39114765
kunaksergey
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
kunaksergey
Гость
asdasd2131aa,

размещай где хочешь, главное, что бы они были обернуты в <div id="тут ваш id" class="product"> Товар(или что-то другое)</div>
...
Рейтинг: 0 / 0
27.11.2015, 12:01
| Ответить | Цитировать | Написать  
11 сообщений из 11, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Добавить к коду кнопки функцию Canvas
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=39113989&tid=1445597]:
 0ms
get settings:
 9ms
get forum list:
 9ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 133ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 26ms
get tp. blocked users:
 1ms
others: 202ms
total:  392ms
созд. / загр.: 392ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]