Фильтр → Все записи с тегом javascript

include в javascript

01.11.2010

Данный код позволяет подключать javascript файлы из любого места программы. Причем исключается посторное включение одного и того же файла

    js = new Object;
    js.loadedModules = new Array;
    js.include = function(path) {
        if(js.loadedModules[path]) return;
        js.loadedModules[path] = true;
        $.ajax({
        	url: path,
        	dataType: "script",
        	async: false,
        	success: function(js){if(jQuery.browser.safari){eval(js);}}
        });

    }

Как видите, внешний файл подключить довольно просто: js.include('main.js');

Необходимо в метод include объекта js передать адрес js скрипта.

Для использования этого кода понадобится библиотека jQuery.

Рекомендую данный код выделить в отдельный файл и включать его в сценарий сразу же после подключения библиотеки jQuery. Подключать внешний файл с кодом прийдется обычным способом через тег script

Категория: javascript , программирование ,
Теги: jquery , javascript ,
Просмотров: 109
Комментарии: 0

JavaScript. Защита контента от копирования

04.01.2010

Нижеприведенный JS код вставляется между тегами head. Код не позволяет пользователю выделять любой текст на странице, где используется защита от копирования контента.

<script language="JavaScript" type="text/javascript">
function cu()
    {
        return false
    }
    function omu(e)
    {
        if(e.which==1)
        {
            window.releaseEvents(Event.MOUSEMOVE);
            window.onmousemove=null
        }
    }
    function nr(e)
    {
        if(e.which==1)
        {
            window.captureEvents(Event.MOUSEMOVE);
            window.onmousemove=cu
        }
        if(e.which==3)
        {
            return false
        }
    }
    function cv()
    {
        vp=event.button;
        if(vp==2||vp==3)alert(unescape("This function is not available."))
    }
    io=document.all;
    ae=document.getElementById;

    if(io)
    {
        if(ae)
        {
            document.onselectstart=cu;
            document.oncontextmenu=cu
        }
        else
        {
            document.onmousedown=cv
        }
    }
    if(ae&&!io){
        document.onmousedown=cu;
        document.onmouseup=nr;
        document.oncontextmenu=cu
    }
    if(document.layers)
    {
        window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
        window.onmousedown=nr;
        window.onmouseup=omu
    }
    function qa0(){
        window.status=" ";setTimeout("qa0()",50)
    }
    qa0();
    function qa1(){
        return true
    }
    if(document.all||document.getElementById) document.body.onmouseover=qa1
</script>
Рекомендую использовать сжатую версию кода:
<script language="JavaScript" type="text/javascript">
function cu(){return false}function omu(e){if(e.which==1){window.releaseEvents(Event.MOUSEMOVE);window.onmousemove=null}}function nr(e){if(e.which==1){window.captureEvents(Event.MOUSEMOVE);window.onmousemove=cu}if(e.which==3){return false}}function cv(){vp=event.button;if(vp==2||vp==3)alert(unescape("This function is not available."))}io=document.all;ae=document.getElementById;if(io){if(ae){document.onselectstart=cu;document.oncontextmenu=cu}else{document.onmousedown=cv}}if(ae&&!io){document.onmousedown=cu;document.onmouseup=nr;document.oncontextmenu=cu}if(document.layers){window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);window.onmousedown=nr;window.onmouseup=omu}function qa0(){window.status=" ";setTimeout("qa0()",50)}qa0();function qa1(){return true}if(document.all||document.getElementById)document.body.onmouseover=qa1
</script>
100% защиты этот код, конечно же не дает, но возможно он убережет контент от ламера с кривыми руками.

Категория: javascript , программирование ,
Теги: защита контента , javascript ,
Просмотров: 572
Комментарии: 0

jQuery Tools v1.0.1 — библиотека компонентов для сайтов web 2.0

15.12.2009


jQuery Tools v1.0.1 — это небольшая библиотека, весом всего лишь в 5.8 кб, которая включает в себя наиболее важные компоненты для сайтов web 2.0.
На официальном сайте jQuery Tools можно посмотреть более 50 демо-страниц, а также подробная документация по применении.

Библиотека включает в себя:

  • Табы;
  • Всплывающие подсказки;
  • Плавные переходы;
  • Прокрутки;
  • Всплывающие окна;
  • Другое

Категория: javascript , программирование ,
Теги: jquery , javascript ,
Просмотров: 595
Комментарии: 0

jwysiwyg. WYSIWYG редактор для Jquery

12.12.2009

Новый WYSIWYG редактор для Jquery выполнен вкачестве плагина. Это альтернатива WYMeditor с гораздо меньшими возможностями. Основным достоинством является ебольшой размер файла менее 26Кб. Концепция редактора заключается в том, чтобы сохранить его простым. Есть возможность настраивать панель инструментов.
Для начала скачайте

Ниже приведен код, который цепляет WYSIWYG редактор на textarea. Для этого нам необходимо подключить библиотеку jquery, желательно последней версии, непосредственно, плагин и его таблицу стилей. При инициализации редактора можно настроить панель инструментов. Чтобы вызвать jwysiwyg с минимальными функциями, достаточно написать $("#textareaMin").wysiwyg();

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.wysiwyg.js"></script>
<link rel="stylesheet" href="jquery.wysiwyg.css" type="text/css" media="screen"  />
<script type="text/javascript">
$(document).ready(function(){
    $("#textareaMin").wysiwyg();
    $("#textareaFull").css("width", "700px").wysiwyg({
        controls : {
            bold : { visible : true, tags : ["b", "strong"], css : { fontWeight : "bold" } },
            italic : { visible : true, tags : ["i", "em"], css : { fontStyle : "italic" } },
            strikeThrough : { visible : true },
            underline : { visible : true },
            separator00 : { visible : true },
            justifyLeft : { visible : true },
            justifyCenter : { visible : true },
            justifyRight : { visible : true},
            justifyFull : { visible : true },
            separator01 : { visible : true},
            indent : { visible : true },
            outdent : { visible : true },
            separator02 : { visible : true },
            subscript : { visible : true },
            superscript : { visible : true},
            separator03 : { visible : true },
            undo : { visible : true },
            redo : { visible : true },
            separator04 : { visible : true },
            insertOrderedList : { visible : true },
            insertUnorderedList : { visible : true },
            insertHorizontalRule : { visible : true },
            separator06 : { separator : true },
            separator07 : { visible : true},
            cut : { visible : false },
            copy : { visible : false},
            paste : { visible : false },
            html : {visible : true}
        }
    });
});
</script>             
<h1>Минимальный</h1>
<textarea cols="50" id="textareaMin"></textarea><h1>Максимальный</h1>
<textarea cols="50" id="textareaFull"></textarea>

Категория: программирование , javascript ,
Теги: jquery , javascript , wysiwyg ,
Просмотров: 1016
Комментарии: 2

TinyMCE. Плагин подсветки синтаксиса syntaxhighlighter.

07.12.2009

Для подсветки синтаксиса будем использовать JS библиотеку syntaxhighlighter.
При подключении всех файлов библиотеки, чтобы засветить необходимый код необходимо заключить его в тег <pre>

Например

<pre name="code" class="php">
... some code here ...
</pre>

Чтобы не писать постоянно это обрамление во время редактирование поста или страницы, написан плагин для wysiwyg TinyMCE, который будет делать это за нас.
Качаем плагин и размещаем его в папке tiny_mce/plugins/
Для подключения плагина добавляем изменения в код инициализации редактора

plugins : "......,syntaxhl,......
theme_advanced_buttons1 : ".....,syntaxhl,....

Необходимо заточить плагин под наши нужды. Для этого открываем файл tiny_mce/plugins/syntaxhl/js/dialog.js, ищем строчки:

textarea_output = '<pre class="' + options + ';' + f.syntaxhl_language.value += ';
textarea_output brush:">';
textarea_output += tinyMCEPopup.editor.dom.encode(f.syntaxhl_code.value);
textarea_output += '</pre> '; /* note space at the end, had a bug it was inserting twice? */
tinyMCEPopup.editor.execCommand('mceInsertContent', false, textarea_output);
tinyMCEPopup.close();

и заменяем их на:

f.syntaxhl_code.value = f.syntaxhl_code.value.replace(/</g,'<');  
f.syntaxhl_code.value = f.syntaxhl_code.value.replace(/>/g,'>');  
textarea_output = '<pre name="code" ';  
textarea_output += 'class="' + f.syntaxhl_language.value + '" cols="50" rows="15">';  
textarea_output +=  f.syntaxhl_code.value;  
textarea_output += '</pre> '; /* note space at the end, had a bug it was inserting twice? */  
tinyMCEPopup.editor.execCommand('mceInsertContent', false, textarea_output);  
tinyMCEPopup.close();

Если вы все сделали правильно, то в панели редактора должна появится оранжевая иконка.
При нажатии на нее выскочит диалоговое окно, в которое необходимо ввсести код, который необходимо подсветить.

 
Необходимо учесть, в самом TinyMCE код не светится. Чтобы убедится в работоспособности, достаточно посмотреть исходный HTML код.
Если то, что вы вставили содержится в теге <pre name="code" class="php">.....</pre>, значит все работает.
Теперь необходимо настроить подсветку синтаксиса во фронтенде, следуя инстукциям syntaxhighlighter.

Категория: javascript , программирование ,
Теги: html , javascript , wysiwyg ,
Просмотров: 1629
Комментарии: 3

JS. Основа скрипта для рейтинга.

05.07.2009

Все просто: выбираем звезды, нажимаем, значение фиксируется в hidden поле rating. При сабмите формы значение передается на скрипт-обработчик. При желании можно сделать отправку значения на аяксе.

пишем css:

#chooseRating ul {margin:0px; padding:0px}
#chooseRating ul li {width:28px; height:26px; list-style:none; float:left}
.clear {clear:both}
#ratingLegend {font-family:Verdana; font-size:12px}

пишем js, предварительно подключив jquery последней версии:

$(document).ready(function(){
    $("#chooseRating img").hover(function(){
        $("#chooseRating img").attr("src", "star_off.gif");
        $("#chooseRating img:lt("+($("#rating").val())+")").attr("src", "star_on.gif");
        var id = $(this).attr("id");
        var legend = $(this).attr("alt");
        $("#ratingLegend").html( legend );
        $("#chooseRating img").each(function(n){
            if( $(this).attr("id") == id )
            {
                $("#chooseRating img:lt("+(n+1)+")").attr("src", "star_on.gif");
            }
            $(this).click(function(){
                $("#rating").val(n+1);
                var legend = $("#star_"+(n+1)).attr("alt");
                $("#ratingLegend").html( legend ).fadeOut("slow", function(){$(this).fadeIn()});
            })

        });
    }, function(){
            if( $("#rating").val() == 0 )
            {
                $("#ratingLegend").empty();
            }
            else
            {
                $("#ratingLegend").html( $("#star_"+$("#rating").val()).attr("alt") );
            }
        $("#chooseRating img").attr("src", "star_off.gif");
        $("#chooseRating img:lt("+($("#rating").val())+")").attr("src", "star_on.gif");
    });
});

пишем html:

Необходимо заготовить картинки активных и неактивных звезд и подредактировать пути к картинкам в нашем скрипте.

Категория: javascript , программирование ,
Теги: html , jquery , javascript ,
Просмотров: 523
Комментарии: 0

PHP. Отображение циклических данных.

01.06.2009

Допустим, вы организовали циклическую отправку писем и хотите видеть, какое письмо отправляется в данный момент времени. Это можно организовать через неявную очистку буфера.
Неявная очистка приводит к тому, что очистка буфера будет выполнятся после каждой операции вывода в окно браузера (функциями echo, print и т.п.), поэтому явные вызовы функции flush() не понадобятся.
Включение неявной очистки отключает буферизацию вывода, текущее содержимое буфера вывода будет отправлено, так как если бы вызывалась функция ob_end_flush().
Ниже пример, иллюстрирующий вывод текущего значения счётчика цикла. Также реализован progressbar.

файл progressbar.php:

<?php
    set_time_limit(600);   
    header("Expires: Tue, 1 Jul 2003 05:00:00 GMT");
    header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
    header("Cache-Control: no-store, no-cache, must-revalidate");
    header("Pragma: no-cache");   
    ob_implicit_flush();
?>

<style type="text/css">
#wrap {width:700px; margin:0px auto; }
#display{
    border:1px solid #ddd;
    padding:5px;
    text-align:left;
    height:100px;
    overflow-y:scroll
}
#progress {margin-top:5px; height:22px}
body {font-family:Arial; text-align:center;}
#progress {border:1px solid #496A71}
#st_tab {
    background:#0F849D;
    FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#CCCCFF,endColorStr=#5555CC);
    border-right: 1px solid #AAAAAA
}
#st_tab td {text-align:center; color:#fff}
</style>

<script type="text/javascript">
function indicator(str, persent){
    document.getElementById('display').innerHTML += str;
    document.getElementById('display').scrollTop += 24;
    document.getElementById('progressBar').innerHTML = persent + '%';
    document.getElementById('st_tab').width = persent ? persent + '%' : '1';    
}
</script>

<h1>Progress bar</h1>
<div id="wrap">
    <div id="display"></div>
    <div id="progress">
        <table width="1" cellpadding="0" cellspacing="0" id="st_tab">
            <tr>
                <td height=22 ID="progressBar"></td>
            </tr>
        </table>
    </div>
</div>

<?php
    function indicator($str = '', $persent)
    {
        echo '<script>indicator("'.$str .'", '.$persent.')</script>';
    }   
    $total = 1000;
    for($i = 0; $i < $total; $i++)
    {
        $persent = 100 - floor( (($total-$i)*100) / $total );
        $str = '<div>'.$i.'</div>';
        indicator($str, $persent);
    }                               
?>

 

Рабочий пример можно посмотреть здесь

Категория: php , программирование ,
Теги: php , javascript ,
Просмотров: 424
Комментарии: 0

Выделение checkbox'ов одним нажатием

14.05.2009

Нажатием на один чекбокс устанавливаем/снимаем выделение со всех чекбоксов.

Выделить все

Вариант 1
Вариант 2
Вариант 3
Вариант 4
Вариант 5
Вариант 6
Вариант 7
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var check = 0;
    $("#checkAll").click(function(){
        if( check == 0 ){
            $("input.check:checkbox").attr("checked", "checked");
            check = 1;
        }
        else{
            $("input.check:checkbox").removeAttr("checked");
            check = 0;
        }
    });
});
</script>
 Выделить все
Вариант 1
Вариант 2
Вариант 3
Вариант 4
Вариант 5
Вариант 6
Вариант 7

Категория: javascript , программирование ,
Теги: jquery , javascript ,
Просмотров: 633
Комментарии: 0

Masked Input Plugin для Jquery

10.05.2009

Данный плагин является разширением для библиотеки jQuery. Он позволяет пользователю легко ввести данные заданного формата (даты, номера телефонов и т.д.). Плагин был протестирован под Internet Explorer 6 / 7, Firefox 1.5/2/3, Safari, Opera, и Chrome. Правила(формат) ввода определяется маской:

  • a - Представляет алфавитный символ (az, AZ)
  • 9 - Представляет цифру (0-9)
  • * - Представляет алфавитно-цифровые символы (az, AZ ,0-9)

 

Date 99/99/9999
Phone (999) 999-9999
Phone + Ext (999) 999-9999? x99999
Tax ID 99-9999999
SSN 999-99-9999
Product Key a*-999-a999
Eye Script ~9.99 ~9.99 999

 

Во-первых, необходимо подключить jQuery и Masked Input Plugin.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>

Затем определите маску для элементов, которых необходимо обеспечить правилом ввода.

jQuery(function($){
    $("#date").mask("99/99/9999");
    $("#phone").mask("(999) 999-9999");
    $("#tin").mask("99-9999999");
    $("#ssn").mask("999-99-9999");
});

Если вы хотите заменить знак подчеркивания (’_') в качестве заполнителя, можно передавать необязательный аргумент placeholder.

jQuery(function($){
    $("#product").mask("99/99/9999",{placeholder:" "});
});

Дополнительно можно вызвать функцию после того, как ввод по маске был завершен.

jQuery(function($){
    $("#product").mask("99/99/9999",{completed:function(){
         alert("You typed the following: "+this.val());
    }});
});

Можно самостоятельно определять символы для маски.

jQuery(function($){
    $.mask.definitions['~']='[+-]';
    $("#eyescript").mask("~9.99 ~9.99 999");
});

Категория: javascript , программирование ,
Теги: javascript , jquery ,
Просмотров: 1359
Комментарии: 0

Скрытая форма для авторизации

15.02.2009

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

 

Для начала прорисуем саму форму:

 

 

Затем скроем ее от постороннего взгляда:

 

#AuthorizeBg
{
	background:#000000 none repeat scroll 0%;
	display:none;
	left:0px;
	opacity:0.5;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	position:absolute;
	top:0pt;
	z-index:10;
}
#AutorizeForm
{
  z-index:20;
	display:none;
	width:400px;
	height:200px;
	border-width:0px 1px 1px 0px;
	border-style: solid;
	border-color: #000000;
	background:#ffffff;
	text-align:center;
	position:absolute;
}

И добавим Js сценарий управления отображением формы:

 

function AutorizeForm(){
        var AutorizeForm = document.getElementById("AutorizeForm");
        var AuthorizeBg = document.getElementById("AuthorizeBg");
		if(window.innerWidth){
			width = window.innerWidth;
			height = window.innerHeight;
		} else if(document.documentElement && document.documentElement.clientWidth) {
			width = document.documentElement.clientWidth;
			height = document.documentElement.clientHeight;
		}	else if(document.body && document.body.clientWidth) {
			width = document.body.clientWidth;
			height = document.body.clientHeight;
		}
		AutorizeForm.style.left = (width/2 - 200)+'px';

		AutorizeForm.style.display = "block";
		AuthorizeBg.style.display = "block";
		
		AuthorizeBg.style.width = width;
		AuthorizeBg.style.height = height;
		
		AutorizeForm.style.top = (height/2 - 200)+'px';
	}

 

Осталось только добавить управляющий элемент и повесить на него событие:

 

 

При желании можно перевести js на jquery. Рабочий пример лежит здесь

Категория: программирование , javascript ,
Теги: html , javascript ,
Просмотров: 918
Комментарии: 0

Популярные

10 причин, чтобы отказаться от алкоголя и одна – чтобы употреблять алкоголь

Комментариев: 53 | просмотров: 8256
01.09.2009

О вреде микроволновой печи

Комментариев: 9 | просмотров: 3538
13.12.2009

Весело, весело встретим Новый GOD

Комментариев: 9 | просмотров: 2007
17.12.2009

Масонская символика на долларе

Комментариев: 4 | просмотров: 3949
03.03.2009

PHP. strtolower(strtoupper) и UTF-8

Комментариев: 4 | просмотров: 1774
14.05.2009

Библия. Книга Судей. Глава 19

Комментариев: 4 | просмотров: 1388
30.08.2009

Дискотека Авария. Заколебал ты

Комментариев: 4 | просмотров: 328
01.08.2010

Категории

Календарь

ПнВтСрЧтПнСбВс
12
3456789
10111213141516
17181920212223
24252627282930
31

Цитаты

Лучший раб тот, который даже не понимает, что он раб, а наслаждается своими цепями.

Египетские рабовладельцы