Форум программистов, компьютерный форум, киберфорум
React/ReactJS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/8: Рейтинг темы: голосов - 8, средняя оценка - 4.75
1 / 1 / 0
Регистрация: 14.03.2019
Сообщений: 32

Необходимо создать три кнопки во внутренней странице (во 2о странице)

01.10.2020, 16:00. Показов 1735. Ответов 16

Студворк — интернет-сервис помощи студентам
VK Mini Apps ("web") на React.

Есть страница. На странице 5 активных кнопок (Тренировки, Питание, Музыка, Спортпитание, Спорттовары, Мои результаты).
При нажатии на эти кнопки, мы переходим на страницу, на которой сверху находится изображение.

Необходимо: на каждой странице (после нажатия на Тренировки/Питание/...) под изображениями сделать кнопки.

К примеру: нажимаем на Тренировки, открывается новая страница, на которой сверху изображение, а под ним три кнопки: Новичок, Опытный и Мастер.

Я новичок и совсем не знаю как это реализовать. ХЕЛП
Миниатюры
Необходимо создать три кнопки во внутренней странице (во 2о странице)  
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
01.10.2020, 16:00
Ответы с готовыми решениями:

Нужно сделать кнопку на СВОЕЙ странице с урлом взятой с кнопки на ЧУЖОЙ странице
Мне нужно сделать кнопку на СВОЕЙ странице с урлом взятой с кнопки на ЧУЖОЙ странице... Урл кнопки на чужой странице динамический... То...

Мне нужно сделать кнопку на СВОЕЙ странице с урлом взятой с кнопки на ЧУЖОЙ странице
Мне нужно сделать кнопку на СВОЕЙ странице с урлом взятой с кнопки на ЧУЖОЙ странице... Урл кнопки на чужой странице динамический... То...

Создать кнопки на web-странице
Добрый вечер, уважаемые программисты, студенты, а также все форумчане. Помогите, пожалуйста, создать web-страницу HTML. задание: с...

16
1 / 1 / 0
Регистрация: 14.03.2019
Сообщений: 32
01.10.2020, 16:11  [ТС]
Home.js выглядит так (без импортов и без небольшой части после header):
JavaScript
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
/*imports*/
const Home = ({ id, go, fetchedUser }) => (
    <Panel id={id}>
        <PanelHeader>Sculptor</PanelHeader>
        /**/
 
        <Group title="Navigation">
            <Div>
                <Button size="xl" level="2" onClick={go} data-to="training">
                    Тренировки
                </Button>
            </Div>
            <Div>
                <Button size="xl" level="2" onClick={go} data-to="food">
                    Питание
                </Button>
            </Div>
            <Div>
                <Button size="xl" level="2" onClick={go} data-to="music">
                    Музыка
                </Button>
            </Div>
            <Div>
                <Button size="xl" level="2" onClick={go} data-to="sportsfood">
                    Спортпитание
                </Button>
            </Div>
            <Div>
                <Button size="xl" level="2" onClick={go} data-to="sportswear">
                    Спорттовары
                </Button>
            </Div>
            <Div>
                <Button size="xl" level="2" onClick={go} data-to="results">
                    Мои результаты
                </Button>
            </Div>
        </Group>
    </Panel>
);
 
Home.propTypes = {
    id: PropTypes.string.isRequired,
    go: PropTypes.func.isRequired,
    fetchedUser: PropTypes.shape({
        photo_200: PropTypes.string,
        first_name: PropTypes.string,
        last_name: PropTypes.string,
        city: PropTypes.shape({
            title: PropTypes.string,
        }),
    }),
};
 
export default Home;
Добавлено через 3 минуты
А Training.js так(тоже без импортов):
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import training from '../img/training.png';
import './Training.css';
 
const osName = platform();
 
const Training = props => (
    <Panel id={props.id}>
        <PanelHeader
            left={<PanelHeaderButton onClick={props.go} data-to="home">
                {osName === IOS ? <Icon28ChevronBack/> : <Icon24Back/>}
            </PanelHeaderButton>}
        >
            Тренировки
        </PanelHeader>
        <img className="Training" src={training} alt="Training"/>
    </Panel>
);
 
Training.propTypes = {
    id: PropTypes.string.isRequired,
    go: PropTypes.func.isRequired,
};
 
export default Training;
0
 Аватар для esculap_ra
462 / 265 / 55
Регистрация: 22.08.2010
Сообщений: 1,204
Записей в блоге: 4
01.10.2020, 16:44
Ты jqwery не юзал? Там только укажи узел, и он прицепат.

Добавлено через 7 минут
в квери это примерно так $('ИД дива - куда нуна вставить').html(твоя вставка)
0
1 / 1 / 0
Регистрация: 14.03.2019
Сообщений: 32
01.10.2020, 16:54  [ТС]
esculap_ra, нет, jqwery не использовал. Можешь чуть поподробнее расписать пж, я вообще не шарю...
где что как.
0
 Аватар для esculap_ra
462 / 265 / 55
Регистрация: 22.08.2010
Сообщений: 1,204
Записей в блоге: 4
01.10.2020, 16:56
Еслиьт ты с Украины - обращайся, та из РФ можно
0
1 / 1 / 0
Регистрация: 14.03.2019
Сообщений: 32
01.10.2020, 16:59  [ТС]
Я просто делал это использовав шаблон VK Mini Apps (там была одна кнопка и во вкладке одна картинка, поэтому я просто тупо ctrl c ctrl v добавил кнопки картинки и все). Тут даже .html толком нет, т.к. все по одному шаблону
Миниатюры
Необходимо создать три кнопки во внутренней странице (во 2о странице)  
0
1 / 1 / 0
Регистрация: 14.03.2019
Сообщений: 32
01.10.2020, 17:00  [ТС]
esculap_ra, единственный html файл это index.html в котором одной строкой написано небольшое кол-ва кода
0
 Аватар для esculap_ra
462 / 265 / 55
Регистрация: 22.08.2010
Сообщений: 1,204
Записей в блоге: 4
01.10.2020, 17:03
покажи ссылку - я решу проблему
0
 Аватар для esculap_ra
462 / 265 / 55
Регистрация: 22.08.2010
Сообщений: 1,204
Записей в блоге: 4
01.10.2020, 17:09
а вооьще-то тебе нужно сделать дерево каталога. простл я не знаю акак ойф алгорпитм применить. счас скину пример
0
1 / 1 / 0
Регистрация: 14.03.2019
Сообщений: 32
01.10.2020, 17:13  [ТС]
Я тебе скинул в лс ссылку на репозиторий github. Там на данный момент шаблон Vk Mini Apps опубликован. Можешь в этом шаблоне просто во вкладке Persik добавить кнопку??
0
 Аватар для esculap_ra
462 / 265 / 55
Регистрация: 22.08.2010
Сообщений: 1,204
Записей в блоге: 4
01.10.2020, 17:15
я счас дам рабочий сайт - тошько полома!
0
Эксперт JS
 Аватар для DrType
6553 / 3624 / 1075
Регистрация: 07.09.2019
Сообщений: 5,877
Записей в блоге: 1
01.10.2020, 17:18
Bislan, ссылку на Github выкладывайте в тему.
0
 Аватар для esculap_ra
462 / 265 / 55
Регистрация: 22.08.2010
Сообщений: 1,204
Записей в блоге: 4
01.10.2020, 17:20
вот примерно так
0
1 / 1 / 0
Регистрация: 14.03.2019
Сообщений: 32
01.10.2020, 17:31  [ТС]
esculap_ra, ссылка на git с web шаблоном от vk mini apps
https://github.com/ttbis/pho.bin

Добавлено через 10 минут
esculap_ra, ты не отправил ничего
0
 Аватар для esculap_ra
462 / 265 / 55
Регистрация: 22.08.2010
Сообщений: 1,204
Записей в блоге: 4
02.10.2020, 13:19
Цитата Сообщение от Bislan Посмотреть сообщение
ты не отправил ничего
та тут у нас гроза была офигеть! - отключили все.

Добавлено через 5 минут
на странице сделай
HTML5
1
<div id='test'></div>
потом (можно перед закрывающем тэгом страницы)
JavaScript
1
2
3
<script>
$('#test').html('тут твой код');
</script>
Добавлено через 1 минуту
но в хедере подключи файл квери.
0
the hardway first
Эксперт JS
 Аватар для j2FunOnly
2475 / 1847 / 910
Регистрация: 05.06.2015
Сообщений: 3,610
02.10.2020, 14:18
Лучший ответ Сообщение было отмечено Bislan как решение

Решение

esculap_ra, у ТСа VK Mini App, какой jQuery? окститесь.
Bislan, вам надо начать отсюда, как и сказано на странице вк для разработчиков. Если и там будет тяжело, то хотя бы https://learn.javascript.ru/
0
 Аватар для esculap_ra
462 / 265 / 55
Регистрация: 22.08.2010
Сообщений: 1,204
Записей в блоге: 4
02.10.2020, 21:56
Цитата Сообщение от j2FunOnly Посмотреть сообщение
у ТСа VK Mini App, какой jQuery? окститесь.
А шо, трудно подключить?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
02.10.2020, 21:56
Помогаю со студенческими работами здесь

Как создать анимацию, перед появлением кнопки на странице
Здравствуйте Как сделать анимацию, (крутящийся кружок) перед появлением кнопки на странице. Чтобы кнопка не сразу появлялась, а можно...

пр3 на внутренней странице
Ситуация следующая: В интернет магазин добавлен товар с уникальным текстом (месяца 2 назад). Помимо текста вставлены 2 ролика с...

Как вывести анонсы статей на внутренней странице?
Хочу вывести анонсы статей с миниатюрами на этой странице http://www.electric43.ru/stati/ Как здесь, например:...

Выпадающее меню для внутренней навигации по закладкам на странице на javascript+css
Помогите с решением/подскажите где подсмотреть готовое решение. Есть большая html страница, содержимое разделено на части, каждая часть...

Как сделать доступ к PHP странице после логина на aspx странице?
Как сделать доступ к PHP странице после логина на aspx странице? Сделал система аутентификации и авторизации через логин для защиты к...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
17
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru