Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.02.2018, 21:56
Интересующийся
Отправить личное сообщение для vospa Посмотреть профиль Найти все сообщения от vospa
 
Регистрация: 09.12.2017
Сообщений: 16

Переименование кнопки пользователем.
Доброго времени суток, дамы и господа!
Возник вопрос. Есть HTML-панель расширения для Photoshop. Хочу в ней сделать отдельную вкладку с незанятыми кнопками. Как-то вот так:

<button class="button_color" id="Cb1">A1</button>
<button class="button_color" id="Cb2">A2</button>
<button class="button_color" id="Cb3">A3</button>
<button class="button_color" id="Cb4">A4</button>

И так далее.
Как подвесить на каждую кнопку пользовательский Action понятно. Это в самом Photoshop делается. А дальше скриптом уже управлять:
$("#Cb1").button().click(function(a){csInterface.evalScript('$._ext.evalFile("'+extensionRoot+'Cb_1/1.jsx")')});
$("#Cb2").button().click(function(a){csInterface.evalScript('$._ext.evalFile("'+extensionRoot+'Cb_1/2.jsx")')});
$("#Cb3").button().click(function(a){csInterface.evalScript('$._ext.evalFile("'+extensionRoot+'Cb_1/3.jsx")')});
$("#Cb4").button().click(function(a){csInterface.evalScript('$._ext.evalFile("'+extensionRoot+'Cb_1/4.jsx")')});

А можно ли как-то сделать так, чтобы пользователь мог сам переименовывать кнопки А1, А2, А3, А4, ...? Ну и чтобы эти названия сохранялись и после выхода из Photoshop.
Подозреваю, что это, наверное, не очень сложно. Но так как я с JS строго на "Вы", то не знаю даже с какого боку подступать. Даже как правильно запрос написать в поисковике не сообразить.
Заранее благодарю за любую помощь.
Ответить с цитированием
  #2 (permalink)  
Старый 23.02.2018, 16:56
Профессор
Отправить личное сообщение для Manyasha Посмотреть профиль Найти все сообщения от Manyasha
 
Регистрация: 21.09.2015
Сообщений: 196

vospa, здравствуйте. В этом расширении можно и html и js и стили писать?
Так подойдет?
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
.button_color {
  width: 60px;
}

.fa-cog {
  float: right;
  font-size: 14px;
  color: #5f5f5f;
  opacity: 0.5;
}

.fa-cog:hover {
  font-size: 16px;
  opacity: 1;
}
</style>

<script>
$(function() {
  $(".button_color").each(function() {
    if (localStorage.getItem(this.id)) {
      $(this).contents().eq(0).replaceWith(localStorage.getItem(this.id))
    }
  });

  $(".fa-cog").click(function(e) {
    e.stopPropagation();
    var x = prompt("Введите имя для кнопки");
    if (x) {
      $(this).parent().contents().eq(0).replaceWith(x);
      localStorage[$(this).parent().attr("id")] = x;
    }
  });
})
</script>
</head>
<body>
  <button class="button_color" id="Cb1">A1<i class="fa fa-cog"></i></button>
  <button class="button_color" id="Cb2">A2<i class="fa fa-cog"></i></button>
  <button class="button_color" id="Cb3">A3<i class="fa fa-cog"></i></button>
  <button class="button_color" id="Cb4">A4<i class="fa fa-cog"></i></button>
</body>
Ответить с цитированием
  #3 (permalink)  
Старый 23.02.2018, 17:14
Интересующийся
Отправить личное сообщение для vospa Посмотреть профиль Найти все сообщения от vospa
 
Регистрация: 09.12.2017
Сообщений: 16

Manyasha,
Ох, большое человеческое спасибо Вам, добрый человек!!!
Да, теперь в расширениях для фотошопа, да и в остальных продуктах адобов, можно и html, и js, и стили писать.
Вроде, то, что надо. Доберусь до своего компа, уже на самой панели проверю.
Ответить с цитированием
  #4 (permalink)  
Старый 23.02.2018, 21:35
Интересующийся
Отправить личное сообщение для vospa Посмотреть профиль Найти все сообщения от vospa
 
Регистрация: 09.12.2017
Сообщений: 16

Manyasha,
Эхх... похоже я рано обрадовался...
На сайте все работает отлично, а вот в панели не хочет. При нажатии на иконку шестеренки, окошко "Введите имя для кнопки" тупо не появляется...

ПЫ.СЫ. В хроме все работает, а в лисе и ИЕ нет... Ну и в панели тоже...

Последний раз редактировалось vospa, 23.02.2018 в 22:59.
Ответить с цитированием
  #5 (permalink)  
Старый 23.02.2018, 22:48
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,707

Думаю стоит ознакомится с одним из этих документов:
CC14 Extension SDK
CC Extension SDK
Ответить с цитированием
  #6 (permalink)  
Старый 23.02.2018, 23:21
Интересующийся
Отправить личное сообщение для vospa Посмотреть профиль Найти все сообщения от vospa
 
Регистрация: 09.12.2017
Сообщений: 16

Сообщение от Nexus Посмотреть сообщение
Думаю стоит ознакомится с одним из этих документов:
CC14 Extension SDK
CC Extension SDK
Увы... я знаком с ними. Ну, в том смысле, что видел их :-) Но к большому для меня сожалению, чтобы понимать тонкости JS в приложениях Adobe, надо для начала знать сам JS. Чего о себе не могу сказать от слова совсем...
Надеялся, что может прокатит без этих адобовских нюансов. Увы...
Максимум на что меня хватило, это научиться запаковывать расширения в .zxp. Но это настолько там разжевано, что даже такой нуб, как я, разобрался
Но все равно спасибо :-)

Последний раз редактировалось vospa, 23.02.2018 в 23:26.
Ответить с цитированием
  #7 (permalink)  
Старый 24.02.2018, 00:10
Интересующийся
Отправить личное сообщение для vospa Посмотреть профиль Найти все сообщения от vospa
 
Регистрация: 09.12.2017
Сообщений: 16

Manyasha,
Я идиот... Все работает. Перенес текст скрипта из html в управляющий js и все заработало
Еще раз, огромное человеческое спасибо!
Ответить с цитированием
  #8 (permalink)  
Старый 24.02.2018, 12:41
Профессор
Отправить личное сообщение для Manyasha Посмотреть профиль Найти все сообщения от Manyasha
 
Регистрация: 21.09.2015
Сообщений: 196

Пожалуйста
Сообщение от vospa Посмотреть сообщение
ПЫ.СЫ. В хроме все работает, а в лисе и ИЕ нет... Ну и в панели тоже...
Проверила, и правда. Почему-то не работают события на элементах внутри button. Переделала:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
.button_color {
  width: 60px;
}
 
.fa-cog {
  font-size: 14px;
  color: #5f5f5f;
  opacity: 0.5;
  margin-right:5px;
}
 
.fa-cog:hover {
  opacity: 1;
}
</style>
 
<script>
$(function() {
  $(".button_color").each(function() {
    if (localStorage.getItem(this.id)) {
      $(this).text(localStorage.getItem(this.id))
    }
  });
 
  $(".fa-cog").click(function(e) {
    var x = prompt("Введите имя для кнопки");
    if (x) {
      $(this).prev().text(x);
      localStorage[$(this).prev().attr("id")] = x;
    }
  });
})
</script>
</head>
<body>
  <button class="button_color" id="Cb1">A1</button><i class="fa fa-cog"></i>
  <button class="button_color" id="Cb2">A2</button><i class="fa fa-cog"></i>
  <button class="button_color" id="Cb3">A3</button><i class="fa fa-cog"></i>
  <button class="button_color" id="Cb4">A4</button><i class="fa fa-cog"></i>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 24.02.2018, 13:32
Интересующийся
Отправить личное сообщение для vospa Посмотреть профиль Найти все сообщения от vospa
 
Регистрация: 09.12.2017
Сообщений: 16

Сообщение от Manyasha Посмотреть сообщение
Пожалуйста

Проверила, и правда. Почему-то не работают события на элементах внутри button. Переделала:
Еще раз, огромное спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как зафиксировать кнопки чтобы они оставались на одном месте? mikefromru Элементы интерфейса 5 14.06.2017 23:15
Кнопки с одинаковым box.top Synth Общие вопросы Javascript 20 22.12.2016 22:32
Условие для отображения кнопки навигации по просмотренным страницам solomon2 Events/DOM/Window 4 30.10.2015 11:43
Анимация залипания кнопки SmilingDog Events/DOM/Window 14 22.12.2014 06:35
Обновление события кнопки TheHappy Общие вопросы Javascript 0 06.03.2012 10:30