Better, stylish examples added
This commit is contained in:
Ben Keen
parent
4b66bb4ac8
commit
9498042979
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
.idea*
|
||||
node_modules*
|
||||
2
crs.min.js
vendored
Normal file
2
crs.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
67
index.html
67
index.html
|
|
@ -31,37 +31,63 @@
|
|||
<hr>
|
||||
|
||||
<section id="main_content">
|
||||
<h3>
|
||||
<a name="welcome-to-github-pages" class="anchor" href="#welcome-to-github-pages"><span class="octicon octicon-link"></span></a>Welcome to GitHub Pages.</h3>
|
||||
<p>For installation and configuration details about the script, see the <a href="https://github.com/benkeen/country-region-selector">main github readme.</a></p>
|
||||
|
||||
<p>This automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here using GitHub Flavored Markdown, select a template crafted by a designer, and publish. After your page is generated, you can check out the new branch:</p>
|
||||
<h3>Examples</h3>
|
||||
|
||||
<pre><code>$ cd your_repo_root/repo_name
|
||||
$ git fetch origin
|
||||
$ git checkout gh-pages
|
||||
</code></pre>
|
||||
|
||||
<p>If you're using the GitHub for Mac, simply sync your repository and you'll see the new branch.</p>
|
||||
<h4>Example 1</h4>
|
||||
|
||||
<h3>
|
||||
<a name="designer-templates" class="anchor" href="#designer-templates"><span class="octicon octicon-link"></span></a>Designer Templates</h3>
|
||||
<p>
|
||||
This is a simple no-frills example. You can lay the fields out in your markup however you want - but
|
||||
for simplicity, the rest of the examples will just put them side to side.
|
||||
</p>
|
||||
|
||||
<p>We've crafted some handsome templates for you to use. Go ahead and continue to layouts to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved if it remained markdown format.</p>
|
||||
<div>
|
||||
Country: <select class="crs-country" data-region-id="one"></select>
|
||||
</div>
|
||||
<div>
|
||||
Region: <select id="one"></select>
|
||||
</div>
|
||||
|
||||
<h3>
|
||||
<a name="rather-drive-stick" class="anchor" href="#rather-drive-stick"><span class="octicon octicon-link"></span></a>Rather Drive Stick?</h3>
|
||||
<hr size="1" />
|
||||
|
||||
<p>If you prefer to not use the automatic generator, push a branch named <code>gh-pages</code> to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator written by our own Tom Preston-Werner. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.</p>
|
||||
|
||||
<h3>
|
||||
<a name="authors-and-contributors" class="anchor" href="#authors-and-contributors"><span class="octicon octicon-link"></span></a>Authors and Contributors</h3>
|
||||
<h4>Example 2</h4>
|
||||
|
||||
<p>You can <a href="https://github.com/blog/821" class="user-mention">@mention</a> a GitHub username to generate a link to their profile. The resulting <code><a></code> element will link to the contributor's GitHub Profile. For example: In 2007, Chris Wanstrath (<a href="https://github.com/defunkt" class="user-mention">@defunkt</a>), PJ Hyett (<a href="https://github.com/pjhyett" class="user-mention">@pjhyett</a>), and Tom Preston-Werner (<a href="https://github.com/mojombo" class="user-mention">@mojombo</a>) founded GitHub.</p>
|
||||
<p>
|
||||
Custom default option texts for both the country and region dropdowns.
|
||||
</p>
|
||||
|
||||
<select class="crs-country" data-region-id="two" data-default-option="Select a country, man."></select>
|
||||
<select id="two" data-blank-option="No country selected, mon. (blank value)" data-default-option="Select a region, pal. (default option)"></select>
|
||||
|
||||
<hr size="1" />
|
||||
|
||||
|
||||
<h4>Example 3</h4>
|
||||
|
||||
<p>
|
||||
The country dropdown values are by default the same as the display values: the full country names.
|
||||
By adding the <b>data-value="2-char"</b> attribute to the country field, the values will be a 2-char
|
||||
character code.
|
||||
</p>
|
||||
|
||||
<select class="crs-country" data-region-id="three" data-value="2-char"></select>
|
||||
<select id="three"></select>
|
||||
|
||||
<hr size="1" />
|
||||
|
||||
<h4>Example 4</h4>
|
||||
|
||||
<p>
|
||||
Pre-filling the fields on page load.
|
||||
</p>
|
||||
|
||||
<select class="crs-country" data-region-id="four" data-default-value="Canada"></select>
|
||||
<select id="four" data-default-value="British Columbia"></select>
|
||||
|
||||
<h3>
|
||||
<a name="support-or-contact" class="anchor" href="#support-or-contact"><span class="octicon octicon-link"></span></a>Support or Contact</h3>
|
||||
|
||||
<p>Having trouble with Pages? Check out the documentation at <a href="http://help.github.com/pages">http://help.github.com/pages</a> or contact <a href="mailto:support@github.com">support@github.com</a> and we’ll help you sort it out.</p>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
|
|
@ -69,6 +95,7 @@ $ git checkout gh-pages
|
|||
This page was generated by <a href="http://pages.github.com">GitHub Pages</a>. Tactile theme by <a href="https://twitter.com/jasonlong">Jason Long</a>.
|
||||
</footer>
|
||||
|
||||
<script src="crs.min.js"></script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user