lukechilds
/
Semantic-UI-Docs
mirror of https://github.com/lukechilds/Semantic-UI-Docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add multiple example

1.x
jlukic 10 years ago
parent
2563c2f94c
commit
47f23572a6
5 changed files with 157 additions and 77 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 61
      server/documents/behaviors/form.html.eco
  2. 10
      server/documents/collections/form.html.eco
  3. 145
      server/documents/hotfix.html.eco
  4. 2
      server/documents/modules/dropdown.html.eco
  5. 4
      server/partials/header.html.eco

61
server/documents/behaviors/form.html.eco
View File

@ -281,6 +281,7 @@ type : 'UI Behavior'
.form('set values', {
name : 'Jack',
gender : 'male',
colors : ['red', 'grey'],
username : 'jlukic',
password : 'youdliketoknow',
terms : true
@ -314,6 +315,33 @@ type : 'UI Behavior'
<label>Password</label>
<input name="password" type="password">
</div>
<div class="inline fields">
<label for="colors">Favorite Colors</label>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="colors[]" value="red" />
<label>Red</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="colors[]" value="blue" />
<label>Blue</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="colors[]" value="green" />
<label>Green</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="colors[]" value="grey" />
<label>Grey</label>
</div>
</div>
</div>
<div class="inline field">
<div class="ui checkbox">
<input name="terms" type="checkbox">
@ -337,13 +365,13 @@ type : 'UI Behavior'
var
$form = $('.get.example form'),
// get one value
name = $form.form('get value', 'name'),
colors = $form.form('get value', 'colors'),
// get list of values
fields = $form.form('get values', ['name', 'gender']),
fields = $form.form('get values', ['name', 'colors']),
// get all values
allFields = $form.form('get values')
;
console.log(name);
console.log(colors);
console.log(fields);
console.log(allFields);
</div>
@ -374,6 +402,33 @@ type : 'UI Behavior'
<label>Password</label>
<input name="password" type="password">
</div>
<div class="inline fields">
<label for="colors">Favorite Colors</label>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="colors[]" value="red" />
<label>Red</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="colors[]" value="blue" />
<label>Blue</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="colors[]" value="green" />
<label>Green</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="colors[]" value="grey" />
<label>Grey</label>
</div>
</div>
</div>
<div class="inline field">
<div class="ui checkbox">
<input name="terms" type="checkbox">

10
server/documents/collections/form.html.eco
View File

@ -142,19 +142,19 @@ themes : ['Default', 'Flat', 'Chubby', 'GitHub']
</div>
</div>
<h4 class="ui block top attached header">Optional Survey</h4>
<div class="ui bottom attached secondary segment">
<h4 class="ui top attached header">Import Settings</h4>
<div class="ui bottom attached segment">
<div class="grouped fields">
<label for="alone">Are you a human?</label>
<label for="alone">Would you like us to import your current settings?</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" checked="" name="alone">
<input type="radio" checked="" name="import">
<label>Yes</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="alone">
<input type="radio" name="import">
<label>No</label>
</div>
</div>

145
server/documents/hotfix.html.eco
View File

@ -9,21 +9,65 @@ type : 'Library'
<!-- TEST JS HERE !-->
<script type="text/javascript">
$(document).ready(function() {
var validation_settings = {
inline : true,
on : 'blur'
};
var validation_rules =
{
$('#contexta .menu a.item').tab({
history : true,
debug : true,
context : $("#contexta"),
historyType : 'hash',
auto : true
});
$('#context1 .menu .item')
.tab({
context: $('#context1')
gender: {
identifier : 'gender',
rules: [
{
type : 'empty',
prompt : 'Please enter a gender'
}
]
},
name: {
identifier : 'name',
rules: [
{
type : 'empty',
prompt : 'Please enter your name'
}
]
},
username: {
identifier : 'username',
rules: [
{
type : 'empty',
prompt : 'Please enter your username'
}
]
},
password: {
identifier : 'password',
rules: [
{
type : 'empty',
prompt : 'Please enter your password'
}
]
},
terms: {
identifier : 'terms',
rules: [
{
type : 'checked',
prompt : 'You need to agree to the terms and conditions'
}
]
}
};
$('.ui.form').form(validation_rules , validation_settings);
$('.ui.checkbox').checkbox();
$('.ui.dropdown')
.dropdown({
})
;
;
});
</script>
@ -32,59 +76,40 @@ $(document).ready(function() {
</style>
<div style="max-width: 1000px;margin:2em auto;">
<div id="contexta">
<div id="mainMenu" class="ui vertical pointing menu">
<a class="item" data-tab="examples/popup.html">
<i class="home east icon"></i>home
</a>
<a class="item" data-tab="examples/dropdown.html"><i class="circle east red icon"></i>change password</a>
<form class="ui form segment">
<p>Tell Us About Yourself</p>
<div class="two fields">
<div class="field">
<label>Name</label>
<input placeholder="First Name" name="name" type="text">
</div>
<div class="ui tab active" data-tab="examples">
<div class="ui tab active" data-tab="examples/popup.html">
content
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
<div class="ui tab" data-tab="examples/dropdown.html">
change password
</div>
</div>
</div>
</div>
<div id="context1">
<div class="ui secondary menu">
<a class="item" data-tab="first">First</a>
<a class="item active" data-tab="second">Second</a>
<a class="item" data-tab="third">Third</a>
</div>
<div class="ui tab segment" data-tab="first">
<div class="ui top attached tabular menu">
<a class="active item" data-tab="first/a">1A</a>
<a class="item" data-tab="first/b">1B</a>
<a class="item" data-tab="first/c">1C</a>
<div class="field">
<label>Username</label>
<input placeholder="Username" name="username" type="text">
</div>
<div class="ui bottom attached active tab segment" data-tab="first/a">1A</div>
<div class="ui bottom attached tab segment" data-tab="first/b">1B</div>
<div class="ui bottom attached tab segment" data-tab="first/c">1C</div>
</div>
<div class="ui tab segment active" data-tab="second">
<div class="ui top attached tabular menu">
<a class="item" data-tab="second/a">2A</a>
<a class="item" data-tab="second/b">2B</a>
<a class="item active" data-tab="second/c">2C</a>
<div class="field">
<label>Password</label>
<input type="password" name="password">
</div>
<div class="ui bottom attached tab segment" data-tab="second/a">2A</div>
<div class="ui bottom attached tab segment" data-tab="second/b">2B</div>
<div class="ui bottom attached tab segment active" data-tab="second/c">2C</div>
</div>
<div class="ui tab segment" data-tab="third">
<div class="ui top attached tabular menu">
<a class="item" data-tab="third/a">3A</a>
<a class="item" data-tab="third/b">3B</a>
<a class="item" data-tab="third/c">3C</a>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" name="terms">
<label>I agree to the terms and conditions</label>
</div>
<div class="ui bottom attached tab segment" data-tab="third/a">3A</div>
<div class="ui bottom attached tab segment" data-tab="third/b">3B</div>
<div class="ui bottom attached tab segment" data-tab="third/c">3C</div>
</div>
</div>
<div class="ui blue submit button">Submit</div>
</form>
</div>

2
server/documents/modules/dropdown.html.eco
View File

@ -2359,7 +2359,7 @@ themes : ['Default']
</tr>
<tr>
<td>fullTextSearch</td>
<td>true</td>
<td>false</td>
<td>Whether search selections should look for string match anywhere in string</td>
</tr>
<tr>

4
server/partials/header.html.eco
View File

@ -70,13 +70,13 @@
</a>
<a class="ui button" href="http://learnsemantic.com/guide/expert.html">Getting Started</a>
<h4 class="ui header">Package Managers</h4>
<div class="ui form">
<div class="ui form"><!--
<div class="field">
<label>Bower</label>
<div class="ui fluid input">
<input type="text" readonly="readonly" placeholder="Copy Link" value="bower install semantic-ui">
</div>
</div>
</div> -->
<div class="field">
<label>NPM</label>
<div class="ui fluid input">

Write Preview
Loading…
Cancel
Save