Шрифт с начертание шрифта: жирный

Как веб-разработчик знает, проблема с коммерческих шрифтов, от фирменного стиля, но не как веб-шрифты. Популярные это всегда разные формы изображения замены. Недостатки очевидны:

• Нет оптимального Suchmaschinerkennung
• Высокая поправки и административные расходы
• Текст не copyable
• Проблема доступности

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

Следуя тому же принципу работает в JS-плагин Шрифт . Только он более практичен в использовании.
Следующий код связывает обычным шрифтом, а позже описал Жирным шрифтом:

  1
 2
 3

  "typeface-0.14.js" ><!-- mce : 0 --></ script > <SCRIPT SRC = "typeface-0.14.js"> <! - МКО: 0 --></ SCRIPT>
 "mysrcFont.typeface.js" ><!-- mce : 1 --></ script > <SCRIPT SRC = "mysrcFont.typeface.js"> <! - МКО: 1 --></ SCRIPT>
 "mysrcFontBold.typeface.js" ><!-- mce : 2 --></ script > <SCRIPT SRC = "mysrcFontBold.typeface.js"> <! - МКО: 2 --></ SCRIPT> 

Чтобы текст zuzuweißen соответствующий шрифт, вы просто используете заявление CSS семейство шрифтов.

  1
 2

  <div id="text" style="font-family: mySrc Font;">
 Лорум ipsolum ...</ DIV> 

Имя атрибута в Сыле использовать шрифты можно читать в каждом из JS файлов.
Все это имеет два недостатка, как это описано на сайте, уже хорошо. Проблемы с производительностью при больших объемах текста и стандартной CSS Hovereffekte больше не работает.
Это будут преобразованы в JavaScript файла шрифтов OpenType Truetype или отформатировать один должен существовать. Не всегда в этих работах, смелые версии интегрированы. Для того, чтобы получить власть, вы можете экспортировать инструмент для редактирования шрифтов, только версия Bold и конвертировать их. Добавляет 1 теперь эти два JS файлы и присваивает шрифта Bold элемент HTML, что произошло с точностью до ошибки вывода на консоль Firebug, ничего.
Решение этой проблемы простое. Шрифт преобразователя на комплексной сайте Шрифт также содержится информация о шрифтов, почему селектора CSS, что информация необходима также:

  1
 2
 3
 4
 5
 6
 7
 8

 font-family : mySrc Font , Verdana , Arial ; } #boldFont { font-family : mySrc Boldfont , Verdana , Arial ; font-weight : bold ; } # Текст (семейство шрифтов: mySrc шрифт Verdana, Arial;) # boldFont (семейство шрифтов: mySrc Boldfont, Verdana, Arial, начертание шрифта: жирный;) 

Так обходной путь для вложения нормальных и жирным шрифтом является совершенным.

Альтернативой sIFR JavaScript Cufón -
sIFR 3 r436 - прокрутка проблемы в Firefox 3, IE6 / 7

JQuery функции нагрузки - простой способ Ajax (Часть 1)

Нагрузки функции могут быть просто HTML элементы файл в текущем вставки. Эта функция в первую очередь для "импорта" код HTML в свои мысли, и поэтому не соответствуют типичным запрос Ajax в примере скрипта имеется доступ, данные из базы данных не прочитает и / или постучать по отношению к другим процессам сервера.

Так обстоит дело с первой теории, вызов функции выглядит следующим образом:

  1

  ) . load ( '/someFile #mydiv' ) ; $ ('# SomeElement'). Нагрузки ('/ # somefile myDiv'); 

Так мало, что просто. В элемент с идентификатором "someElement" DIV-ов, все содержание "myDiv" загружен идентификатор. Удачный то, что "myDiv" вовсе не в текущий документ, но в файле "somefile".
Второй параметр, функция также загружать данные в качестве так называемых пар ключ / значение прошли его.

  1

  ) . load ( 'someFile.php' , { 'param' : 'someValue' } ) ; $ ('# SomeElement'). Нагрузки ('someFile.php', ('параметр': 'someValue')); 

Это соответствует, однако, теперь больше похожа на нормальную запрос Ajax. Один или несколько пар ключ / значение передаются в PHP скрипт после параметра. Конечно, один теряет преимущество и в предыдущем примере с другими элементами HTML из сценария, чтобы получить DOM просто. Но если вы спрашиваете одной прямой без дальнейшей обработки приведет элемент вставки, что является очень простой и удобный вариант.

В следующей части будет продвинулись от других вариантов, таких как получить JQuery Ajax, getJSON и т.д. идти.

JQuery HowTo: Обход

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

Что здесь произошло? Основа этой структуры HTML:

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19

  <div id="someParent" style="border: 1px пунктирной #ccc"> родителей
 <div>
  Child1
 </> Div
 <div class="move">
  Child2
 </> Div
 <div>
  Child3
 </> Div
 not"> <div class="move
  Child4
 </> Div
 </> Div

 <div id="someWrapper">
 <a id="testone" href="#"> Переместить все </ A>
 <a id="testtwo" href="#"> Переместить отфильтрованные </ A>
 </> Div 

Следующий код JavaScript выполняет анимацию. На основании связь с методами родителя "someWrapper" выбрали DIV, предыдущий пункт выбирает один с предыдущей "someParent" и, наконец, идентификатор быть с детьми всех элементов в "someParent выбран.
Код в примере лишь иллюстративный характер. Анимированные элементы, которые будут исключительно на структуру DOM нашли.

JQuery код "Переместить все":

  1
 2
 3
 4

  ) . click ( function ( ) { JQuery ("# Testone"). кнопку (функция () (
     ) . parent ( ) . prev ( ) . children ( ) . animate ( { 'paddingLeft' : '20px' } , 200 ) ; JQuery (это). родителя (). предыдущая (). детей (). оживить (('paddingLeft': '20px '), 200);
      ; вернуться ложным;
 )); 

Теперь для расширенной версии. Они основаны на JQuery функции фильтра и не очень.
JQuery код "Переместить фильтруется":

  1
 2
 3
 4

 ) . click ( function ( ) { jQuery ( this ) . parent ( ) . prev ( ) . children ( ) . filter ( ".move" ) . not ( ".not" ) . animate ( { 'paddingLeft' : '20px' } , 200 ) ; return false ; } ) ; JQuery ("# testtwo"). кнопку (функция () (JQuery (это). родителя (). предыдущая (). детей (). фильтра (". ход"). нет (". нет"). оживить (( 'paddingLeft': '20px '), 200;) вернуться ложным;)); 

Предложение: кнопка ширина набор jqTransform

Так мило и красивый jqTransform плагин , оно делает мкА, но некоторые небольшие проблемы. В дополнение к различным толкованием ширина текстовых полей в IE и FF, можно также установить ширину стандартной кнопки не владеют набор CSS.

Если вы хотите сделать это и не можете найти соответствующие настройки, которая получила название по небольшой помощью здесь. Поэтому вы jqtransform.css открыто и выбора Z.36 "button.jqTransformButton службы службы" новую ширину собственности назначить.
Это может быть, например, следующим образом:

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

  . JqTransformButton кнопку охватывают промежуток времени (
	 transparent url ( img/btn_left.gif ) no-repeat top left ; справочная информация: URL (IMG / btn_left.gif) нет-повторяю левый верхний прозрачный;
	 #333 ; Цвет: # 333;
	 10px 4px 0px 8px ; обивка: 10px 0px 4px 8px;
	 normal ; начертание шрифта: нормальный;
	 12px ; размер шрифта: 12px;
	 13px ; высота строки: 13px;
	 block ; дисплей: блок;
	 none ; текст-отделка: нет;
	 33px ; высота: 33px;
	 auto ; Ширина: авто;
	 100px ; мин-ширина: 100px;
 ) 

Практика Подсказка - jqTransform ширина ошибке

Кто jqTransform использовали когда-то уже наверняка обнаружили, что Internet Explorer и Firefox браузер, текстовые поля разной ширины дисплея.
Это объясняется тем, что размер атрибутов, даже если не в поле ввода на якоре в IE учитывается.

Мало устранить эту неполадку, размер атрибут в JS код для удаления расчета. Конечно, в результате чего этот атрибут может быть не используется для этой цели. То, что я лично считаю, не так плохо, как с наилучшей практикой является одним из веб-программиста, чтобы определить настройки свойств поверхностей на CSS.

Теперь для обхода проблемы:

  1
 2
 3
 4
 5

  / / Z. 107 в jquery.transform.js
	 $input. attr ( 'size' ) ) { если ($ ввода. айг ('размер')) (
		 ( 'size' ) * 10 ; InputSize = $ ввода. айг ('размер') * 10;
		 'width' , inputSize ) ; $ Входа. Css ('Ширина' InputSize);
	 ) 

Этот фрагмент кода вы можете удалить его, потому что это приводит к неправильным расчетом ширина текстовых полях. Я не мог обнаружить какой-либо нежелательных побочных эффектов. Если вы найдете что-то, я был бы признателен за комментарии.

Praxistip - jqTransform и дисплея: нет

Если кто-то пытался один раз уже с jqTransform поле формы в одном: ни один набор отображения HTML элемента для отображения трансформируются и он, вероятно, могут возникнуть проблемы.
Это может быть немного обойти без изменения JS в оригинале, легко исправить.

Во-первых, дисплей свойством снова видимой

  1
 2
 3
 4
 5
 6

  <form action="some.php" id="myForm" method="post">
   <div style="display:block" id="status">
      <input value="content" />
   </> Div
 </> Формы
 </> Div 

Если свойство CSS дисплей установлен ни один, это было бы jqTransform fehlenhaften для отображения встроенных в свинце. Чтобы просмотреть этот товар сейчас по-прежнему не можем просто добавить следующий фрагмент кода в "Документ не готов" событие JQuery

  1
 2
 3
 4
 5
 6

  "text/javascript" > <SCRIPT Типа = "text / javascript">
 . ready ( function ( $ ) { JQuery (документ). готовых (функция ($) (
      / / Часть кода ...

      ) . hide ( 'fast' ) ; JQuery ('# статус'). скрыть ('быстрый');
  )); 

Принцип может быть связано с JQuery селекторов, конечно, также применяется к нескольким пунктам.

IxEdit - JQuery легкий путь

С IxEdit можно JQuery JS функции без программирования прямо на лету в браузере требуемую zuzuweißen элементов HTML. Вместо того, много других слов демо-видео:

Если вы хотите попробовать, как это работает:

Первый Во-первых, необходимые файлы с IxEdit IxEdit Скачать

Вторая Google Gears, Firefox Addon Портативный Google Gears установки и перезагрузки браузера

Третий В распакованные папки, которые требуют IxEdit index.html

Теперь вы можете с существующими HTML элементов в соответствии с пожеланиями zuweißen JQuery событий. Этот инструмент идеально подходит для экспериментов с различными эффектами и в целом более полное представление о возможностях JQuery для того, чтобы обеспечить себя.

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

Easy "или"!?

Praxistip выходного элемента JQuery плагин Проверка: Изменения

Известно JQuery плагин для проверки полей формы для работы в стандарте Szenarion Sogut как легко.

Труднее даже, когда несколько плагинов формы для которых их собственные плагины добавить DOM элементов. Например, jqTransform

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

  1
 2
 3

  ( error , element ) { Размещение ошибка: функция (ошибка, элемент) (
      element. TRAVERSINGFUNKTION ) ; ошибки. appendTo (element. TRAVERSINGFUNKTION);
    ), 

Возьмем форму:

  1
 2
 3
 4
 5
 6
 7

  <form action="somescript.php" id="form" method="get">
    <input name="user">
    <label> <label> 
    <input name="pw">
    <label> <label>
 </> Формы
  <div id="error"> </> Div 

По умолчанию, модуль проверки ярлык тег вставляется после каждого поля ввода. Теперь, если вы хотите ошибки в другое тело, чтобы показать вам можно переписать функцию следующим образом:

  1
 2
 3
 4
 5

 ) . validate ( { errorPlacement : function ( error , element ) { error. appendTo ( element. next ( ) ) ; } } ) ; $ ("# Форма"). Проверка ((ошибка размещения: функция (ошибка, элемент) (error. AppendTo (element. следующий ());))); 

Сообщения об ошибках, теперь основанной ввода (элемент) в следующий элемент DOM, в нашем случае, этикетки теги, которые пишутся.
Конечно, у нас с этим примером, достигается лишь после выхода ответ плагина. Этот принцип может легко быть применены в более сложных приложений. Как jqTransform, например, упомянутые на входе в поле несколько DIV-ов заложены. Ошибка плагина Проверка будет показано ниже (на г-плоскости) областях. По Travesi по дереву DOM может быть размещена в любом сообщения об ошибках.

Форма JQuery плагин - Не магические AJAX легко

На другой день я встретил на плагин, который разработчики Самый простой способ дает возможность выполнять свои формы, основанные AJAX.

Это было, совместно разработанный компаниями John Resig , один из основателей JQuery.

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

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20

 script type = "text/javascript" src = "path/to/jquery.js" ></ script > < script type = "text/javascript" src = "path/to/form.js" ></ script > < script type = "text/javascript" > $ ( document ) . ready ( function ( ) { // bind 'myForm' and provide a simple callback function $ ( '#myForm' ) . ajaxForm ( function ( ) { alert ( "Formular wurde gesendet!" ) ; } ) ; } ) ; </ script > </ head > < body > < form id = "myForm" action = "comment.php" method = "post" > Name : < input type = "text" name = "name" /> Kommentar : < textarea name = "kommentar" ></ textarea > < input type = "submit" value = "Abschicken" /> </ form > </ body > <Head> <script Типа = "text / javascript" SRC = "path / к / jquery.js"> </ SCRIPT> <script типа = "text / javascript" SRC = "path / к / form.js"> < / SCRIPT> <script типа = "text / javascript"> $ (Документ) готов (функция () (/ / связать 'MyForm. и обеспечить простую функцию обратного вызова $ (' # MyForm '). Ajax форму (функция () ( оповещение ("Форма была отправлена !");));)) </ скрипт> </> <body> голову <form ID = = "myForm" действий "comment.php" метод "post"> Название =: < ввода типа = "текст" имя = "имя" /> Комментарий: <textarea имя = "comment"> </ текстовой> <input типа = "submit" значение = "submit" /> </ FORM> </> тела 

Этот пример отправляет два поля формы имя и комментарий, как Ajax запрос в форм-теги в указанный скрипт.
Это всего лишь простой пример. Кроме того Есть методы Formularberarbeitung как сброс, представить руководства, подготовка строки запроса и т.д.

Плагин также имеет несколько вариантов. Отрывок из него:

• цель
• URL
• успех
• ...

Ajaxian ветерана, эти параметры должны быть известны. Затем они используются следующим образом:

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11

  / / Вариант для установки атрибутов объекта
 { VAR вариантов = ( 
     , цель: "# divToUpdate ' 
     , URL: 'comment.php' 
     ( ) { успех: функция () ( 
         'Erfolgreich abgeschickt!' ) ; оповещения ('успешно отправлено'); 
     ) 
 ); 

 / / Функции Mehthode простую форму Ajax в качестве параметров
 ) . ajaxForm ( options ) ; $ ('# MyForm'). Ajax форму (варианты); 

Просто может быть трудно реализовать формы Ajax. Столько удовольствия играть. Вы можете найти все это на английском языке документов, а также небольшие примеры, в Malsup .

JQuery Учебник - Закрытие на аккордеоне автоматически

Решающим моментом для осуществления этого являются события. JQuery API предоставляет множество различных мероприятий для регистрации движений мышью.
В нашем примере, мы теперь гарантирует, что после выхода из Отдела Аккордеоны с курсором последних открытых аккордеон закрывается.

Таким образом, первый в структуре HTML

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

 <h2 class="demoHeaders"> Аккордеон </ h2>
 <div id="accordion">
	 <div>
	 <h3> <a href="#"> Первый </ A> </ h3>
		 <div> Lorem Ipsum боль сидят Яиоадоеикточ.  Lorem Ipsum боль сидят Яиоадоеикточ.  Lorem Ipsum боль сидят Яиоадоеикточ. </ DIV>
	            </> Div
	 <div>
		 <h3> <a href="#"> Второй </ A> </ h3>
		 <div> Phasellus Маттис tincidunt nibh. </> Div
	 </> Div
	 <div>
		 <h3> <a href="#"> третьих </ A> </ h3>
		 <div> Нам DUI erat, auctor, dignissim дшз. </> Div
	 </> Div
 </> Div 

Это стандартная структура Accoridons с JQuery интерфейса . CSS взят из JQuery CSS основы пользовательского интерфейса .
Эта тема может быть легко обменять в принципе стандартизированных имен элементов.

Теперь код Javascript. Она включает в себя призыв Аккордеоны и регистрации события мыши.
Мы хотим, чтобы Аккордеон только после небольшой задержки близко, так что использовать в качестве функции setTimout. Если пользователь innhalb на этот раз с курсор перемещается на аккордеоне, тайм-аута должно быть прекращено. Таким образом, мы сохраняем
Тайм-аут объект в JavaScript глобальных переменных (TObj). Функция этого времени, clearTimeout теперь без вызова функции обратного вызова концы преждевременно.

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22

 "text/javascript" > var tObj ; $ ( function ( ) { // simple accordion with special markup $ ( '#accordion' ) . accordion ( { header : 'h3' , active : '.selected' , collapsible : true , autoHeight : false } ) ; $ ( "#accordion" ) . mouseleave ( function ( ) { tObj = setTimeout ( "menu.accordion('activate', active);" , 3000 ) ; } ) ; $ ( "#accordion" ) . mouseenter ( function ( ) { clearTimeout ( tObj ) ; } ) ; } ) ; </ script > <SCRIPT Типа = "text / javascript"> уаг TObj; $ (функция () (/ / простой аккордеон с особыми разметки $ ('# гармошки). Аккордеон ((заголовок: "h3, активный:'. Избранные, складной: верно autoHeight: ложные)), $ ("# аккордеон"). mouseleave (функция () (TObj = setTimeout ("menu.accordion ('включения, режиме работы);", 3000 );)), $ ( "# аккордеон"). mouseenter (функция () (clearTimeout (TObj );));)) </> сценарий 

С Аккордеон, завернутый в Div с идентификатором "аккордеон", это достаточно, чтобы завершить мероприятия также положить эту Div.
Она поддается 2 Mousevents на ссылку с помощью оператора точка. Функциональность остается той же, однако, менее DOM операция выполняется. Что, в частности, петли четко заметны.
Каскадных увидел следующее заявление:

  1
 2
 3
 4
 5

	 ) . mouseleave ( function ( ) { tObj = setTimeout ( "menu.accordion('activate', 'active');" , 3000 ) ; } ) . mouseenter ( function ( ) { clearTimeout ( tObj ) ; } ) ; $ ("# Аккордеон"). Mouseleave (функция () (TObj = setTimeout ("menu.accordion ('включения', 'Активные');", 3000 );)). Mouseenter (функция () (clearTimeout (TObj) ;)); 

Например можно найти на нашем демо-зона .

И уважением к Фабиану Холлстейн за идею ...