is my favorite framework for developing interactive web pages, in addition to having tools in your web exelentes in this post I will show you how to use JQuery UI which can be customized from this site http://jqueryui.com/themeroller/ .
Step 1. Configure your theme on the options that are on the tabs and then click to download theme.
then display a page like this den click download, select all options.
Unzip named jquery-ui-1.8.2.custom, have the following.
Step 2. Create an html file called test.html and another inside the css folder is called
prueba.css
test.html Code:
\u0026lt;! DOCTYPE html>
\u0026lt;html> ; \u0026lt;head>
\u0026lt;meta http-equiv = "Content-Type" content = "text / html; charset = iso-8859-1" / >
jQuery UI \u0026lt;title> Example Page \u0026lt;/ title>
\u0026lt;link type = "text / css" href = "css / le-frog / jquery-ui-1.8.2.custom.css "rel =" stylesheet "/>
\u0026lt;link type =" text / css "href = "css / prueba.css" rel = "stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
</head>
<body>
<div id="ui_contededor" class="ui-widget">
<div id="ui_1" class="ui_1">
<h3 class="ui-widget-header ui-corner-all">Widget</h3>
<div class="ui-widget-content ui-corner-top">
<a>Prueba</a>
</div>
</div>
<div id="espacio" class="espacio"></div>
<div id="ui_2" class="ui_2">
<h3 class="ui-widget-header ui-corner-all">Widget</h3>
<div class="ui-widget-content ui-corner-top">
<a>Prueba</a>
</div>
</div>
</div>
</body>
</html>
prueba.css Code body {font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.
space {padding: 4px;
width: 1%;
margin-left: 2px;
float: left;}
. ui_1
{float: left;
width: 400px;}
. ui_2
{float: left;
width: 400px;}
out:
In this example we create two widgets by two fashion div how this is accomplished is through the css, example: to set the following header
\u0026lt;h3 deal class="ui-widget-header ui-corner-all"> Widget \u0026lt;/ h3>
and the content: \u0026lt;div
class="ui-widget-content ui-corner-top">
But we can start playing with some jquery css are: Widget
Containers. ui widget: Create a container Widgets (CSS Styling)
. ui-widget-header : Create a header of a widget (CSS Styling)
. ui-widget-content: Apply Styles al contenido del widget
Misc Visuals
Corner Radius helpers (Estilos de bordes)
- .ui-corner-tl: Applies corner-radius to top left corner of element.
- .ui-corner-tr: Applies corner-radius to top right corner of element.
- .ui-corner-bl: Applies corner-radius to bottom left corner of element.
- .ui-corner-br: Applies corner-radius to bottom right corner of element.
- .ui-corner-top: Applies corner-radius to both top corners of element.
- .ui-corner-bottom: Applies Both corner-radius to bottom corners of element.
- . Ui-corner-right: corner-radius Applies to Both right corners of element.
- . Ui-corner-left: corner-radius Applies to Both left corners of element.
- . Ui-corner-all: corner-radius Applies to all 4 corners of element.
In our example the content only has rounded edge on top, but if we have only the right side, just a matter of occupying the style for example:
\u0026lt;div id = "ui_1" class = "ui_1">
\u0026lt;h3 class="ui-widget-header ui-corner-right"> Widget \u0026lt;/ h3>
\u0026lt;div class = "ui-ui widget-content-corner-top" >
\u0026lt;a> Prueba \u0026lt;/ a>
\u0026lt;a> Prueba \u0026lt;/ a>
; \u0026lt;/ div>
\u0026lt;/ div>
With the new header style has rounded edges just right, it's easy and fast.
0 comments:
Post a Comment