4 523 Скрипты / Form

Пользовательское оформление input

Плагин customInput позволит оформить тег input так, как вздумается дизайнеру.

HTML

Пример разметки взят из файла index.html:

CSS

Стили из файла enhanced.css:

JS

Скрипты на странице мы подгружаем с помощью js фреймворка enhance.js, которая сначала проводит тест браузера на поддержку jаvascript и CSS, до того, как будут загружены на страницу дополнительные скрипты и стили:

    <script type="text/jаvascript" src="js/enhance.js"></script>        
	    <script type="text/jаvascript">
	        // Run capabilities test
	        enhance({
	            loadScripts: [
	                'js/jquery.min.js',
	                'js/jQuery.customInput.js',
	                'js/example.js'
	            ],
	            loadStyles: ['css/enhanced.css']    
	        });   
	    </script>

Если тест пройден, то грузим jquery, плагин customInput и скрипт инициализации плагина, затем грузится стиль нашего меню.

Содержимое файла example.js:

$(function(){
	    $('input').customInput();
	    
	    $('.toggle').each(function(){
	        $('div:first',this).addClass('first');
	        $('div:last',this).addClass('last');    
	    }); 
	    
	});
Скачать 968Загрузок 42,35 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи