`
全冠清
  • 浏览: 51654 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

山寨表格组件

阅读更多


  • 大小: 123.9 KB
分享到：
| [jquery plugin]http轮询
评论
6 楼 全冠清 2013-12-12   
inputDom.effect('highlight', {
                color: '#900'
            }, 500, function() {
                inputDom.effect('highlight', {
                    color: '#900'
                }, 500)
            }).focus()
5 楼 全冠清 2013-09-10  
jsonp
jsonp = (url)->  
  _href = window.location.href  
  if _href.indexOf('https://') is 0  
    url = url.replace('http://','https://')  
  methodName = 'jsonp' + Math.random().toString(36).substring(2)  
  data = null  
  callbackChain=[]  
  
  window[methodName] = (callbackData)->  
    data=callbackData  
    for m in callbackChain  
      m(data)  
    return  
  url=url.replace('callback=?','callback='+methodName)    
  script = document.createElement( 'script' )  
  script.setAttribute( 'src', url )  
  script.setAttribute( 'charset', "utf-8" )  
  document.getElementsByTagName( 'head' )[0].appendChild(script)  
  return {  
    done:(fun)->  
      if(data)  
        fun(data)  
      callbackChain.push(fun)  
      return    
  }
4 楼 全冠清 2013-09-05   
var List=function(options){
		var defaults={data:{},getData:function(){return {}},async:true,fixPageParam:$.noop}
		var setting = $.extend(true, defaults, options)
		var self =this;
		self.itemList=[]
		self.container=$(setting.container)
		self.expData={}
		var currentPage=0
		self.getSetting=function(){
			return setting
		}
		self.load=function(init){
			if(setting.beforeLoad){
				setting.beforeLoad()
			}
			var param=$.extend(true,{},setting.data,self.expData,setting.getData())
			if(init){
				param['init']=true
			}
			if(setting.page){
				param.pos=self.page.pos
				param.range=self.page.range
				setting.fixPageParam(param,self.page)
			}
			if(setting.testData){
				callBack(setting.testData)
			}else{
				$.ajax({
					url:setting.url,
					async:setting.async,
					cache:false,
	                dataType: "json",
					data:param
				}).done(callBack)
			}
			function callBack(data){
					if(setting.onLoad){
						setting.onLoad(data)
					}
					self.itemList=[]
					self.container.empty()
					if(init){
							self.total=data.totalItem
							if(setting.page){
								self.page.flush()
							}
					}	
					$.each($.isArray(data)?data:data.stores,function(i,j){
						var item=new setting.Model(i,j)
						item.pos=i
						self.itemList.push(item)
						self.container.append(item.dom)
					})
					if(setting.afterLoad){
						setting.afterLoad(self)
					}
				}
		}
		self.flush=function(pageNum){
			self.page.init(pageNum)
			self.load(true)
		}
		self.reset=function(){
			self.page.first=true
			self.load(true)
		}
		var Page=function(){
			var page=this
			page.init=function(cPage){
				page.first=true
				currentPage=cPage||0
				if(setting.page){
					this.pos=setting.page.pos||0;
				    this.range=setting.rowList||20
				};
			}
			page.init()
			page.flush=function(cPage){
				       if(cPage){
				       	currentPage = cPage
				       }else{
				       	currentPage = 0
				       }
				 	   var totalPage=Math.ceil(parseInt(self.total) / (setting.rowList || 20))
				 	    self.totalPage = totalPage
				 	    if((totalPage-1) <= currentPage){
							currentPage=totalPage-1
						}
						if(parseInt(self.total) > (setting.rowList || 20)){
							$(setting['page']['container']).pagination(totalPage, {
								current_page: currentPage,
								items_per_page: 1,
								num_edge_entries: 2,
								num_display_entries: 5,
								prev_text: "上一页",
								next_text: "下一页",
								callback: function(i){
									currentPage=i
									if (!page.first) {
										if(setting.onPage){
											setting.onPage(i)
										}
										page.pos = (i) * (setting.rowList || 20)// + 1
										self.load()
									}
									page.first=false
								}
							})
						}else{
							$(setting['page']['container']).empty()
						}
					}
			
		}
		self.page=new Page()
		self.load(true)
}
3 楼 全冠清 2013-08-14   
scrollable=(opts)->
  defaults={vertical:false}
  setting={}
  result={}
  (->(setting[x]=item for x,item of defaults);return)()
  (->(setting[x]=item for x,item of opts);return)()
  if setting.vertical
    pDim = 'top'
    pSize = setting.container.offsetHeight
  else
    pDim = 'left'
    pSize = setting.container.offsetWidth
  operateDom = setting.container.children[0]
  animate = new Animate()

  index=0
  currentVal=0
  targetVal=0

  animate.step = (progress)->
    distance = targetVal - currentVal
    operateDom.style[pDim] =  - (currentVal + distance * progress) + 'px'
    return
  animate.complete = ()-> 
    currentVal = targetVal
    # operateDom.style[pDim] =  -currentVal + 'px'
    return
  result.seekTo = (i)->
    animate.stop()
    targetVal = i * pSize
    animate.start()
    index = i
    if setting.onSeek
      setting.onSeek()  
    return
  result.onSeek = (fun)->
    setting.onSeek=fun
    return
  result.getIndex = ()->
    index
  result


window.scrollable = scrollable
2 楼 全冠清 2013-08-14   
#coffeescript
class Animate
  constructor:(options={})->
    @options = options
    options.duration = options.duration or 300
    self = this
    self.easing =
      swing: (p, n, firstNum, diff) ->
        ((-Math.cos(p * Math.PI) / 2) + 0.5) * diff + firstNum

      linear: (p, n, firstNum, diff) ->
        firstNum + diff * p
  start : ->
    options=@options
    self=this
    self.startTime = +new Date
    self.interval = setInterval(->
      action = self.step or option.step
      t = +new Date
      n = t - self.startTime
      if n < options.duration
        self.state = n / options.duration
        self.pos = self.easing[options.easing or "swing"](self.state, n, 0, 1, options.duration)
        action self.pos
      else
        clearInterval self.interval 
        # when open new tab the interval will seted to 1000ms in chrome and firefox  
        action 1
        complete = self.complete or options.complete
        complete()  if complete
      return
    , 13)
    return

  stop : ->
    options=@options
    self=this
    clearInterval self.interval if self.interval
    onStop = self.onStop or options.onStop
    onStop() if onStop
    return
isIE = /msie/i.test(navigator.userAgent)
traverseChildren = (elem)->
    pushAll = (elemArray) ->
      q.push item for item in elemArray
    children = [];
    q = [];
    q.push(elem);
    while q.length > 0
      elem = q.pop();
      children.push(elem);
      pushAll(elem.children);
    return children;
mouseoutEvent = (event,dom,callback)->
    elem = event.toElement || event.relatedTarget
    list = traverseChildren(dom)
    if elem in list
      return;
    callback()
    return


appendEvent = (dom, event, fun) ->  
    if isIE
        dom.attachEvent("on" + event, fun)  
    else  
        dom.addEventListener(event, fun, false)
    return

hasClass = (ele,cls)->
  if not ele
    return  
  return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'))
addClass = (ele,cls)->
  if not ele
    return 
  if not hasClass(ele,cls) then ele.className += " "+cls
  return 
removeClass = (ele,cls)->
  if not ele
    return  
  if hasClass(ele,cls)
      reg = new RegExp('(\\s|^)'+cls+'(\\s|$)')
      ele.className=ele.className.replace(reg,' ')
  return
getDomIndex = (e)->
  i=0
  while e.previousSibling
    e=e.previousSibling
    if(e.nodeType is 1)
      i=i+1    
  return i

jsonp = (url)->
  _href = window.location.href
  if _href.indexOf('https://') is 0
    url = url.replace('http://','https://')
  methodName = 'jsonp' + Math.random().toString(36).substring(2)
  data = null
  callbackChain=[]

  window[methodName] = (callbackData)->
    data=callbackData
    for m in callbackChain
      m(data)
    return
  url=url.replace('callback=?','callback='+methodName)  
  script = document.createElement( 'script' )
  script.setAttribute( 'src', url )
  script.setAttribute( 'charset', "utf-8" )
  document.getElementsByTagName( 'head' )[0].appendChild(script)
  return {
    done:(fun)->
      if(data)
        fun(data)
      callbackChain.push(fun)
      return  
  }


window.Animate = Animate
window.isIE = isIE
window.traverseChildren = traverseChildren
window.mouseoutEvent = mouseoutEvent
window.appendEvent = appendEvent
window.hasClass = hasClass
window.addClass = addClass
window.removeClass = removeClass
window.getDomIndex = getDomIndex
window.jsonp = jsonp
1 楼 全冠清 2013-07-16   
var List=function(options){
		var defaults={data:{},getData:function(){return {}},async:true,fixPageParam:$.noop}
		var setting = $.extend(true, defaults, options)
		var self =this;
		self.itemList=[]
		self.container=$(setting.container)
		self.expData={}
		var currentPage=0
		self.getSetting=function(){
			return setting
		}
		self.load=function(init){
			if(setting.beforeLoad){
				setting.beforeLoad()
			}
			var param=$.extend(true,{},setting.data,self.expData,setting.getData())
			if(init){
				param['init']=true
			}
			if(setting.page){
				param.pos=self.page.pos
				param.range=self.page.range
				setting.fixPageParam(param,self.page)
			}
			if(setting.testData){
				callBack(setting.testData)
			}else{
				$.ajax({
					url:setting.url,
					async:setting.async,
					cache:false,
	                dataType: "json",
					data:param
				}).done(callBack)
			}
			function callBack(data){
					if(setting.onLoad){
						setting.onLoad(data)
					}
					self.itemList=[]
					self.container.empty()
					if(init){
							self.total=data.totalItem
							if(setting.page){
								self.page.flush()
							}
					}	
					$.each($.isArray(data)?data:data.stores,function(i,j){
						var item=new setting.Model(i,j)
						item.pos=i
						self.itemList.push(item)
						self.container.append(item.dom)
					})
					if(setting.afterLoad){
						setting.afterLoad(self)
					}
				}
		}
		self.flush=function(){
			self.page.init()
			self.load(true)
		}
		self.reset=function(){
			self.page.first=true
			self.load(true)
		}
		var Page=function(){
			var page=this
			page.init=function(){
				page.first=true
				currentPage=0
				if(setting.page){
					this.pos=setting.page.pos||0;
				    this.range=setting.rowList||20
				};
			}
			page.init()
			page.flush=(function(cPage){
				 return function(){
				 	   var totalPage=Math.ceil(parseInt(self.total) / (setting.rowList || 20))
				 	    if((totalPage-1) <= currentPage){
							currentPage=totalPage-1
						}
						if(parseInt(self.total) > (setting.rowList || 20)){
							$(setting['page']['container']).pagination(totalPage, {
								current_page: currentPage,
								items_per_page: 1,
								num_edge_entries: 2,
								num_display_entries: 5,
								prev_text: "上一页",
								next_text: "下一页",
								callback: function(i){
									currentPage=i
									if (!page.first) {
										if(setting.onPage){
											setting.onPage()
										}
										page.pos = (i) * (setting.rowList || 20)// + 1
										self.load()
									}
									page.first=false
								}
							})
						}else{
							$(setting['page']['container']).empty()
						}
					}
			})();
		}
		self.page=new Page()
		self.load(true)
}


function MadeList(dateRange){
        $.template('t1', '<tr>' +
        '<td rowspan="2">' +
        '${state_date}' +
        '</td>' +
        '<td>' +
        '商品推荐栏' +
        '</td>' +
        '<td>${goods_uv}</td>' +
        '<td>${goods_click_uv}</td>' +
        '<td>${goods_click_cnt}</td>' +
        '<td>${goods_income}</td>' +
        '<td rowspan="2">${total_income}</td>	' +
        '</tr>' +
        '<tr>' +
        '<td>' +
        '电商频道' +
        '</td>' +
        '<td>${waterfall_uv}</td>' +
        '<td>${waterfall_click_uv}</td>' +
        '<td>${waterfall_click_cnt}</td>' +
        '<td>${waterfall_income}</td>' +
        '</tr>')
        var setting = {
            container: 'table.grid tbody',
            rowList: 10,
            url:'../../DataAnalysis/stat/!promo.action?__='+(+new Date),
            fixPageParam:function(param,p){
            	param.limit=param.pos
            	delete param.pos
            },
            getData: function(){
                return {
                    start: dateRange.getStart(),//setting.global.dateRange.getStart(),
                    end: dateRange.getEnd()
                }
            },
            Model: function(i, item){
                var self = this
                
                item.goods_uv=window.BfdWidget.format.int(item.goods_uv)
                item.goods_click_uv=window.BfdWidget.format.int(item.goods_click_uv)
                item.goods_click_cnt=window.BfdWidget.format.int(item.goods_click_cnt)
                
                item.goods_income=window.BfdWidget.format.money(item.goods_income)
                item.total_income=window.BfdWidget.format.money(item.total_income)
                
                item.waterfall_uv=window.BfdWidget.format.int(item.waterfall_uv)
                item.waterfall_click_uv=window.BfdWidget.format.int(item.waterfall_click_uv)
                item.waterfall_click_cnt=window.BfdWidget.format.int(item.waterfall_click_cnt)
                
                item.waterfall_income=window.BfdWidget.format.money(item.waterfall_income)
                
                self.dom = $.tmpl('t1', item)
                //							            i % 2 == 0 ? null : self.dom.addClass('color')
                //										self.dom.data('item',item)
            },
//            testData: {
//                "stores": [{}, {}, {}, {}],
//                "totalItem": 50
//            },
            page: {
                container: '#grid > ul'
            }
        }
        var list = new List(setting)
		dateRange.addEventListener(function(){
			list.reset()
		})
}


function madeList(index,opts){
		var result
		var setting={
							        container: '.section:eq('+index+') > table > tbody',
									rowList:10,
									beforeLoad:function(){
										$.ifmWidget("loading",{
								    		title:'加载中',
								    		content:'加载中...'
										})
										$('.section:eq('+index+') > table  th input:checkbox').prop('checked',false)
									},
									afterLoad:function(){ 
										$.ifmWidget("unloading")
									},
							        Model: function(i, item){
							            var self = this
							            var url = item.url
							            item.img_url=item.img_url+'?'+(+new Date)
							            item.uri = (url.indexOf("?") > 0 && url.indexOf("?") < url.indexOf("/", 7)) ? url.substring(url.indexOf("?") + 1, url.length) : url.substring(url.indexOf("/", 7), url.length)
							            self.dom = $.tmpl('t'+index, item)
							            i % 2 == 0 ? null : self.dom.addClass('color')
										self.dom.data('item',item)
							        },
							        page: {
							            container: '.section:eq('+index+') > ul'
							        },
									onPage:function(){
										$('.section:eq('+index+') > table  th:eq(0) :checkbox').attr('checked',false)
									}
							    }
		result= new List($.extend(setting,opts))
		return result
	}
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Dsure-HTML5网站,前端开发框架

    简介： ...网页是一门技术，更讲究艺术，没有绝对的山寨与抄袭，更多的，是不断的探索学习和借鉴，国内的设计应该有更多更适应国内需求的探索，因此有了dsure这个CSS开发框架，喜欢的童鞋尽情下载。

    JAVA上百实例源码以及开源项目

    　[TablePanel.java] 日历表格面板 　[ConfigLine.java] 控制条类 　[RoundBox.java] 限定选择控件 　[MonthMaker.java] 月份表算法类 　[Pallet.java] 调色板，统一配色类 Java扫雷源码 Java生成自定义控件...

    JAVA上百实例源码以及开源项目源代码

    　[TablePanel.java] 日历表格面板 　[ConfigLine.java] 控制条类 　[RoundBox.java] 限定选择控件 　[MonthMaker.java] 月份表算法类 　[Pallet.java] 调色板，统一配色类 Java扫雷源码 Java生成自定义控件...

    java源码包---java 源码 大量 实例

    　[TablePanel.java] 日历表格面板 　[ConfigLine.java] 控制条类 　[RoundBox.java] 限定选择控件 　[MonthMaker.java] 月份表算法类 　[Pallet.java] 调色板，统一配色类 Java扫雷源码 Java生成自定义控件...

    java源码包2

    　[TablePanel.java] 日历表格面板 　[ConfigLine.java] 控制条类 　[RoundBox.java] 限定选择控件 　[MonthMaker.java] 月份表算法类 　[Pallet.java] 调色板，统一配色类 Java扫雷源码 Java生成自定义控件源...

    java源码包3

    　[TablePanel.java] 日历表格面板 　[ConfigLine.java] 控制条类 　[RoundBox.java] 限定选择控件 　[MonthMaker.java] 月份表算法类 　[Pallet.java] 调色板，统一配色类 Java扫雷源码 Java生成自定义控件源...

    java源码包4

    　[TablePanel.java] 日历表格面板 　[ConfigLine.java] 控制条类 　[RoundBox.java] 限定选择控件 　[MonthMaker.java] 月份表算法类 　[Pallet.java] 调色板，统一配色类 Java扫雷源码 Java生成自定义控件源...

    成百上千个Java 源码DEMO 4(1-4是独立压缩包)

    Java编写的山寨QQ，多人聊天+用户在线 21个目标文件 摘要:JAVA源码,媒体网络,山寨QQ,Java聊天程序 Java编写的山寨QQ，多人聊天+用户在线，程序分服务端和客户端，典型C/S结构， 当用户发送第一次请求的时候，验证...

    成百上千个Java 源码DEMO 3(1-4是独立压缩包)

    Java编写的山寨QQ，多人聊天+用户在线 21个目标文件 摘要:JAVA源码,媒体网络,山寨QQ,Java聊天程序 Java编写的山寨QQ，多人聊天+用户在线，程序分服务端和客户端，典型C/S结构， 当用户发送第一次请求的时候，验证...

Magicbox
Global site tag (gtag.js) - Google Analytics