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

Solidfying format of usage/settings tabs of module. Beginning verification all settings objects and behavior lists are up to date

pull/1139/merge
jlukic 10 years ago
parent
cbf8d76265
commit
983169980f
6 changed files with 165 additions and 115 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 49
      server/documents/collections/table.html.eco
  2. 182
      server/documents/modules/accordion.html.eco
  3. 4
      server/documents/modules/checkbox.html.eco
  4. 3
      server/documents/modules/modal.html.eco
  5. 40
      server/files/stylesheets/semantic.css
  6. 2
      src/definitions/modules/modal.js

49
server/documents/collections/table.html.eco
View File

@ -9,7 +9,7 @@ title : 'Table'
description : 'A table displays a collections of data grouped into rows'
type : 'UI Collection'
themes : ['Default']
themes : ['Default', 'Classic']
---
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/collections/table.less" />
@ -71,6 +71,30 @@ themes : ['Default']
</table>
</div>
<div class="example">
<h4 class="ui header">Definition</h4>
<p>A table may be formatted to emphasize a first column that defines a rows content</p>
<table class="ui definition table">
<thead>
<th></th>
<th>Arguments</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>reset rating</td>
<td>None</td>
<td>Resets rating to default value</td>
</tr>
<tr>
<td>set rating</td>
<td>rating (integer)</td>
<td>Sets the current star rating to specified value</td>
</tr>
</table>
</div>
<h2 class="ui dividing header">States</h2>
<div class="example">
@ -604,29 +628,6 @@ themes : ['Default']
</table>
</div>
<div class="example">
<h4 class="ui header">Definition</h4>
<p>A table may be formatted specifically to provide definitions</p>
<table class="ui definition table">
<thead>
<th>Behavior</th>
<th>Arguments</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>reset rating</td>
<td>None</td>
<td>Resets rating to default value</td>
</tr>
<tr>
<td>set rating</td>
<td>rating (integer)</td>
<td>Sets the current star rating to specified value</td>
</tr>
</table>
</div>
<div class="example">
<h4 class="ui header">Sortable</h4>
<p>A table may allow a user to sort contents by clicking on a table header.</p>

182
server/documents/modules/accordion.html.eco
View File

@ -115,7 +115,7 @@ themes : ['Default', 'Chubby']
<h2 class="ui dividing header">Examples</h2>
<div class="example">
<h3 class="ui header">Nested</h3>
<h4 class="ui header">Nested</h4>
<p>An accordion can have multiple levels of nested content. This content can either be in a nested <code>accordion</code> or simply another level of <code>title</code> and <code>content</code></p>
<div class="ui styled accordion">
<div class="active title">
@ -123,7 +123,7 @@ themes : ['Default', 'Chubby']
Level 1
</div>
<div class="active content">
Welcome to level 1 where sub content formatted as its own accordion.
Welcome to level 1
<div class="accordion">
<div class="active title">
<i class="dropdown icon"></i>
@ -169,48 +169,52 @@ themes : ['Default', 'Chubby']
Level 2
</div>
<div class="content">
<p>Welcome to level 2 where content is formatted without nested accordions</p>
<div class="active title">
<i class="dropdown icon"></i>
Level 2A
</div>
<div class="active content">
<p>Level 2A Contents</p>
<p>Welcome to level 2</p>
<div class="accordion">
<div class="active title">
<i class="dropdown icon"></i>
Level 2A
</div>
<div class="active content">
<p>Level 2A Contents</p>
<div class="accordion">
<div class="title">
<i class="dropdown icon"></i>
Level 2A-A
</div>
<div class="content">
Level 2A-A Contents
</div>
<div class="title">
<i class="dropdown icon"></i>
Level 2A-B
</div>
<div class="content">
Level 2A-B Contents
</div>
</div>
</div>
<div class="title">
<i class="dropdown icon"></i>
Level 2A-A
Level 2B
</div>
<div class="content">
Level 2A-A Contents
Level 2B Contents
</div>
<div class="title">
<i class="dropdown icon"></i>
Level 2A-B
Level 2C
</div>
<div class="content">
Level 2A-B Contents
Level 2C Contents
</div>
</div>
<div class="title">
<i class="dropdown icon"></i>
Level 2B
</div>
<div class="content">
Level 2B Contents
</div>
<div class="title">
<i class="dropdown icon"></i>
Level 2C
</div>
<div class="content">
Level 2C Contents
</div>
</div>
</div>
</div>
<div class="example">
<h3 class="ui header">Form</h3>
<h4 class="ui header">Form</h4>
<p>An accordion can be used anywhere where content can be shown or hidden. For example, to show optional form fields.</p>
<div class="ui segment">
<div class="ui fluid form">
@ -239,7 +243,7 @@ themes : ['Default', 'Chubby']
</div>
</div>
<div class="example">
<h3 class="ui header">Menu</h3>
<h4 class="ui header">Menu</h4>
<p>An accordion can be used to create content drawers inside a menu</p>
<div class="ui vertical accordion menu">
<div class="item">
@ -320,11 +324,25 @@ themes : ['Default', 'Chubby']
<div class="ui tab" data-tab="usage">
<h2 class="ui dividing header">Initializing</h2>
<h3 class="ui header">Initializing an accordion</h3>
<div class="test code">
$('.ui.accordion')
.accordion()
;
<div class="no example">
<h4 class="ui header">Initializing an accordion</h4>
<p>Accordion is initialized on pre-existing markup</p>
<div class="test code">
$('.ui.accordion')
.accordion()
;
</div>
</div>
<div class="no example">
<h4 class="ui header">AJAX Content</h4>
<p>Accordions use <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" target="_blank">DOM Mutation Observers</a> and delegated events to allow for easy compataibility with AJAX content, or content added after initialization.</p>
<p>If the DOM tree changes the module will automatically call <code>module.refresh</code> and update the selector cache. Because events are bound on the parent module using delegated events, events will automatically fire on content added after initialization.</p>
<p>If you change other attributes of the module without DOM insertion and need to update the cache you can do so by calling this module's <code>refresh</code> behavior.
<div class="code" data-type="javascript">
$('.ui.accordion').accordion('refresh');
</div>
</div>
<h2 class="ui dividing header">Behaviors</h2>
@ -334,11 +352,15 @@ themes : ['Default', 'Chubby']
$('.ui.accordion').accordion('behavior', argumentOne, argumentTwo...);
</div>
<table class="ui definition celled table segment">
<table class="ui definition celled table">
<tr>
<td>open (index)</td>
<td>Opens accordion content at index</td>
</tr>
<tr>
<td>close others</td>
<td>Closes accordion content that are not active</td>
</tr>
<tr>
<td>close (index)</td>
<td>Closes accordion content at index</td>
@ -352,27 +374,34 @@ themes : ['Default', 'Chubby']
</div>
<div class="ui tab" data-tab="settings">
<h2 class="ui dividing header">
Accordion
</h2>
<h3 class="ui header">
Accordion Settings
<div class="sub header">Accordion settings modify its behavior</div>
</h3>
<table class="ui sortable celled definition table segment">
<h4 class="ui header">
Behavior
</h4>
<table class="ui basic sortable celled definition table">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
<th class="three wide">Setting</th>
<th class="three wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>exclusive</td>
<td>true</td>
<td>Set to false to allow multiple sections to be open at the same time</td>
<td>Only allow one section open at a time</td>
</tr>
<tr>
<td>close nested</td>
<td>true</td>
<td>Allow active sections to collapse</td>
</tr>
<tr>
<td>collapsible</td>
<td>true</td>
<td>Set to false to require an accordion to always have a section open</td>
<td>Allow active sections to collapse</td>
</tr>
<tr>
<td>duration</td>
@ -382,20 +411,19 @@ themes : ['Default', 'Chubby']
<tr>
<td>easing</td>
<td>easeInOutQuint</td>
<td>EaseInOutQuint is included with accordion, for additional options consider <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery easing</a>)</td>
<td>Easing of opening animation. EaseInOutQuint is included with accordion, for additional options you must include <a href="http://gsgd.co.uk/sandbox/jquery/easing/">easing equations</a>.</td>
</tr>
</tbody>
</table>
<h3 class="ui header">
<h4 class="ui header">
Callbacks
<div class="sub header">Callbacks specify a function to occur after a specific behavior.</div>
</h3>
</h4>
<table class="ui sortable celled definition table segment">
<table class="ui basic sortable celled definition table">
<thead>
<th class="four wide">Setting</th>
<th>Context</th>
<th class="three wide">Setting</th>
<th class="three wide">Context</th>
<th>Description</th>
</thead>
<tbody>
@ -417,11 +445,16 @@ themes : ['Default', 'Chubby']
</tbody>
</table>
<h3 class="ui header">
DOM Settings
<div class="sub header">DOM settings specify how this module should interface with the DOM</div>
</h3>
<table class="ui sortable celled definition table segment">
<h2 class="ui dividing header">
Module
</h2>
<p>These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.</p>
<h4 class="ui header">
DOM
</h4>
<table class="ui basic sortable celled definition table">
<thead>
<th>Setting</th>
<th class="six wide">Default</th>
@ -437,13 +470,14 @@ themes : ['Default', 'Chubby']
<td>selector</td>
<td>
<div class="code" data-type="css">
{
title : '.title',
content : '.content'
selector : {
accordion : '.accordion',
title : '.title',
content : '.content'
}
</div>
</td>
<td>Object containing selectors used by module.</td>
<td>Selectors used to find parts of a module</td>
</tr>
<tr>
<td>className</td>
@ -454,17 +488,16 @@ themes : ['Default', 'Chubby']
}
</div>
</td>
<td>Class names used to attach style to state</td>
<td>Class names used to determine element state</td>
</tr>
</tbody>
</table>
<h3 class="ui header">
Debug Settings
<div class="sub header">Debug settings controls debug output to the console</div>
</h3>
<h4 class="ui header">
Debug
</h4>
<table class="ui sortable celled definition table segment">
<table class="ui basic sortable celled definition table">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
@ -474,30 +507,29 @@ themes : ['Default', 'Chubby']
<tr>
<td>name</td>
<td>Accordion</td>
<td>Name used in debug logs</td>
<td>Name used in log statements</td>
</tr>
<tr>
<td>debug</td>
<td>True</td>
<td>Provides standard debug output to console</td>
<td>true</td>
<td>Debug output to console</td>
</tr>
<tr>
<td>performance</td>
<td>True</td>
<td>Provides standard debug output to console</td>
<td>true</td>
<td>Show <code>console.table</code> output with performance metrics</td>
</tr>
<tr>
<td>verbose</td>
<td>True</td>
<td>Provides ancillary debug output to console</td>
<td>true</td>
<td>Debug output includes all internal behaviors</td>
</tr>
<tr>
<td>errors</td>
<td colspan="2">
<div class="code">
error : {
method : 'The method you called is not defined.',
notFound : 'There were no elements that matched the specified selector'
method : 'The method you called is not defined.'
}
</div>
</td>

4
server/documents/modules/checkbox.html.eco
View File

@ -89,7 +89,7 @@ themes : ['Default']
<div class="ui tab" data-tab="usage">
<h3 class="ui header">Check Box</h3>
<h3 class="ui header">Checkbox</h3>
<p>A checkbox can be initialized with javascript for increase programmatic control</p>
<div class="code">
@ -104,7 +104,7 @@ themes : ['Default']
</div>
</div>
<h3 class="ui header">Check Box without Javascript</h3>
<h3 class="ui header">Checkbox without Javascript</h3>
<p>A checkbox can also be used without using javascript by matching the <code>id</code> attribute of the input field to the <code>for</code> attribute of the accompanying label</p>
<div class="code" data-type="html">
<div class="ui checkbox">

3
server/documents/modules/modal.html.eco
View File

@ -303,9 +303,10 @@ themes : ['Default', 'Fixed-width']
</div>
<div class="ui clearing divider"></div>
<div class="code">
$('.selection')
$('.selection.dropdown')
.dropdown({
onChange: function(value) {
alert($('.standard.test.modal').size());
$('.standard.test.modal')
.modal('setting', 'transition', value)
.modal('show')

40
server/files/stylesheets/semantic.css
View File

@ -94,6 +94,9 @@ h1 {
#example .example .anchor + p {
margin: 0px 0px 1em;
}
#example .no.example .anchor + p {
margin: 0.5em 0px 1em;
}
/*rtl:ignore*/
pre.console {
background-color: transparent;
@ -105,17 +108,19 @@ pre.console {
}
code {
background-color: rgba(0, 0, 0, 0.02);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.2em;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
color: #333333;
font-weight: bold;
display: inline-block;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
font-family: "Monaco","Menlo","Ubuntu Mono","Consolas","source-code-pro",monospace;
font-size: 14px;
margin: 0 0.25em;
padding: 0.125em 0.5em;
margin: 0;
padding: 0.1em 0.2em;
vertical-align: baseline;
}
.ui.message code {
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(0, 0, 0, 0.1);
}
pre code {
@ -138,10 +143,14 @@ p:last-child {
margin-bottom: 0em;
}
/* links */
code a,
a code,
a {
color: #009FDA;
text-decoration: none;
}
code a:hover,
a:hover code,
a:hover {
color: #00BAFF;
}
@ -210,7 +219,7 @@ a:hover {
}
#example .tab.header.segment .tabular.menu {
clear: both;
margin: 2rem -1px 0em;
margin: 2rem 0px 0em;
border-bottom: none;
}
#example .tab.header.segment .tabular.menu .active.item {
@ -564,7 +573,6 @@ body#example.hide {
border: 0px;
box-shadow: none;
padding: 0em;
margin: -0.4em -0.7em;
}
#example .ui.label + .instructive.segment {
@ -592,7 +600,7 @@ body#example.hide {
#example .example {
margin: 1em 0em;
border-top: 1px solid rgba(0, 0, 0, 0.1);
/*border-top: 1px solid rgba(0, 0, 0, 0.1);*/
padding: 1em 0em;
position: relative;
-webkit-tap-highlight-color: transparent;
@ -617,6 +625,7 @@ body#example.hide {
#example .main.container > h2,
#example .main.container > .tab > h2{
position: relative;
margin-bottom: 1em;
}
#example .main.container > h2:first-child {
margin-top: 0em;
@ -1091,6 +1100,13 @@ body.progress.animated .ui.progress .bar {
color: #333333;
}
.hljs.xml {
color: #555555;
}
.hljs.xml:hover {
color: #333333;
}
/* Class Name */
.hljs-string,
.hljs-tag .hljs-value,
@ -1134,7 +1150,7 @@ body.progress.animated .ui.progress .bar {
/* HTML Tag */
.hljs-tag .hljs-title {
color: #884E75;
color: #7E7079;
font-weight: normal;
}
.code:hover .hljs-tag .hljs-title {
@ -1271,8 +1287,10 @@ body.progress.animated .ui.progress .bar {
#example .main.container {
background-color: #FFFFFF;
margin: 0em auto;
box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
padding: 2em 2em 2em;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
padding: 2em 3em 2em;
z-index: 1;
}
#example .main.container .right.rail .sticky {

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

@ -38,7 +38,6 @@ $.fn.modal = function(parameters) {
returnedValue
;
$allModules
.each(function() {
var
@ -68,7 +67,6 @@ $.fn.modal = function(parameters) {
instance = $module.data(moduleNamespace),
module
;
module = {
initialize: function() {

Write Preview
Loading…
Cancel
Save