Zero Weight JavaScript Library
Выбрано: 0 | English

HTML components

Here are presented some UI applications.

html/modalwindow.js

html/modalwindow.js

Modal window can create effects of overlapping content, can be used to show bigger images without leaving current page. Can help with creating various interactive things like add to basket popup windows, floating frames with terms of use, interactive dialog windows and many others applications.

  • Draggable
  • Stays on the screen when page is being scrolled
  • CSS driven, a lot of CSS skins available
  • Nice animation effects
  • SEO friendly

Show all CSS themes

dependencies: base.js, element.js, selector.js, document.js, delayer.js, animation.js
Файлов: 6
file size
modalwindow.js 9.74 KBs
sh_rt.png 225 bytes
sh_rb.png 221 bytes
sh_lb.png 222 bytes
sh_b.png 186 bytes
sh_r.png 213 bytes

html/modalwindow/default

Default graphic theme for modal window

click here to see another themes

кликните здесь чтобы открыть окно

<script type="text/javascript">
var modalwindow2 = null;
z.document.ready(function(){
	var modalwindow1 = z.ModalWindow.id("modalwindow1");
	z("modalwindow1_link").click(function(e){
		e.halt();
		modalwindow1.show();
	})
});
</script>

<div id="modalwindow1" style="display: none">
<h5>Title of Window</h5>
<br />
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry\'s standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.</div>
<p><a href="#" id="modalwindow1_link">кликните здесь чтобы открыть окно</a>
</p>
dependencies: html/modalwindow.js
Файлов: 3
file size
modalwindow.css 298 bytes
default.css 836 bytes
close.png 256 bytes

html/colorpicker.js

The color picker can select color using simple RGB representation
 
<div style="float:left;margin-right:2em;"><div id="colorpicker"></div></div>
<input type="text" value="select color" id="cp_value">
<script type="text/javascript">
z.document.ready(function(){
	
	var cp = z.ColorPicker.id('colorpicker');
	
	cp.on('change',function(){
		z('cp_value').p('value',cp.color_rgb);
	})
});
</script>

<div style="clear:both;">&nbsp;</div>
dependencies: base.js, element.js, document.js, html/hints.js
Файлов: 7
file size
mask.png 526 bytes
spectr.png 165 bytes
spacer.gif 43 bytes
arrow.gif 75 bytes
circle_b.gif 69 bytes
circle_w.gif 69 bytes
colorpicker.js 8.05 KBs

controls/scrollbar.js

Verticall scrollbar can be used for creating scrollable elements such as pages with custom scrollbars, scrollable page areas, scrollabe lists,custom controls that using scrollbars. Inspite of standard scrollbar our custom scrollbar is fully css customizable.
dependencies: base.js, element.js, event.js, controls/base.js, selector.js, delayer.js, document.js
Файлов: 2
file size
scrollbar.js 5.29 KBs
spacer.gif 43 bytes

controls/scrollbar/default

Default graphich theme for scrollbar

See other themes

<div
	style="height: 150px; width: 50px; border: 1px solid gray; position: relative;">

<div class="basic_scrollbar"></div>
</div>
<script type="text/javascript">
z.document.ready(function(){
	z.document.select({'_t':'div','_c':'basic_scrollbar'},null,z.controls.ScrollBar);
});
</script>
dependencies: controls/scrollbar.js
Файлов: 2
file size
default.css 1.84 KBs
vscroller.gif 1.82 KBs

html/calendar.js

html/calendar.js

Object calendar can be used to display date on calendar. There posibility to display current and selected date, month navigation.

Look of the calendar can be tuned using css

Year:

Month:

Day:

 
<div style="float: left; margin-right: 2em;">
<div id="calendar"></div>
</div>
Year:
<br />
<input type="text" value=""
	id="c_year">
<br />
Month:
<br />
<input type="text" value=""
	id="c_month">
<br />
Day:
<br />
<input type="text" value=""
	id="c_day">
<br />
<script type="text/javascript">
z.document.ready(function(){
	var co = z.Calendar.id('calendar');
	co.on('change',function(){
		z('c_year').p('value',co.year);
		z('c_month').p('value',co.month);
		z('c_day').p('value',co.day);
	})
});
</script>

<div style="clear: both;">&nbsp;</div>
dependencies: base.js, element.js, document.js, html/hints.js
Файлов: 3
file size
calendar.css 833 bytes
calendar.js 9.98 KBs
b_calendar.png 308 bytes

html/calendarhint.js

html/calendarhint.js

This element can be useful to select date clicking to the calendar icon.

 
<div>
<input id="edit_calendar" type="text" value="" name="sfrom" style="width: 100px;"/>
<img id="img_calendar" alt="" src="/images/admin/b_calendar.png"/>

</div>

<script type="text/javascript">
z.document.ready(function(){

function leadzero(d){
	if (d<10) return "0"+d;
	return d;
}

var c1 = new z.CalendarHint({'tag':'DIV','trigger':'img_calendar','onselect':function(value){
	z('edit_calendar').p('value',leadzero(value.getDate()+'/'+leadzero(value.getMonth()+1)+'/'+(value.getYear()+1900)));
}});


});               
</script>

<div style="clear:both;">&nbsp;</div>
dependencies: base.js, element.js, document.js, html/hints.js, html/calendar.js
Файлов: 2
file size
calendarhint.js 1.81 KBs
b_calendar.png 308 bytes

html/contextmenu.js

right click here

<script type="text/javascript">
<!--
        var menu = new z.ContextMenu();
        menu.addItem('Select chat room',function(el){alert('chat to be displayed!')});
        menu.addItem('Create new chat room',function(el){alert('new chant room!')},'/images/ok_pic.png');
        menu.addSeparator();
        menu.addItem('Leave chat room',function(el){alert('chat to be displayed!')});
        
        z.document.ready(function(){
			menu.initMenu(z('cm_item1').dom);
			z('cm_item1').click(function(e){e.halt;alert('Right click please!');})
		})
-->
</script>
<p><a id="cm_item1" href="#">right click here</a></p>
dependencies: base.js, element.js, document.js
Файлов: 3
file size
contextmenu.css 628 bytes
contextmenu.js 4.08 KBs
cm_separator.gif 52 bytes

controls/tabset.js

dependencies: base.js, element.js, selector.js, document.js
Файлов: 1
file size
tabset.js 1.95 KBs

controls/tabset/default

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
<div class="default_tabset">
<ul class="tabs">
	<li class="current">
	<h4><a href="#default_tabset_tab1">Tab #1</a></h4>
	</li>
	<li>
	<h4><a href="#default_tabset_tab2">Tab #2</a></h4>
	</li>
	<li>
	<h4><a href="#default_tabset_tab3">Tab #3</a></h4>
	</li>
</ul>
<div class="panel current"><a name="default_tabset_tab1"></a> Lorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem
Ipsum.</div>
<div class="panel"><a name="default_tabset_tab2"></a> Sed ut
perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?</div>
<div class="panel"><a name="default_tabset_tab3"></a> At vero eos et
accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et quas molestias
excepturi sint occaecati cupiditate non provident, similique sunt in
culpa qui officia deserunt mollitia animi, id est laborum et dolorum
fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam
libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
quo minus id quod maxime placeat facere possimus, omnis voluptas
assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et
aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
voluptates repudiandae sint et molestiae non recusandae. Itaque earum
rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
maiores alias consequatur aut perferendis doloribus asperiores repellat.
</div>
</div>
<script type="text/javascript">
 z.Tabset.createByClass('default_tabset');
</script>
dependencies: controls/tabset.js
Файлов: 2
file size
default.css 1.96 KBs
tabs.gif 1.16 KBs

html/tip.js

tip
this is hidden text
<a href="#tip" class="tip">tip</a>
<div class="nodisplay"><a name="tip"></a>this is hidden text</div>

<script type="text/javascript">
z.document.ready(function(){
	z.HintLink.select({'className':'tip','_t':'a'});
});
</script>
dependencies: document.js, html/hints.js
Файлов: 1
file size
tip.js 1.78 KBs

html/tooltip.js

всплывающие подсказки.

click here

<p>всплывающие подсказки.</p>
<p><a href="#"
	onmouseover="z.Tooltip.show(this,{Title:'Title of Window','text':'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'})">click
here</a></p>
dependencies: base.js, element.js, animation.js, document.js
Файлов: 8
file size
tooltip.css 724 bytes
tooltip.js 18.3 KBs
close.png 256 bytes
sh_rt.png 225 bytes
sh_rb.png 221 bytes
sh_lb.png 222 bytes
sh_b.png 186 bytes
sh_r.png 213 bytes

html/collapser.js

This is very simple component which can be used to hide/show part of content on the webpage. The content is being collapsed/expanded clicking on +/- sign on top of the header.
  • view is completely customised by CSS
  • can be used together with AJAX
  • SEO friendly;

[+]Click here to expand this box

<div class="collapser">
<h1><a href="#" class="collapse">[+]</a>Click here to expand this box</h1>
<div class="collapsable collapsed">
<div style="padding:1em;">
<p>We where sitting on a bench in the park of a small town in the mountainous area of central Mexico. I had absolutely no way of letting him know about my intention of paying him a visit, but I was certain I was going to find him, and I did. I waited only a short while in that town before don Juan came down from the mountains and I found him at the market, at the stand of one of his friends.</p>
<p>Don Juan told me, matter-of-factly, that I was there just in time to take him back to Sonora, and we sat in the
park to wait for a friend of his, a Mazatec Indian with whom he lived.</p>
<p>We waited about three hours. We talked about different unimportant things, and toward the end of the day,
right before his friend came, I related to him some events I had witnessed a few days before.</p>

<p>During my trip to see him my car broke down in the outskirts of a city and I had to stay in town for three days while it was being repaired. There was a motel across the street from the auto shop, but the outskirts of towns are always depressing for me, so I took lodgings in a modern eight-story hotel in the center of town.</p>

<p>The bellboy told me that the hotel had a restaurant, and when I came down to eat I found that there were
tables out on the sidewalk. It was a rather handsome arrangement set on the street corner under some low brick
arches of modern lines. It was cool outside and there were empty tables, yet I preferred to sit in the stuffy
indoors. I had noticed upon entering that a group of shoeshine boys were sitting on the curb in front of the
restaurant, and I was certain they would have hounded me had I taken one of the outside tables.</p>

<p>From where I was seated I could see the group of boys through the glass window. A couple of young men took a table and the boys flocked around them, asking to shine their shoes. The young men refused and I was amazed to see that the boys did not insist and went back to sit on the curb. After a while three men in business suits got up and left and the boys ran to their table and began eating the leftovers; in a matter of seconds the plates were clean. The same thing happened with leftovers on all the other tables.</p> 
<p style="text-align:right;"><i>Carlos Castaneda, Separate Reality</i></p>
</div>
</div>
</div>
<script type="text/javascript">
z.document.ready(function(){
    z.Collapser.select({_t:'div',_c:'collapser'});
});
</script>
  
dependencies: base.js, element.js, selector.js, event.js, animation.js, effects.js, document.js
Файлов: 2
file size
collapser.css 379 bytes
collapser.js 771 bytes