richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update examples, update transition error

pull/2300/head
jlukic 10 years ago
parent
1e18d4f26f
commit
739bf5e79c
5 changed files with 76 additions and 26 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      dist/semantic.js
  2. 2
      dist/semantic.min.js
  3. 35
      examples/basic.html
  4. 53
      examples/sticky-menu.html
  5. 2
      src/definitions/modules/transition.js

10
dist/semantic.js
View File

@ -18947,6 +18947,7 @@ $.fn.visibility = function(parameters) {
module.verbose('Setting up fixed on element pass');
settings.once = false;
settings.onTopPassed = function() {
console.log('here');
$module
.addClass(className.fixed)
.css({
@ -18960,6 +18961,7 @@ $.fn.visibility = function(parameters) {
}
};
settings.onTopPassedReverse = function() {
console.log('there');
$module
.removeClass(className.fixed)
.css({
@ -19730,8 +19732,8 @@ $.fn.visibility = function(parameters) {
if(instance === undefined) {
module.initialize();
}
instance.save.scroll();
instance.save.calculations();
//instance.save.scroll();
//instance.save.calculations();
module.invoke(query);
}
else {
@ -19754,8 +19756,8 @@ $.fn.visibility.settings = {
name : 'Visibility',
namespace : 'visibility',
debug : false,
verbose : false,
debug : true,
verbose : true,
performance : true,
// whether to use mutation observers to follow changes

2
dist/semantic.min.js
File diff suppressed because it is too large
View File

35
examples/basic.html
View File

@ -33,11 +33,21 @@
<div class="row">
<div class="column">
<h1 class="ui header">Buttons</h1>
<a class="ui button">Default</a>
<a class="ui primary button">Primary</a>
<a class="ui basic button">Basic</a>
<a class="ui positive button">Success</a>
<a class="ui negative button">Error</a>
<a class="ui button" tabindex="0">
Default
</a>
<a class="ui primary button" tabindex="0">
Primary
</a>
<a class="ui basic button" tabindex="0">
Basic
</a>
<a class="ui positive button" tabindex="0">
Success
</a>
<a class="ui negative button" tabindex="0">
Error
</a>
</div>
</div>
<div class="row">
@ -51,13 +61,13 @@
<div class="column">
<h1 class="ui header">Dropdown</h1>
<div class="ui divider"></div>
<div class="ui selection dropdown">Dropdown
<div class="ui selection dropdown">
<input type="hidden" name="selection">
<i class="dropdown icon"></i>
<div class="default text">Select</div>
<div class="menu">
<div class="item active">Action</div>
<div class="item">Another action</div>
<div class="item">Something else here</div>
<div class="item">One more link</div>
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
<div class="ui vertical menu">
@ -420,7 +430,10 @@
<script>
$(document)
.ready(function() {
$('.ui.dropdown').dropdown();
$('.ui.selection.dropdown').dropdown();
$('.ui.menu .dropdown').dropdown({
on: 'hover'
});
})
;
</script>

53
examples/sticky-menu.html
View File

@ -23,6 +23,10 @@
<link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
<link rel="stylesheet" type="text/css" href="../dist/components/dropdown.css">
<link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
<link rel="stylesheet" type="text/css" href="../dist/components/transition.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="../dist/semantic.js"></script>
<style type="text/css">
body {
@ -32,7 +36,7 @@
margin-right: 1.5em;
}
.main.container {
margin-top: 7em;
margin-top: 2em;
}
.wireframe {
margin-top: 2em;
@ -41,19 +45,41 @@
margin: 5em 0em 0em;
padding: 5em 0em;
}
.main.menu {
margin-top: 4em;
border-radius: 0;
border: none;
box-shadow: none;
transition:
box-shadow 0.5s ease
;
}
.main.menu.fixed {
border: 1px solid #DDD;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}
.main.menu.fixed + .container {
margin-top: 60px;
}
</style>
</head>
<body>
<div class="ui fixed inverted menu">
<div class="ui container">
<div class="ui main text container">
<h1 class="ui header">Semantic UI Fixed Template</h1>
<p>This is a basic fixed menu template using fixed size containers.</p>
<p>A text container is used for the main container, which is useful for single column layouts</p>
</div>
<div class="ui main menu">
<div class="ui text container">
<div href="#" class="header item">
<img class="logo" src="images/logo.png">
Project Name
</div>
<a href="#" class="item">Home</a>
<a href="#" class="ui simple dropdown item">
<a href="#" class="ui dropdown item">
Dropdown <i class="dropdown icon"></i>
<div class="menu">
<div class="item">Link Item</div>
@ -74,10 +100,7 @@
</div>
</div>
<div class="ui main text container">
<h1 class="ui header">Semantic UI Fixed Template</h1>
<p>This is a basic fixed menu template using fixed size containers.</p>
<p>A text container is used for the main container, which is useful for single column layouts</p>
<div class="ui text container">
<img class="wireframe" src="images/wireframe/media-paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
<img class="wireframe" src="images/wireframe/paragraph.png">
@ -132,6 +155,18 @@
</div>
</div>
</div>
<script>
$(document)
.ready(function() {
$('.main.menu').visibility({
type: 'fixed'
});
$('.main.menu .ui.dropdown').dropdown({
on: 'hover'
});
})
;
</script>
</body>
</html>

2
src/definitions/modules/transition.js
View File

@ -1002,7 +1002,7 @@ $.fn.transition.settings = {
// possible errors
error: {
noAnimation : 'There is no css animation matching the one you specified.',
noAnimation : 'There is no css animation matching the one you specified. Please make sure your css is vendor prefixed, and you have included transition css.',
repeated : 'That animation is already occurring, cancelling repeated animation',
method : 'The method you called is not defined',
support : 'This browser does not support CSS animations'

Write Preview
Loading…
Cancel
Save