Где тут кнопка? Я ничего не вижу! Фреймворки на темной стороне силы. Часть 002

Главные вкладки

Аватар пользователя Матвей
Опубликовано 25 февраля, 2014 - 15:44 пользователем Матвей
jQuery button



Как запилить штрих-код я уже разобрался. Теперь поехали дальше.
jQuery UI — библиотека JavaScript с открытым исходным кодом для создания насыщенного пользовательского интерфейса в веб-приложениях, часть проекта jQuery. Построена поверх главной библиотеки jQuery и предоставляет разработчику упрощенный доступ к её функциям взаимодействия, анимации и эффектов, а также набор виджетов. (с) Википедия

Этот насыщенный пользовательский интерфейс нам и нужен! Начнем с кнопок:

<head>
<HTA:APPLICATION 
		ID="ui">
    <title>jQuery UI functionality</title>
    <link rel="stylesheet" href="jquery-ui.css" />
    <script src="jquery-1.9.1.js"></script>
    <script src="jquery-ui.custom.js"></script>
    <script>
	window.resizeTo (600,400);
    window.moveTo (screen.width/2-480/2, screen.height/2-550/2);
$(function() {	
		$("button").button();
		$("button").click(function(){
privet();
		});
	$("button").button( "option", "icons", {primary:"ui-icon-transferthick-e-w", secondary:"null"} );
 });
  </script>	
</head>
<body>
<div style="position: absolute; width: 70%; height: 50%; z-index: 2; left: 100px; top: 100px;" >
<p><button class="ui-state-default ui-corner-all" style="width:400px">Кнопка на jQuery</button></p>
</div>
</body>
<SCRIPT LANGUAGE="VBScript">
function privet()
msgbox "Привет"
end function
</script>
</html>

Нажимаем на кнопку: выполняется privet(). Причем Выполнятся может код как на VBscript, так и на JScript. В примере используется jquery-1.9.1.js и jquery-ui.custom.js не самые новые файлы, но и не важно. Кнопка получается с картинкой, картинка указана в CSS файле и соответствует классу ui-icon-transferthick-e-w. Там еще много разных картинок, есть простор для творчества.
Размеры кнопки регулируются классами: button.wight и button.hight
На сайте http://jqueryui.com/themeroller/ можно сделать и скачать свою схему оформления.

Если хотите поддержку 10 IE в приложении HTA, добавьте в 2-ю строку такой текст:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10"/>

Если этого не сделать то никаких CSS 3.0 в приложениях HTA нет и впомине, поэтом копки получаются квадратные. Зато эдакий METRO style.

Asics Gel Cumulus Mens Sale, Asics Gel Cumulus 20 Mens Sale Asics Gel Cumulus Mens Sale, Asics Gel Cumulus 20 Mens Sale, ASICS® Gel-Cumulus 21 - Men's Midnight/Midnight



New Balance 577 Red Black, New Balance 577 Womens Black New Balance 577 Red Black, New Balance 577 Womens Black, New Balance 577 Hook & Loop - Men's Black

Tags: