Перейти к содержимому


Замена стандартных подсказок. Вывод справки во всплывающем окне.

title qTip подсказки справка

Сообщений в теме: 39

#1 andibrag

    Прежде, чем задать вопрос, продумайте свое решение.

  • Активный пользователь
  • PipPipPip
  • 1 332 сообщений
  • Пол:Мужчина
  • Город:Санкт-Петербург

Отправлено 09 Апрель 2012 - 00:35

Приведенный код заменяет стандартные подсказки на более эффектные.
Справка отображается при наведении на значок вопроса без клика.
Прикрепленный файл  02.jpg   17,92К   175 Количество загрузок:
Отображаются превьюшки изображений, прикрепленных файлов, если они являются картинками.
Прикрепленный файл  01.jpg   35,14К   171 Количество загрузок:
Чтобы не повторяться рекомендую ознакомиться с принципами подключения файлов здесь.
В файле addscr.js, который подгружается при запуске программы, подключить плагин qTip (скачайте по ссылке):
IncludeJavaScript("/cb_modules/qTip/jquery.qtip.min.js");
IncludeCSS("/cb_modules/qTip/jquery.qtip.css");
Добавьте в файл script_1.js следующие строки
// ==========================================================================================
// ПРЕОБРАЗОВАНИЕ ПОДСКАЗОК И СПРАВКИ
//===========================================================================================
var cl_timer_1,f_id,datatosend;
$("*").live('mouseenter', function(event) {
$(this).qtip({
overwrite: false,
style:{
classes: 'ui-tooltip-rounded ui-tooltip-shadow'
},
position: {
target: $(this),
viewport: $(window)
},
show: {
		  event: event.type,
		  ready: true
	   }
	}, event);
});

$("[src*='images/help.gif']").each(function(){
var elem=$(this);
var str=$(this).attr("onclick");
var str_cont;
f_id = str.replace(/.*field=(\d*)[ \'\",].*/igm,"$1");
elem.qtip({
content: {
title: 'Справка',
ajax: {
url: '/cb_modules/help.php',
data: {field: f_id},
success: function(txt){
elem.qtip('api').set('content.text', txt.replace(/\n/gm,"<br>"));
}
}
},
position: {
my: 'right center',
adjust: {
x: 0,  y: 0
},
at: 'left center'
},
show: {
delay: 500
},
hide: {
delay: 100,
fixed: true
},
style:{
classes: 'ui-tooltip-rounded ui-tooltip-shadow'
}
});
});


// ==========================================================================================
// ПРЕОБРАЗОВАНИЕ ССЫЛОК ДЛЯ ВЛОЖЕННЫХ ИЗОБРАЖЕНИЙ
//===========================================================================================
$("[href*='/cb/open_file.php']").each(function(){
var elem=$(this);
var str=elem.attr("href");
var reg = /.*\.(\S+)$/;
var ext=str.replace(reg,'$1');
var imgArr=new Array('jpg','jpeg','gif','png');
if (inArray(ext, imgArr)) {
elem.qtip({
content: '<img style="max-width:150px;max-height:200px;" src="'+ str +'">',
position: {
my: 'left top',
adjust: {
x: 10,  y: 0
},
at: 'right center'
},
show: {
delay: 100
},
hide: {
delay:5
}
});
}
});
в папку cb_modules положите файл help.php со следующим содержимым:
<?
require_once $_SERVER['DOCUMENT_ROOT'] . "/cb/include/config.php";
require_once $_SERVER['DOCUMENT_ROOT'] . "/cb/include/constants.php";
$f_id=$_GET['field'];
mysql_connect($config["dbhost"], $config["dbuser"], $config["dbpass"]);
mysql_select_db($config["dbname"]);
$sqlQuery = "SELECT * FROM `".FIELDS_TABLE."` WHERE `id`='".$f_id."' LIMIT 1";
$result = mysql_query($sqlQuery);
$row = mysql_fetch_assoc($result);
echo $row['help'];
?>

Творческая группа "ТАВР".

www.MEGATAVR.com Художественная ковка, витражи, мозаика, фрески.

www.iGal.pro Уникальный мангал.


#2 arsenal

    Активный участник

  • Пользователи
  • PipPipPip
  • 444 сообщений

Отправлено 09 Апрель 2012 - 13:41

спасибо, будем пробовать

#3 smart

    Активный участник

  • Пользователи
  • PipPipPip
  • 297 сообщений
  • Пол:Мужчина
  • Интересы:v1980.8@gmail.com

Отправлено 09 Апрель 2012 - 14:48

не фига себе ... нет слов ... вы супер ...

а если нажать на значок вопроса - что будет?

#4 andibrag

    Прежде, чем задать вопрос, продумайте свое решение.

  • Активный пользователь
  • PipPipPip
  • 1 332 сообщений
  • Пол:Мужчина
  • Город:Санкт-Петербург

Отправлено 09 Апрель 2012 - 15:32

Просмотр сообщенияsmart (09 Апрель 2012 - 14:48) писал:

а если нажать на значок вопроса - что будет?
откроется стандартное окно со справкой. Функционал, заложенный в программу, данный код не отменяет.

Творческая группа "ТАВР".

www.MEGATAVR.com Художественная ковка, витражи, мозаика, фрески.

www.iGal.pro Уникальный мангал.


#5 arsenal

    Активный участник

  • Пользователи
  • PipPipPip
  • 444 сообщений

Отправлено 09 Апрель 2012 - 16:05

Чего-то не работает. Версия, на всякий случай, локальная.
Могу ошибаться, но возможно в этой строчке ошибка
f_id = str.replace(/.*field=(\d*)[ \'\",].*/igm,"$1");
т.к. мой редактор PHP начиная с этого места выделяет все одним цветом, возможно что-то с кавычками.
Если выражение /.*field=(\d*)[ \'\",].*/igm взять в кавычки, то редактор дальнейший код подсвечивает верно, но все равно не работает. Смущает также, что в файле "jquery.qtip.min.js" весь код как-то странно записан в одну строчку. Может некорректно скачивается?

Если я правильно понял:
1. Справка появиться только в режиме просмотра записи (где есть знак вопроса возле поля), в таблице подсказка не появиться.
2. Через вычисление содержание всплывающей подсказки поменять нельзя, будет появляться только справка, которую я ввел при конфигурации.

Сообщение отредактировал arsenal: 09 Апрель 2012 - 17:29


#6 andibrag

    Прежде, чем задать вопрос, продумайте свое решение.

  • Активный пользователь
  • PipPipPip
  • 1 332 сообщений
  • Пол:Мужчина
  • Город:Санкт-Петербург

Отправлено 09 Апрель 2012 - 21:18

Просмотр сообщенияarsenal (09 Апрель 2012 - 16:05) писал:

Могу ошибаться, но возможно в этой строчке ошибка
f_id = str.replace(/.*field=(\d*)[ \'\",].*/igm,"$1");
т.к. мой редактор PHP начиная с этого места выделяет все одним цветом
Данный код не относится к php, это содержимое javascript файла.
Если Вы пользуетесь редактором php для просмотра js-кода, возможно что интерпретатор php этот код не понимает и неверно форматирует цветом.
Ошибки здесь нет - это регулярное выражение, извлекающее номер поля для которого отображается справка. Проблема где-то в другом месте.
Проверьте размещение файлов qtip или откройте консоль ошибок браузера - сразу станет понятно в какой строке неполадки.

Просмотр сообщенияarsenal (09 Апрель 2012 - 16:05) писал:

Смущает также, что в файле "jquery.qtip.min.js" весь код как-то странно записан в одну строчку.
jquery.qtip.min.js - это "сжатый" файл qtip, он записывается в одну строчку, чтобы минимизировать трафик и ускорить загрузку файла

Просмотр сообщенияarsenal (09 Апрель 2012 - 16:05) писал:

Если я правильно понял:
1. Справка появиться только в режиме просмотра записи (где есть знак вопроса возле поля), в таблице подсказка не появиться.
2. Через вычисление содержание всплывающей подсказки поменять нельзя, будет появляться только справка, которую я ввел при конфигурации.
Все правильно.

Творческая группа "ТАВР".

www.MEGATAVR.com Художественная ковка, витражи, мозаика, фрески.

www.iGal.pro Уникальный мангал.


#7 Bob_chemist

    Активный участник

  • Пользователи
  • PipPipPip
  • 56 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 10 Апрель 2012 - 15:06

Uncaught TypeError: Object [object Object] has no method 'qtip'
(anonymous function)script_1.js:46
f.each.f.event.special.(anonymous function).handlejquery.min.js:3
f.event.dispatchjquery.min.js:3
f.event.add.h.handle.ijquery.min.js:3
я так понимаю, qTip не подключился. Но все пути верные.
И еще, в консоли ошибок не было части скрипта со всплывающими подсказками пока не удалил ; перед ней

перенес внутрь скобок. Всплывающие подсказки заработали. Картинки - еще сопротивляются

Сообщение отредактировал Bob_chemist: 10 Апрель 2012 - 15:16


#8 Bob_chemist

    Активный участник

  • Пользователи
  • PipPipPip
  • 56 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 10 Апрель 2012 - 16:27

подключил файл jquery.qtip.js
выдает ошибку в нем на строке 69:
  a = c.apply ? c.apply(console, args) : c(args);


#9 andibrag

    Прежде, чем задать вопрос, продумайте свое решение.

  • Активный пользователь
  • PipPipPip
  • 1 332 сообщений
  • Пол:Мужчина
  • Город:Санкт-Петербург

Отправлено 10 Апрель 2012 - 17:30

быть может сборка плохая
скачайте здесь
обратите внимание, что jquery должен быть подключен до qTip и не ниже версии 1.5 (у меня 1.7.1 стоит)

Сообщение отредактировал andibrag: 10 Апрель 2012 - 19:24

Творческая группа "ТАВР".

www.MEGATAVR.com Художественная ковка, витражи, мозаика, фрески.

www.iGal.pro Уникальный мангал.


#10 Bob_chemist

    Активный участник

  • Пользователи
  • PipPipPip
  • 56 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 10 Апрель 2012 - 23:05

все новое подключено.
Ошибку тут выдает в файле script_1.js
if (inArray(ext, imgArr)) {
Uncaught ReferenceError: inArray is not defined

#11 andibrag

    Прежде, чем задать вопрос, продумайте свое решение.

  • Активный пользователь
  • PipPipPip
  • 1 332 сообщений
  • Пол:Мужчина
  • Город:Санкт-Петербург

Отправлено 11 Апрель 2012 - 00:40

извините забыл про эту функцию
добавьте в файл script_1.js
function inArray(val, arr) {
for (i = 0; i < arr.length; i++)
  if (val == arr[i])
   return true;
return false;
}

Творческая группа "ТАВР".

www.MEGATAVR.com Художественная ковка, витражи, мозаика, фрески.

www.iGal.pro Уникальный мангал.


#12 Bob_chemist

    Активный участник

  • Пользователи
  • PipPipPip
  • 56 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 11 Апрель 2012 - 08:53

вставил эту функцию после
// ==========================================================================================
// ПРЕОБРАЗОВАНИЕ ССЫЛОК ДЛЯ ВЛОЖЕННЫХ ИЗОБРАЖЕНИЙ
//===========================================================================================
надеюсь, правильно, но в любом случае, заработало. Спасибо!

#13 arsenal

    Активный участник

  • Пользователи
  • PipPipPip
  • 444 сообщений

Отправлено 12 Апрель 2012 - 13:06

Консоль ошибок выдает
Ошибка: $(this).qtip is not a function
Источник: http://127.0.0.1:755...les/script_1.js
Строка: 89


#14 andibrag

    Прежде, чем задать вопрос, продумайте свое решение.

  • Активный пользователь
  • PipPipPip
  • 1 332 сообщений
  • Пол:Мужчина
  • Город:Санкт-Петербург

Отправлено 12 Апрель 2012 - 17:59

Просмотр сообщенияarsenal (12 Апрель 2012 - 13:06) писал:

Консоль ошибок выдает
Ошибка: $(this).qtip is not a function
Это возможно, если где-то в коде объявлена переменная с именем совпадающим с функцией, в данном случае - qtip.
Какой браузер у Вас используется?

Творческая группа "ТАВР".

www.MEGATAVR.com Художественная ковка, витражи, мозаика, фрески.

www.iGal.pro Уникальный мангал.


#15 arsenal

    Активный участник

  • Пользователи
  • PipPipPip
  • 444 сообщений

Отправлено 12 Апрель 2012 - 19:29

Просмотр сообщенияandibrag (12 Апрель 2012 - 17:59) писал:

Какой браузер у Вас используется?
Мозила

#16 andibrag

    Прежде, чем задать вопрос, продумайте свое решение.

  • Активный пользователь
  • PipPipPip
  • 1 332 сообщений
  • Пол:Мужчина
  • Город:Санкт-Петербург

Отправлено 12 Апрель 2012 - 20:02

Просмотр сообщенияarsenal (12 Апрель 2012 - 19:29) писал:

Мозила
Проверил в мозиле - работает. Ищите переменную qtip. Сделайте поиск по всему документу через панель ошибок.

Творческая группа "ТАВР".

www.MEGATAVR.com Художественная ковка, витражи, мозаика, фрески.

www.iGal.pro Уникальный мангал.


#17 arsenal

    Активный участник

  • Пользователи
  • PipPipPip
  • 444 сообщений

Отправлено 12 Апрель 2012 - 20:35

Просмотр сообщенияandibrag (12 Апрель 2012 - 20:02) писал:

Сделайте поиск по всему документу через панель ошибок.
1. По какому документу - script_1.js?
2. Панель ошибок - это "консоль ошибок"? Там никаких средств для поиска не обнаружил, чисто информативное окно.
3. Откуда могла возникнуть переменная qTip? Я такую не создавал. Если это переменная в самой программе, то почему у вас работает?
4. А можно ли функцию qTip переименовать? И где ещё это нужно сделать?

Сообщение отредактировал arsenal: 12 Апрель 2012 - 21:02


#18 andibrag

    Прежде, чем задать вопрос, продумайте свое решение.

  • Активный пользователь
  • PipPipPip
  • 1 332 сообщений
  • Пол:Мужчина
  • Город:Санкт-Петербург

Отправлено 12 Апрель 2012 - 21:16

Просмотр сообщенияarsenal (12 Апрель 2012 - 20:35) писал:

1. По какому документу - script_1.js?
Подозреваю, что нет.

Просмотр сообщенияarsenal (12 Апрель 2012 - 20:35) писал:

2. Панель ошибок - это "консоль ошибок"? Там никаких средств для поиска не обнаружил, чисто информативное окно.
В mozila я не силен, но помню, что есть панель firebug, которая отображает все ошибки.


Просмотр сообщенияarsenal (12 Апрель 2012 - 20:35) писал:

3. Откуда могла возникнуть переменная qTip? Я такую не создавал. Если это переменная в самой программе, то почему у вас работает?
Вы писали, что использовали другой модуль с подсказками, быть может они конфликтуют. Переменная qtip может содержаться в любом подключенном js файле, либо внутри html-документа, содержащего javascript.

Просмотр сообщенияarsenal (12 Апрель 2012 - 20:35) писал:

4. А можно ли функцию qTip переименовать?
Переименовать не получится, к сожалению. Необходимо отследить все ссылки на нее в исходном файле плагина qTip, это может привезти к еще большим ошибкам.

Творческая группа "ТАВР".

www.MEGATAVR.com Художественная ковка, витражи, мозаика, фрески.

www.iGal.pro Уникальный мангал.


#19 arsenal

    Активный участник

  • Пользователи
  • PipPipPip
  • 444 сообщений

Отправлено 12 Апрель 2012 - 21:55

Просмотр сообщенияBob_chemist (10 Апрель 2012 - 15:06) писал:

Uncaught TypeError: Object [object Object] has no method 'qtip'
(anonymous function)script_1.js:46
f.each.f.event.special.(anonymous function).handlejquery.min.js:3
f.event.dispatchjquery.min.js:3
f.event.add.h.handle.ijquery.min.js:3
я так понимаю, qTip не подключился. Но все пути верные.
И еще, в консоли ошибок не было части скрипта со всплывающими подсказками пока не удалил ; перед ней

перенес внутрь скобок. Всплывающие подсказки заработали. Картинки - еще сопротивляются
Где именно удалили ";" и что куда перенес?

#20 Bob_chemist

    Активный участник

  • Пользователи
  • PipPipPip
  • 56 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 12 Апрель 2012 - 23:31

вот мой script_1.js
function show_online()  {
  $.ajax({ 
	    dataType: "html", 
	    url: "../cb_modules/user_online.php", 
	    cache: false,
	    data: "access="+access_M+"&user="+user_M,
	    success: function(html){
		   $("#user_online").html("<span style='text-align:center'><b>Пользователи ONLINE:</b></span>");
		   var arr_html=html.split("|||");
		   $("#user_online").append(arr_html[0]);
		   var script = document.createElement("script");
		   script.text=arr_html[1];
		   document.getElementById("user_online").appendChild(script);
	    }, 
	    error:  function(xhr,str){
		   var err_str = xhr.responseCode;
		   $("#user_online").html("<span style='text-align:center'><b>Ошибка: " + str + "</b></span>");
	    }
  }); 
} 
var access_M, user_M;
$(function($) {
// ======================= НАЧАЛО ON-LINE ПОЛЬЗОВАТЕЛИ ===========================
  // создаем слой, куда будут выводится данные о пользователях 
	    $(".otstup2").prepend("<div id='user_online' class='block1'></div>");
	    // извлекаем дату и время обновления страницы
	    var d = new Date();
	    var dt = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
	    access_M = dt;
	    user_M = $(".yourname").text();
	    // отправляем данные функцией show_online через интервал времени timeInt
	    var timeInt=15000;
	    show_online();
	    setInterval('show_online()',timeInt);
// ======================= КОНЕЦ ON-LINE ПОЛЬЗОВАТЕЛИ ============================
// ==========================================================================================
// ПРЕОБРАЗОВАНИЕ ПОДСКАЗОК И СПРАВКИ
//===========================================================================================
var cl_timer_1,f_id,datatosend;
$("*").live('mouseenter', function(event) {
$(this).qtip({
overwrite: false,
style:{
classes: 'ui-tooltip-rounded ui-tooltip-shadow'
},
position: {
target: $(this),
viewport: $(window)
},
show: {
				  event: event.type,
				  ready: true
		   }
	    }, event);
});
$("[src*='images/help.gif']").each(function(){
var elem=$(this);
var str=$(this).attr("onclick");
var str_cont;
f_id = str.replace(/.*field=(\d*)[ \'\",].*/igm,"$1");
elem.qtip({
content: {
title: 'Справка',
ajax: {
url: '/cb_modules/help.php',
data: {field: f_id},
success: function(txt){
elem.qtip('api').set('content.text', txt.replace(/\n/gm,"<br>"));
}
}
},
position: {
my: 'right center',
adjust: {
x: 0,  y: 0
},
at: 'left center'
},
show: {
delay: 500
},
hide: {
delay: 100,
fixed: true
},
style:{
classes: 'ui-tooltip-rounded ui-tooltip-shadow'
}
});
});
// ==========================================================================================
// ПРЕОБРАЗОВАНИЕ ССЫЛОК ДЛЯ ВЛОЖЕННЫХ ИЗОБРАЖЕНИЙ
//===========================================================================================
function inArray(val, arr) {
for (i = 0; i < arr.length; i++)
  if (val == arr[i])
   return true;
return false;
}
$("[href*='/cb/open_file.php']").each(function(){
var elem=$(this);
var str=elem.attr("href");
var reg = /.*\.(\S+)$/;
var ext=str.replace(reg,'$1');
var imgArr=new Array('jpg','jpeg','gif','png');
if (inArray(ext, imgArr)) {
elem.qtip({
content: '<img style="max-width:150px;max-height:200px;" src="'+ str +'">',
position: {
my: 'left top',
adjust: {
x: 10,  y: 0
},
at: 'right center'
},
show: {
delay: 100
},
hide: {
delay:5
}
});
}
});

});






Количество пользователей, читающих эту тему: 2

0 пользователей, 2 гостей, 0 анонимных