Домой Wp-Recall WP-Recall: Пишем свое дополнение и кастомизация Как добавить к каждому полю в форме публикаций тип file свою иконку.
14 ответ(ов) в теме
zeni1agent
не в сети 1 неделя
На сайте с 23.09.2018
Участник
Тем 18
Сообщения 96
1
18:00
Версия WP-Recall:16.1.5

У меня есть иконка которую я хотел бы добавить к каждому полю тип file что бы при ее нажатий срабатывало тоже самое что и если бы я нажал на кнопку добавить файл.
<label for="id_rcl_but" class="icon"></label>
Могу ли я как нибудь это сделать?

0
Otshelnik-Fm
не в сети 21 минута
На сайте с 27.01.2013
Модератор
Тем 28
Сообщения 14277
2
18:46

через ::after?

0
zeni1agent
не в сети 1 неделя
На сайте с 23.09.2018
Участник
Тем 18
Сообщения 96
3
20:29

Не получится мне заменить кнопку иконкой если я сделаю это через :after то потом не смогу скрыть кнопку

0
Otshelnik-Fm
не в сети 21 минута
На сайте с 27.01.2013
Модератор
Тем 28
Сообщения 14277
4
21:40

Ну всегда можно по onload (или ready) вешать нужный класс например (а там уже ::after и по onclick снимать класс) или через append или схожие методы вставлять с помощью jquery нужный html - варианты на js есть. И для этого не нужно ничего править в ядре. Все это динамически происходит при должном подходе. js - это же мир магии 🧙

0
zeni1agent
не в сети 1 неделя
На сайте с 23.09.2018
Участник
Тем 18
Сообщения 96
5
23:15

Да но если использовать js в конце всей формы. Например append html, то либо это будет работать хорошо только для первой что мне не подходит, либо придется писать для каждой кнопки свое действие onclick по классу что тоже не очень. Можно конечно это сделать одной функцией но все рано необходимо знать все классы заранее. Можно ли как то это сделать без костылей? Или вы предлагаете что то другое?
Уточню основная кнопка Выберите файл должна быть скрыта а вместо нее была иконка которая выполняет все функций этой кнопки

Редакции сообщения
27.05.2019 23:17zeni1agentПричина: не указано
0
Otshelnik-Fm
не в сети 21 минута
На сайте с 27.01.2013
Модератор
Тем 28
Сообщения 14277
6
11:37

Я предложил все безболезненные варианты - или стили, или js

0
zeni1agent
не в сети 1 неделя
На сайте с 23.09.2018
Участник
Тем 18
Сообщения 96
7
12:36

Может вы знаете способ на js который не требует знания заранее всех классов а цеплялся за каждый file-field отдельно
И работал только внутри своего div rcl-form-field

0
Otshelnik-Fm
не в сети 21 минута
На сайте с 27.01.2013
Модератор
Тем 28
Сообщения 14277
8
12:46

Кастомизация - не универсальный процесс, а сугуболичный. Я не могу дать вам такую "таблетку от всех болезней".

Попробуйте обратиться через задания

Вы не можете просматривать опубликованные ссылки

или на фриланс для решения вашего вопроса.

0
zeni1agent
не в сети 1 неделя
На сайте с 23.09.2018
Участник
Тем 18
Сообщения 96
9
13:16

Мне не нужно прям супер универсальное средство. Я просто не хочу делать костыль и писать для каждого отдельного метополя свою функцию

<div id="form-field-faile1" class="rcl-form-field field-file">
<label>faile1</label>
<div id="rcl-field-faile1" class="rcl-field-input type-file-input">
<div class="rcl-field-core">
<span id="faile1-content" class="file-field-upload">
<input data-size="100" data-ext="" type="file"   name="faile1" class="file-field" id="faile1" value=""/>
 (<span class="allowed-types">Разрешенные типы файлов: </span>. Макс. размер: 100MB)
 <script type="text/javascript">rcl_init_field_file("faile1");</script>
 </span></div></div></div>
 
 <div id="form-field-faile2" class="rcl-form-field field-file">
 <label>video panorama </label>
 <div id="rcl-field-faile2" class="rcl-field-input type-file-input">
 <div class="rcl-field-core"><span id="faile2-content" class="file-field-upload">
 <input data-size="100" data-ext="" type="file"   name="faile2" class="file-field" id="faile2" value=""/>
 (<span class="allowed-types">Разрешенные типы файлов: </span>. Макс. размер: 100MB)
 <script type="text/javascript">rcl_init_field_file("faile2");</script></span></div></div></div>
 
 <script> 
$( "#faile1" ).append( "<label for='faile1'>icon1</label>" );
$( "#faile2" ).append( "<label for='faile2'>icon1</label>" );
 </script>

А например как то так
var sum =  $( "input[type='file']" ).length;
for (var i = 0; i < sum; i++) {
$( "#faile"+i ).append( "<label for='faile1"+i+"'>icon"+i+"</label>" );   
}

Но более правильнее. без привязки к имени faile

Редакции сообщения
28.05.2019 13:18zeni1agentПричина: не указано
0
Otshelnik-Fm
не в сети 21 минута
На сайте с 27.01.2013
Модератор
Тем 28
Сообщения 14277
10
14:07

Прям много полей file?
Скрин покажите как выглядит.

Циклом прогоняете в js и находите все вхождения.

0
zeni1agent
не в сети 1 неделя
На сайте с 23.09.2018
Участник
Тем 18
Сообщения 96
11
14:47

Я не совсем понимаю какой скрипт вы от меня хотите
У меня есть только несколько форм публикаций для разных целей

и стандартная файл темы

	<!--Страница--> 
	<div class="page_full">
		<?php the_post(); ?>
		<div class="page_from">	
<?php 			

	the_content();	
?>
 <script>js</script> 	
</div>
		</div>

0
Otshelnik-Fm
не в сети 21 минута
На сайте с 27.01.2013
Модератор
Тем 28
Сообщения 14277
12
14:54

zeni1agent сказал(а)
Я не совсем понимаю какой скрипт вы от меня хотите

я от вас ничего не хочу, а просил скрин формы.
Дал вам варианты по которым вы можете начать работать. Беседа зашла в тупик. Лично я вам больше ничем не могу помочь, но тема открыта - может кто, что-то еще напишет.

0
zeni1agent
не в сети 1 неделя
На сайте с 23.09.2018
Участник
Тем 18
Сообщения 96
13
15:21

Значит вы не знаете как знаете как заменить кнопку file на иконку.
Я просто надеялся что есть какой нибудь хук wp-recall что бы в цикл вывода полей добавить свою иконку
Ну или получить по отдельности каждый id и вернуть его

var sum = $( ".file-field" ).length;
for (var i = 0; i < sum; i++) {
var id = $( ".file-field :eq("+i+")" ).attr("id");
$(".file-field :eq("+i+")").append( "<label for='"+id+"'>icon"+i+"</label>" );   
}

правда я не знаю насколько правильно это будет работать

0
Preci
не в сети 3 часа
На сайте с 11.11.2014
Участник
Тем 57
Сообщения 680
14
17:40

Я не понял в чем проблема.

С помощью jquery each перебираем все инпуты типа file и добавляем


$( "form input[type=file]" ).each(function(index, input){
$(this).after("<label for='"+$(this).attr('id')+"'>icon"+index+"</label>");
});

0
Вы не имеете права на публикацию сообщений в этой теме