WEB DİZAYN

CSS3 ve jQuery İOS Uygulaması

CSS3 Javascript ile birlikte çok özel işler yapmak mümkün sıra ile bunları yazmaya çalışacağım.Aşağıdaki kodu head kısmına eklemeniz gerekmektedir.


< link rel="stylesheet" href="assets/css/styles.css" />


Aşağıdaki kodu da body kısmına eklemeniz yeterli olacaktır. Boyutlarını değiştirmek istiyorsanız. CSS dosyasını değiştirmek yeterli olacaktır.


< section id="homeScreen">
< div id="mask">
< div id="allScreens">< /div>
< /div>

< ul id="indicators">< /ul>

< div id="dock">< /div>
< /section>

< footer>
< h2>< i>Düzenleme:< /i> iOS-like Home Screen with CoffeeScript. Tarafımdan düzenlenmiştir.< /h2>

< /footer>

< !-- JavaScript includes -->
< script src="http://code.jquery.com/jquery-1.6.3.min.js">< /script>
< script src="assets/js/touchable.js">< /script>
< script src="assets/js/coffee-script.js">< /script>

< script type="text/coffeescript">

# The Icon class.

class Icon

# The constructor. The -> arrow signifies
# a function definition.
constructor: (@id, @title) ->
# @ is synonymous for "this". The id and title parameters
# of the construtor are automatically added as this.id and this.title
# @markup holds the HTML of the icon. It is
# transformed to this.markup behind the scenes.

@markup = "< div class='icon' style='background-image:url(assets/img/icons/#{@id}.png)'
title='#{@title}'>< /div>"

# The DockIcon class inherits from Icon

class DockIcon extends Icon
constructor: (id, title)->

# This calls the constructor if Icon

super(id, title)

# Changing the class name of the generated HTML
@markup = @markup.replace("class='icon'","class='dockicon'")


# The Screen Class

class Screen

# Function arguments can have default parameters
constructor: (icons = [])->
@icons = icons
attachIcons: (icons = [])->
Array.prototype.push.apply(@icons, icons)

generate: ->
markup = []

# Looping through the @icons array
markup.push(icon.markup) for icon in @icons

# The last line of every function is implicitly returned
"< div class='screen'>#{markup.join('')}< /div>"
class Stage
# The width of our "device" screen. This is
# basically the width of the #mask div.

screenWidth: 332

constructor: (icons)->

@currentScreen = 0
@screens = []

# Calculating the number of screens
# necessary to display all the icons

num = Math.ceil(icons.length / 9)
i = 0

while num--
# we pass a slice of the icons array
s = new Screen(icons[i...i+9])
# adding the screen to the local screens array
@screens.push(s)
i+=9
# This method populates the passed element with HTML
addScreensTo: (element)->
@element = $(element)
@element.width(@screens.length*@screenWidth)
for screen in @screens
@element.append(screen.generate())
addIndicatorsTo: (elem)->
# This method creates the small
# circular indicatiors
@ul = $(elem)
for screen in @screens
@ul.append('< li>')
@ul.find('li:first').addClass('active');
goTo: (screenNum)->
# This method animates the allScreen div in
# order to expose the needed screen in #mask
if @element.is(':animated')
return false
# if this is the first or last screen,
# run the end of scroll animation
if @currentScreen == screenNum

# Parallel assignment:
[from, to] = ['+=15','-=15']
if @currentScreen != 0
[from, to] = [to, from]

@element.animate( { marginLeft : from }, 150 )
.animate( { marginLeft : to }, 150 )
else
# If everything is ok, animate the transition between the screens.
# The fat arrow => preserves the context of "this"
@element.animate( { marginLeft:-screenNum*@screenWidth }, => @currentScreen = screenNum )
@ul.find('li').removeClass('active').eq(screenNum).addClass('active');
next: ->
toShow = @currentScreen+1
# If there is no next screen, show
# the current one
if toShow == @screens.length
toShow = @screens.length - 1
@goTo(toShow)
previous: ->
toShow = @currentScreen-1

# If there is no previous screen,
# show the current one
if toShow == -1
toShow = 0
@goTo(toShow)
# This is equivalent to $('document').ready(function(){}):
$ ->
allIcons = [
new Icon('Fotograf', 'Fotoğraf Galerisi'), new Icon('Maps', 'Google Maps')
new Icon('Chuzzle', 'Chuzzle'), new Icon('Safari', 'Safari')
new Icon('Hava', 'Hava'), new Icon('nes', 'NES Emulator')
new Icon('Takvim', 'Takvim'), new Icon('Saat', 'Saat')
new Icon('BossPrefs', 'Boss Prefs'), new Icon('Santrac', 'Santraç')
new Icon('Mail', 'Mail'), new Icon('Telefon', 'Telefon')
new Icon('SMS', 'SMS Center'), new Icon('Kamera', 'Kamera')
new Icon('iPod', 'iPod'), new Icon('Hesap', 'Hesap Makinası')
new Icon('Muzik', 'Müzik'), new Icon('Poof', 'Poof')
new Icon('Ayarlar', 'Ayarlar'), new Icon('YouTube', 'Youtube')
new Icon('psx4all', 'PSx4All'), new Icon('Video', 'Video Kayıt')
new Icon('Installer', 'Installer'), new Icon('Notlar', 'Notlar')
new Icon('RagingThunder', 'RagingThunder'), new Icon('Stocks', 'Stocks')
new Icon('genesis4iphone', 'Genesis'),
new Icon('Takvim', 'Takvim'), new Icon('Saat', 'Saat')
new Icon('Fotograf', 'Fotoğraf Galerisi'), new Icon('Maps', 'Google Maps')
]
dockIcons = [
new DockIcon('Kamera', 'Kamera')
new DockIcon('iPod', 'iPod')
new DockIcon('Hesap', 'Hesap Makinası')
]
allScreens = $('#allScreens')
# Using the Touchable plugin to listen for
# touch based events:
allScreens.Touchable();
# Creating a new stage object
stage = new Stage(allIcons)
stage.addScreensTo(allScreens)
stage.addIndicatorsTo('#indicators')
# Listening for the touchablemove event.
# Notice the callback function
allScreens.bind 'touchablemove', (e,touch)->
stage.next() if touch.currentDelta.x < -5
stage.previous() if touch.currentDelta.x > 5
# Adding the dock icons:
dock = $('#dock')
for icon in dockIcons
dock.append(icon.markup)

< /script>