Skip to content

Instantly share code, notes, and snippets.

@dharFr
Created July 23, 2011 14:28
Show Gist options
  • Save dharFr/1101485 to your computer and use it in GitHub Desktop.
Save dharFr/1101485 to your computer and use it in GitHub Desktop.
jQuery Plugin pattern written in CoffeeScript (written from jQuery Doc: http://docs.jquery.com/Plugins/Authoring)
###*
* jQuery pluginName plugin v0.1
* ==========================
* see http://docs.jquery.com/Plugins/Authoring
*
* plugin description goes here
* author your.name@email.com
###
(($) ->
# Private functions
privateFunc = () ->
console.log "private"
# Public Functions
methods =
init: () ->
console.log 'init'
@each ->
$this = $(@)
data = $this.data 'pluginName'
if not data
### Do more stuff here ###
$(@).data 'pluginName'
target: $this
return
destroy: () ->
@each ->
$this = $(@)
data = $this.data 'pluginName'
data.pluginName.remove()
$this.removeData 'pluginName'
return
$.fn.pluginName = (method) ->
# Method calling logic
if methods[method]
methods[method].apply this, Array.prototype.slice.call arguments, 1
else if typeof method is 'object' or !method
methods.init.apply this, arguments
else
$.error "jQuery.pluginName: Method #{ method } does not exist on jQuery.pluginName"
return
)(jQuery)
@gaoguoxin
Copy link

(($)->
  defaults =
    min:0
    max:100
    value:0
    width:600
    height:30
    background:'yellow'
    start:(e)->
    change:(e)->
    end:(e)->

  privates =
    init: (options) ->
      return @each ()->
        opts = $.extend {},defaults,options
        $this = $(@)
        data = $this.data('progressbar')
        unless data
          privates.generate_html($this,opts)
          privates.bind_event($this,opts)

    generate_html: ($this,opts)->
      percent = Math.round((opts.value - opts.min) / (opts.max - opts.min) * 100) + '%'; 
      warper = $this.css({'width':opts.width,'height':opts.height}).addClass('progressbar').data('progressbar',{
        min:opts.min,
        max:opts.max,
        val:opts.value,
        percent:percent,
        started:false
      })

      content = $('<div />').css({'height':opts.height,'width':percent,'background':opts.background}).addClass('progressbar-value').appendTo(warper)    

    bind_event: ($this,opts) -> 
      $this.bind('start.progressbar':opts.start,'change.progressbar':opts.change,'end.progressbar':opts.end) 


  methods =
    get_min:->
      $(@).data('progressbar').min

    get_max:->
      $(@).data('progressbar').max

    get_val:->
      $(@).data('progressbar').val

    get_percent:->
      $(@).data('progressbar').percent

    set_val: (val)->    
      min  = methods.get_min.apply @
      max  = methods.get_max.apply @
      data = $(@).data('progressbar')

      unless data.started
        startEvent = $.extend {},data,{type:'start.progressbar'}
        $(@).trigger(startEvent)
        data.started = true


      if val < min
        val = min
      if val > max
        val = max

      percent = Math.round((val - min) / (max - min) * 100) + '%'; 

      data.val = val

      data.percent = percent



      @.find('.progressbar-value').animate({'width':percent},()=>
        if val == max 
          endEvent = $.extend {},data,{type:'end.progressbar'}
          $(@).parent().trigger(endEvent) 
      )

      @.find('.progressbar-value').animate({'width': percent}, => 
        if val == max
          completeEvent = $.extend {}, data, {type: 'complete.progressbar',percent: percent}
          $(@).parent().trigger(completeEvent)

      )

      changeEvent = $.extend {},data,{type:'change.progressbar',percent: percent}

      $(@).trigger(changeEvent)

  $.fn.progressbar = (options_or_method) ->
    if methods[options_or_method]
      methods[options_or_method].apply @,Array.prototype.slice.call arguments,1
    else if $.isPlainObject(options_or_method)
      privates['init'].apply @,arguments
    else
      $.error("#{options_or_method} is not defined in progressbar")
)(jQuery)

hi,dharFr,by your guide I have make a progressbar plugin which support callback(start,change,end) and and public access methods(get_min,get_max,get_val,get_percent). And I have use it for some days,all of them went ok, but I have confused about these code:

  $.fn.progressbar = (options_or_method) ->
    if methods[options_or_method]
      methods[options_or_method].apply @,Array.prototype.slice.call arguments,1
    else if $.isPlainObject(options_or_method)
      privates['init'].apply @,arguments
    else
      $.error("#{options_or_method} is not defined in progressbar")

I know the @ represent a collection. but for my example if I have many progressbar in a page ,then I call the get_val of the second or the five progressbar,can I get it ?

    get_min:->
      $(@).data('progressbar').min

the above is the function and I can get the value from the corresponding element's data ,but if the @ present a collection how can I get the specifial one ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment