Using jQuery thickbox built in WordPress

Vladimir Boychentsov — Fri, 17 Oct 2008 10:00:45 +0000

To cite an example of how to use the built-in thickbox wordpress when you write a plug-in.

First step: Create a folder “wp_plugin” in the folder “plugins”

Second step: Create a file with the following code ajax.php

1
2
3
4
5
6
7
8
9
10
11
12
13

define("VP","wp_plugin");
define("ABSPATH", str_replace("wp-content/plugins/".VP, "", dirname(__FILE__)));

//The inclusion of these files allows full use of all functions of wordpress
require_once(ABSPATH.'wp-load.php');
require_once(ABSPATH.'wp-admin/includes/admin.php');

if($_GET['options'])
{
echo $_GET['options'];
}
?>

Go next step

Third step: Create a file with the following code plugin_example.php

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

/*
Plugin Name: WP plugin example
Plugin URI: http://www.developers-life.com
Description: Example using thickbox
Author: www.developers-life.com
Version: 0.1
Author URI: Vladimir Boichentsov
*/

define("VP","wp_plugin");
define("VP_URL", get_option('home')."/wp-content/plugins/".VP );

include_js();
add_action('admin_menu', 'wp_add_page');

//Add page to menu
function wp_add_page() {
add_options_page('Admin Menu', 'Plugin', 'manage_options', VP, 'wp_vp_adminmenu_options_page_includes');
}

//Include javascript
function include_js()
{
if($_GET["page"] == VP)
{
wp_enqueue_script( 'thickbox', get_option('home').'/wp-includes/js/thickbox/thickbox.js', array ('thickbox'), '3.1-20080430' );
add_action( 'admin_head', 'helperCSS');
}

}
// CSS style for thickbox
function helperCSS()
{
echo ")."/wp-includes/js/thickbox/thickbox.css?ver=20080613' type='text/css' media='all' />\n";

}

//Main function
function wp_vp_adminmenu_options_page_includes()
{
echo "\"".VP_URL."/ajax.php?options=ok&type=image&TB_iframe=true\" class=\"thickbox\" title='Example'>Example";
}
?>

It’s easy:)

P.S.: Пишу статью на английском т.к. сам не ищу помощи на русских сайтах, а если нахожу, то в основном все на английском :) Заранее извиняюсь за свой english.

FAQ – часто задаваемые вопросы по jQuery

Vladimir Boychentsov — Fri, 05 Sep 2008 07:58:19 +0000

Эта статья является чуть-чуть вольным переводом аналогичного раздела на сайте разработчиков библиотеки jQuery. Речь пойдет о казалось бы совсем простых вещах, но не всегда очевидных с первого взгляда, поэтому эта информация наверняка может кому-то пригодится.
Как выбирать элементы, используя class или id?

Этот код выбирает элемент с id “myDivId”. Поскольку id является уникальным, это выражение всегда выбирает один элемент. Или ничего не выбирает, если элемента с таким id не существует.

1	$('#myDivId');

Следующий код выбирает элемент(ы) с классом “myCssClass”. Поскольку любое количество элементов может иметь этот класс, это выражение будет выбирать любое количество элементов.

1	$('.myCssClass');

Выбранный элемент может быть присвоен переменной javascript, например так:

1	var myDivElement = $('#myDivId');

Обычно выбранные элементы задействуются другими функциями jQuery:

1
2
3
4

// получаем значение элемента
var myValue = $('#myDivId').val();
// устанавливаем значение элемента
$('#myDivId').val("hello world");

Выбирая элементы по имени класса, лучше использовать составной селектор. Если отбор идет по id, то логично использовать именно id.

1
2
3
4

$('#myDivId'); // лучше
$('div#myDivId'); // хуже
$('span.myCssClass'); // лучше
$('.myCssClass'); // хуже

Как проверить имеет ли элемент специфический класс?

Вы можете использовать метод is() (см. jQuery API: Traversing – обход DOM) вместе с подходящим селектором.

1 2	if ( $('#myDiv').is('.pretty') ) $('#myDiv').show();

Заметьте, что этот метод позволяет Вам проверять также и другие вещи. Например Вы можете проверить, скрыт ли элемент (при использовании :hidden селектора).

1 2	if ( $('#myDiv').is(':hidden') ) $('#myDiv').show();

Иногда также бывает вопрос: имеет ли jQuery hasClass (см. jQuery API: Attributes – атрибуты) метод?

Заметьте, что hasClass был добавлен начиная с версии 1.2, чтобы обрабатывать наиболее распространенное использование метода is().

1
2
3
4
5
6
7
8
9

$("div").click(function(){
if ( $(this).hasClass("protected") )
$(this)
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: 0 });
});

В этом коде добавляется некая анимация для элемента(ов) с классом protected. Обратите внимание, что имя класса тут записывается без точки.
Как проверить существование элемента?

Вы можете использовать свойство length набора jQuery, возвращенного селектором.

1 2	if ( $('#myDiv').length ) $('#myDiv').show();

Заметьте, что вовсе не всегда необходимо проверять, существует ли элемент. Следующий код показал бы элемент, если он существует, и не сделал бы ничего (и никакой ошибки бы не возникло), если это неверно.

1	$('#myDiv').show();

Как определить состояние переключаемого элемента?

Вы можете проверить состояние, используя селекторы :visible или :hidden (см. jQuery API: Selectors – селекторы jQuery: фильтры контента, visibility-фильтры, фильтры атрибутов, child-фильтры).

1 2	var isVisible = $('#myDiv').is(':visible'); var isHidden = $('#myDiv').is(':hidden');

Если Вы хотите воздейстовать на элемент, основываясь на его видимости, просто включите “:visible” или “:hidden” в выражение селектора. Например:

1	$('#myDiv:visible').animate({left: '+=200px'}, 'slow');

Как выбирать элементы, которые имеют специфические символы в id?

Например, это может быть обычным для некоторых фреймворков, генерирующих уникальные id, которые имеют специальные символы в них (такие как ‘.’ или ‘[..]‘). Проблема состоит в том, что эти символы имеют специальное значение в CSS. Как поступать в таких случаях, смотрите на следующих примерах:

1
2
3
4

$("#some.id") // это не работает!
$("#some\\.id") // а это работает!
$("#some[id]") // это не работает!
$("#some\\[id\\]") // а это работает!

Как разрешать/запрещать использование элемента?

Вы можете разрешать/запрещать элемент, устанавливая атрибут ‘disabled’ в значение ‘disabled’ (чтобы запретить использование элемента) или присвоить тому же атрибуту пустое значение ”, или же просто удалить атрибут ‘disabled’ (чтобы разрешить использование элемента). Код может выглядеть примерно следующим образом:

1
2
3
4
5
6

// запрещаем использование элемента #x
$("#x").attr("disabled","disabled");
// разрешаем использование элемента #x
$("#x").attr("disabled","");
// разрешаем использование элемента #x
$("#x").removeAttr("disabled");

Вы можете попробовать следующий пример:

и посмотреть его исходный код:

1
2
3
4
5

Как отметить/снять отметку с элемента checkbox?

Вы можете отметить/снять отметку c элемента checkbox, устанавливая атрибуту ‘checked’ значение ‘checked’ (чтобы отметить элемент) или установить атрибуту ‘checked’ пустое значение “” (чтобы снять отметку). Пример кода приведен ниже:

1
2
3
4

// отмечаем checkbox с id="c"
$("#c").attr("checked", "checked");
// снимаем отметку checkbox'а с id="c"
$("#c").attr("checked","");

Вы можете попробовать следующий пример:

и посмотреть его исходный код:

1	<label><input id="c" type="checkbox" />это подопытный checkbox</label>

Как получать значения выбранной опции элемента select?

Элементы select обычно имеют два значения, к которым нужно обратиться. Это значение атрибута value соответствующего элемента option и его текстовое значение. Для примера возьмем следующий код:

1	<select id="myselect"> <option value="1">Mr</option> <option value="2">Mrs</option> <option value="3">Ms</option> <option value="4">Dr</option> <option value="5">Prof</option> </select>

Вот так можно получить значение атрибута value, выбранной опции:

1	$("select#myselect").val();

А вот так можно получить текст выбранной опции:

1	$("#myselect option:selected").text();

Вы можете попробовать следующий пример:

и посмотреть его исходный код:

1	<select id="myselect"> <option value="1">Mr</option> <option value="2">Mrs</option> <option value="3">Ms</option> <option value="4">Dr</option> <option value="5">Prof</option> </select>

Notes of a Developer » jQuery

Using jQuery thickbox built in WordPress

FAQ – часто задаваемые вопросы по jQuery