How ToPretty much everything that you can do with Safire is listed here. Just look for what you want, if you can't find it please E-mail me. BASICS:I want to...
HAVE iPHONE STYLE ICONS Simple - - Get an icon set or use one included in the framework.
- Class the unordered list element with a class of "iphone-icons".
For example: <ul class="iphone-icons">
<li>
<a href="#news.php" class="icon" type="news">
<img src='images/sticker-icons/news.png' width='55'/><span>News</span>
</a>
</li>
<li>
<a href="#photos.php" class="icon" type="photos">
<img src='images/sticker-icons/photos.png' width='55'/><span>Photos</span>
</a>
</li>
<li>
<a href="#video.php" class="icon" type="video">
<img src='images/sticker-icons/youtube.png' width='55'/><span>Video</span>
</a>
</li>
<li>
<a href="#settings.php" class="icon" type="settings">
<img src='images/sticker-icons/settings.png' width='55'/><span>Settings</span>
</a>
</li>
</ul> HAVE iPHONE STYLE LISTS THAT SLIDE A little more detailed but - - Class your unordered list element with 'list-items'
- Class your links with 'list-item'
- Set a unique type attribute for every link (this will id your the new div replacing the old one)
- Set your href attribute to have a hash that is the location of the content you want to slide in
Example: <ul class="list-items" id="mixx-news">
<li>
<a href="#news.php?id=289629" type="289629" class="list-item">
<span class="votes">46</span><sup>votes</sup><br>100 Best Travel Journal Blogs
</a>
</li>
<li>
<a href="#news.php?id=289621" type="289621'" class="list-item">
<span class="votes">73</span><sup>votes</sup><br>100 Best Jobs for Lazy Bones
</a>
</li>
</ul>
HAVE iPHONE STYLE BUTTONS Requires some CSS knowledge - - Create a custom class (css selector) or use one of our classes for a href
- Choose or create your own iPhone button (we have green, red, light gray and dark gray)
- Set a '-webkit-border-image' property value of 'url(yourimage.png) 0 12 0 12' for optimal appearance
- Set a 'text-shadow' property value of 'yourcolor 0px 1px 1px' for that iphone-ish button text
- Set a 'color' property value of 'yourcolor'
- Note: if you use a class of 'submit-button' you must use '!important' declarations/rules
Example: <!--css-->
.submit-button{
-webkit-border-image: url(images/buttons/lightgrayButton.png) 0 12 0 12 !important;
text-shadow: #fff 0px 1px 1px !important;
color: black !important;
}
<!--html-->
<a href="#results.php?re=false" class="submit-button">Search!</a>LINK TO TELEPHONE NUMBERS Very Simple - - Output a the phone number like so:
<a href="tel: 9546703289">Call Me</a> LINK TO YOUTUBE VIDEOS Little bit harder - - You need the youtube video id (its the 'v' parameter in the url) and then you output like this:
<a href="youtube: v-id">Call Me</a> INTERMEDIATE:I want to...
HAVE TABS CSS Knowledge Required - - Create a parent div with and id of 'nav'
- Create child divs with classes of 'tabs' and 'tab-div1', 'tab-div2', etc..
- Add an id of 'selected' to the one you want to appear to be selected.
- Customize the css for the tabs based on the number of tabs you are using by adding a 'left' property of l = 100% / no. of tabs, incrementally adding l for each tab 'tab-div2' should be 33% & 'tab-div3' should be 66% if there are 3 tabs total.
Code: <!--CSS-->
#nav div.tabs{
width: 50% !important;
position: absolute !important;
}
#nav > div.tab-div2{
left: 50% !important;
}
#nav > div#selected{
border-top: 5px solid rgba(135,206,250,0.7) !important;
}
#nav > div#selected a{
color: #333333 !important;
font-weight: bold !important;
}
<!--HTML-->
<div id="nav">
<div class="tabs tab-div1" id="selected">
<a href="#search.php" class="tab" type="all">Search</a>
</div>
<div class="tabs tab-div2">
<a href="#history.php" class="tab" type="all">History</a>
</div>
</div>
HAVE iPHONE OVERLAYS Easy - - Put 1 div nested inside of another at the bottom of the page, right before the body tag
- Class the first div (the parent) with 'overlay' and set style to 'display: none;'
- Set the id to something unique
- Class the second div (the child) with 'lightbox'
- Create a href with a class of 'cancel-button' and make sure it is inside of the second div (the child)
- To trigger the showing of the overlay create a href outside of the first div (the parent) and class it with 'overlay-link' and set it's type attribute to be the same as the first div's (the parent's) id attribute.
Example: <a href="#feedback-overlay" class="overlay-link" type="feedback" selected="button">
Feedback
</a>
<div id="feedback" class="overlay" style="display: none;">
<div class="lightbox">
<form method="post">
<label>Feedback:</label><br/>
<textarea name="feedback"></textarea>
<a href="#form.php" class="submit-button" id="greenbutton" callback="alertresponse(response);">Go!</a>
<a href="#close" class="cancel-button" id="redbutton">Cancel</a>
</form>
</div>
</div> HAVE SUB NAVIGATION OK. - ote You must regenerate your sub-navigation every time you click a 'tab'
- Create a Div and id it 'sub-nav'
- Place it inside of the div with an id of 'stage'.
- Place 'sub-nav' classes on all a href's
- Place an id of 'selected' on the sub-nav you would like to appear to be selected
Example: <div id="sub-nav">
<a href="#maps.html" class="sub-nav">Maps</a>
<a href="#results.php" class="sub-nav">Ads</a>
<a href="#top10.html" class="sub-nav" id="selected">Top 10</a>
<a href="#icons.html" class="sub-nav">Icons</a>
</div> ADVANCED:I want to...
PROVIDE A CALLBACK FOR MY FORM Requires Javascript Knowledge - - Create a form element that ONLY contains a method attribute
- Place all of your form elements (input, textarea, select, radiobuttons) within that form element
- Where you specify your button (as a href), make sure you place an href of the actual form action
- Specify a 'callback' attribute which accepts a response argument
- Write your your callback.
Here is an example: <!--Javascript-->
function showResults(html){
$('stage-mat').innerHTML = html;
}
<!--HTML-->
<form method="post">
<label>Job Title</label><br/>
<input type="text" name="job-title" id="job-title" />
<br/>
<label>Location</label><br/>
<input type="text" name="location" id="location" /><br/>
<a href="#results.php?re=false" class="submit-button" callback="showResults(response);">Search!</a>
</form>
ADD A CALLBACK TO A LINK BEFORE IT GETS A PAGE This is not possible yet. But you can create an event handler for onclick events. Requires JavaScript knowlege - - Write your callback function
- Specify your callback as an onclick event
<li>
<a href='#results.php?re=true&x=5643' class='list-item' type='5643' onclick='updateHist()'>Ajax / PHP Developer</a>
</li>
HAVE A BACK BUTTON Coming in the next release of Safire (June 08') MAKE MY OWN ANIMATIONS Coming in the next release of Safire (June 08') HAVE MY OWN CALLBACKS FOR ANY LINK Coming in the next release of Safire (June 08')
|
Sign in to add a comment
Is this project still alive? I'm finding it very useful. If you need ANY help developing this project, please do not hesitate. As, I am interested in the same subject, and want to develop an all-purpose framework just for that, but since you already have one, might as well not re-invent the wheel?
Let me know.
Not dead... new release soon.
Cool! Waiting for news :)