style tweaks

jccarvalhosa · Nov 23, 2012 · 1baf351 · 1baf351
1 parent 9f6cf81
commit 1baf351
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 34 deletions.
diff --git a/css/examples.css b/css/examples.css
@@ -1,17 +1,3 @@
-@charset "UTF-8";
-
-
-#nav {
-    left:0;
-}
-#header {
-    padding-top:3em;
-}
-
-#header h1, #header h2 {
-    margin: 0 0 .2em 0;
-    padding-top: 1.8em;
-}
 hr + h3, hr + h4 {
     margin-top: 0;
 }
@@ -37,3 +23,4 @@ ul#nav li {
     font-weight:bold;
     margin-bottom:5px;
 }
+
diff --git a/css/master.css b/css/master.css
@@ -3,7 +3,7 @@
 html, body {
     color:#333;
     background:#002F2F/*#232f2e*/;
-    line-height:1.3;
+    line-height:1.4;
     margin:0;
     padding:0;
     font-family: 'Lucida Grande', arial, sans-serif;
@@ -31,7 +31,7 @@ h1,h2,h3 {
     font-weight: normal;
 }
 h1,h2,h3,h4 {
-    margin:1.5em 0 .5em 0;
+    margin:1.8em 0 .5em 0;
 }
 h1 {
     font-size:2.6em;
@@ -46,7 +46,7 @@ h4 {
     font-size:129%;
 }
 p {
-    margin: 1.5em 0 1em 0;
+    margin: 1.0em 0 1em 0;
 }
 pre {
     background:#eee;
@@ -93,12 +93,19 @@ ul#nav li {
     font-weight: bold;
 }
 ul#nav a, .highlighted {
-    background-color:#FFFBD0;
+    background-color:#FFF8AC;
     padding: .3em .4em;
 }
 ul#nav a {
     padding: .4em .5em;
 }
+#twitter {
+    position:absolute;
+    top:3.1em;
+    right:0;
+    width:106px;
+    padding: .6em .6em .4em .65em;
+}
 #footer {
     border-top:1px dotted;
     margin:40px 0 0;
@@ -146,8 +153,8 @@ label {
     float: left;
     width: 38px;
     margin-right: 1em;
+    margin-bottom:.5em;
     font-size: 1.2em;
-    line-height: 2em;
 }
 ul.tagit {
     width: 495px;

diff --git a/css/subpage.css b/css/subpage.css
@@ -0,0 +1,15 @@
+@charset "UTF-8";
+
+
+#nav {
+    left:0;
+}
+#header {
+    padding-top:3em;
+}
+
+#header h1, #header h2 {
+    margin: 0 0 .2em 0;
+    padding-top: 1.8em;
+}
+
diff --git a/examples.html b/examples.html
@@ -68,20 +68,23 @@
             // Tag events
             //-------------------------------
             var eventTags = $('#eventTags');
+
+            var addEvent = function(text) {
+                $('#events_container').append(text + '<br>');
+            };
             eventTags.tagit({
                 availableTags: sampleTags,
                 onTagRemoved: function(evt, tag) {
-                    console.log(evt);
-                    alert('This tag is being removed: ' + eventTags.tagit('tagLabel', tag));
+                    addEvent('This tag is being removed: ' + eventTags.tagit('tagLabel', tag));
                 },
                 onTagClicked: function(evt, tag) {
-                    console.log(tag);
-                    alert('This tag was clicked: ' + eventTags.tagit('tagLabel', tag));
-                }
+                    addEvent('This tag was clicked: ' + eventTags.tagit('tagLabel', tag));
+                },
+                singleField:true
             }).tagit('option', 'onTagAdded', function(evt, tag) {
                 // Add this callbackafter we initialize the widget,
                 // so that onTagAdded doesn't get called on page load.
-                alert('This tag is being added: ' + eventTags.tagit('tagLabel', tag));
+                addEvent('This tag is being added: ' + eventTags.tagit('tagLabel', tag));
             });
 
             //-------------------------------
@@ -160,7 +163,6 @@ <h3><a name="graceful-degredation"></a>Single Input Field (2)</h3>
                 If you instantiate Tag-it on an INPUT element, it will default to being singleField, with that INPUT element as the singleFieldNode. This is the simplest way to have a gracefully-degrading tag widget.
             </p>
             <input name="tags" id="singleFieldTags2" value="Apple, Orange">
-			<input type="submit" value="Submit">
 	    </form>
 
         <hr>
@@ -170,7 +172,6 @@ <h3>Spaces Allowed Without Quotes</h3>
    	    <form>
 			<p></p>
 			<ul id="allowSpacesTags"></ul>
-			<input type="submit" value="Submit">
 	    </form>
 
         <hr>
@@ -184,7 +185,6 @@ <h3>Preloading Data in Markup</h3>
 			    <li>Tag1</li>
 			    <li>Tag2</li>
 		    </ul>
-	        <input type="submit" value="Submit">
 	    </form>
 
         <hr>
@@ -195,8 +195,8 @@ <h3>Events</h3>
                 <li>Click my label</li>
                 <li>Remove me</li>
             </ul>
-			<input type="submit" value="Submit">
 	    </form>
+        <div id="events_container"></div>
 
         <hr>
         <h3>Methods</h3>
@@ -206,7 +206,6 @@ <h3>Methods</h3>
             <p><a href="#" onclick="var inp=prompt('Enter a tag value to test the createTag method.');$('#methodTags').tagit('createTag', inp);return false;">Create tag</a></p>
             <p><a href="#" onclick="var inp=prompt('Enter a tag value to test the removeTagByName method.');$('#methodTags').tagit('removeTagByName', inp);return false;">Remove tag by name</a></p>
             <p><a href="#" onclick="$('#methodTags').tagit('removeAll');return false;">Clear tags</a></p>
-			<input type="submit" value="Submit">
 	    </form>
 
         <hr>
@@ -219,13 +218,11 @@ <h3>Remove Confirmation</h3>
                 <li>backspace me</li>
                 <li>me too</li>
             </ul>
-			<input type="submit" value="Submit">
 	    </form>
 
     </div>
 
 
-
 	<div id="footer"> 
         <div class="left">
 	        <p>Built with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://jqueryui.com/" target="_blank">jQuery UI</a>.</p>

diff --git a/js/tag-it.min.js b/js/tag-it.min.js