最近、自分の中でブームな言語。

ソース置き場

ajax

 $.ajax
   type: 'POST'
     url: 'URL'
     contentType: 'application/json'
     dataType: "json"
     data:  JSON.stringify {all: data}
     success: (data) ->
       console.log 'success'
     error: (XMLHttpRequest, textStatus, errorThrown) ->
       switch XMLHttpRequest.status
         when 404
           console.log 'Err - 404'
         when 500
           console.log 'Err - 500'

confirm

main.coffee [CoffeeScript 版]

 $.confirm
   'title'   : 'プロジェクトの登録',
   'message' : 'APIでエラー発生',
   'buttons' :
     'はい (Y)':
       'class' : 'blue',
       'action': ->
         alert '【はい】を選択しました。'
       'keyup' :  (e) ->
         # Enter or ESC
         if e.keyCode is 13 or e.keyCode is 27
           return true
         else
           return false
     'いいえ (N)' :
       'class' : 'glay',
       'action': ->
         alert '【いいえ】を選択しました。'
       'keyup' :  (e) ->
         # Enter or ESC
         if e.keyCode is 13 or e.keyCode is 27
           return true
         else
           return false

main.coffee [JavaScript 版]

 $.confirm({
   'title'   : 'タイトル',
   'message' : 'メッセージ!HTMLタグも使用可能',
   'buttons' : {
     'はい (Y)' : {
       'class' : 'blue',
       'action': function(){
         alert('【はい】を選択しました。');
       },
       'keyup': function(e) {
         // y or Enter
         if (e.keyCode === 89 || e.keyCode === 13) {
           return true;
         } else {
           return false;
         }
       }
     },
     'いいえ (N)' : {
       'class' : 'gray',
       'action': function(){
         alert('【いいえ】を選択しました。');
       },
       'keyup': function(e) {
         // n or ESC
         if (e.keyCode === 78 || e.keyCode === 27) {
           return true;
         } else {
           return false;
         }
       }
     }
   }
 });

jquery.confirm.js.coffee

 $ ->
   $.confirm = (params) ->
     # confirm が表示されている場合は消えるまで待機
     if $('#confirmOverlay').length
       setTimeout ->
         $.confirm params
       , 500
       return false
 
     # ボタンとイベントの設定
     buttonHTML = ''
     $.each params.buttons, (name,obj) ->
       # ボタンの設定
       buttonHTML += '<a href="#" class="button '+obj['class']+'">'+name+'<span></span></a>'
       # イベントの設定
       if !obj.action
         obj.action = -> return
       if !obj.keyup
         obj.keyup = -> return
 
     # confirm の設定
     markup = [
       '<div id="confirmOverlay">',
       '<div id="confirmBox">',
       '<h1>',params.title,'</h1>',
       '<p>',params.message,'</p>',
       '<div id="confirmButtons">',
       buttonHTML,
       '</div></div></div>'
     ].join('');
     $(markup).hide().appendTo('body').fadeIn()
 
     # ボタンオブジェクト
     buttons = $('#confirmBox .button')
 
     # ボタン数のカウント
     i = 0
 
     # 実行済フラグ
     doneFlag = false
 
     $.each params.buttons, (name,obj) ->
       # クリック時のイベント
       clickEvent = ->
         unless doneFlag
           doneFlag = true
           $.confirm.action( obj )
 
       # 各ボタンのクリックイベント設定
       buttons.eq(i++).click ->
         clickEvent()
         return false
 
       # キーアップ時のイベント
       keyupEvent = (e) ->
         unless doneFlag
           if obj.keyup(e)
             doneFlag = true
             $.confirm.action( obj )
           else
             $(window).one 'keyup', keyupEvent
 
       # キーアップイベント設定
       $(window).one 'keyup', keyupEvent
 
     $.confirm.action = (obj) ->
       $('#confirmOverlay').fadeOut ->
         $(this).remove()
         obj.action()
 
   return

jquery.confirm.css

 #confirmOverlay{
   width:100%;
   height:100%;
   position:fixed;
   top:0;
   left:0;
   background:url('jquery.confirm/ie.png');
   background: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) repeat-x rgba(11,11,11,0.2);
   background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6))) repeat-x rgba(11,11,11,0.2);
   z-index:100000;
 }
 
 #confirmBox{
   background:url('jquery.confirm/body_bg.jpg') repeat-x left bottom #e5e5e5;
   width:460px;
   position:fixed;
   left:50%;
   top:50%;
   margin:-130px 0 0 -230px;
   border: 1px solid rgba(33, 33, 33, 0.6);
   
   -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
   -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
   box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
 }
 
 #confirmBox h1,
 #confirmBox p{
   font:26px/1 'Cuprum','Lucida Sans Unicode', 'Lucida Grande', sans-serif;
   background:url('jquery.confirm/header_bg.jpg') repeat-x left bottom #f5f5f5;
   padding: 18px 25px;
   text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
   color:#666;
 }
 
 #confirmBox h1{
   letter-spacing:0.3px;
   color:#888;
 }
 
 #confirmBox p{
   background:none;
   font-size:16px;
   line-height:1.4;
   padding-top: 35px;
 }
 
 #confirmButtons{
   padding:15px 0 25px;
   text-align:center;
 }
 
 #confirmBox .button{
   display:inline-block;
   background:url('jquery.confirm/buttons.png') no-repeat;
   color:white;
   position:relative;
   height: 33px;
   
   font:17px/33px 'Cuprum','Lucida Sans Unicode', 'Lucida Grande', sans-serif;
   
   margin-right: 15px;
   padding: 0 35px 0 40px;
   text-decoration:none;
   border:none;
 }
 
 #confirmBox .button:last-child{
   margin-right:0;
 }
 
 #confirmBox .button span{
   position:absolute;
   top:0;
   right:-5px;
   background:url('jquery.confirm/buttons.png') no-repeat;
   width:5px;
   height:33px
 }
 
 #confirmBox .blue{
   background-position:left top;
   text-shadow:1px 1px 0 #5889a2;
 }
 
 #confirmBox .blue span{
   background-position:-195px 0;
 }
 
 #confirmBox .blue:hover{
   background-position:left bottom;
 }
 
 #confirmBox .blue:hover span{
   background-position:-195px bottom;
 }
 
 #confirmBox .gray{
   background-position:-200px top;text-shadow:1px 1px 0 #707070;
 }
 
 #confirmBox .gray span{
   background-position:-395px 0;
 }
 
 #confirmBox .gray:hover{
   background-position:-200px bottom;
 }
 
 #confirmBox .gray:hover span{
   background-position:-395px bottom;
 }

画像

jquery.confirm のダウンロード

ツールチップ

main.js

 # プロジェクト画像のツールチップ設定
 $('オブジェクト').easyToolTip()

easyToolTip?.coffee

 # ==================================================
 # ツールチップ
 # ==================================================
 # alt or title を html 表示させているので注意!
 $.fn.easyToolTip = (options) ->
   # default configuration properties
   defaults =
     xOffset: 10
     yOffset: 25
     tooltipId: 'easyToolTip'
     clickRemove: false
     content: ''
     useElement: ''
   
   options = $.extend(defaults, options)
   content = undefined
   
   for obj in $(this)
     self = $(obj)
     title = self.attr('title') or self.attr('alt')
     self.hover ((e) ->
       self = $(this)
       title = self.attr('title') or self.attr('alt')
       content = (if (options.content isnt '') then options.content else title)
       content = (if (options.useElement isnt '') then $('#' + options.useElement).html() else content)
       self.attr 'title', ''
       self.attr 'alt', ''
       if content isnt '' and content isnt `undefined`
         $('body').append '<div id="' + options.tooltipId + '">' + content + '</div>'
         $("#" + options.tooltipId)
           .css('position', 'absolute')
           .css('top', (e.pageY - options.yOffset) + 'px')
           .css('left', (e.pageX + options.xOffset) + 'px')
           .css('display', 'none')
           .css('z-index', 0x7FFFFFFF)
           .fadeIn 'fast'
     ), ->
       $('#' + options.tooltipId).remove()
       self.attr 'title', title
     
     self.mousemove (e) ->
       $('#' + options.tooltipId).css('top', (e.pageY - options.yOffset) + 'px').css 'left', (e.pageX + options.xOffset) + 'px'
     
     if options.clickRemove
       self.mousedown (e) ->
         $('#' + options.tooltipId).remove()
         self.attr 'title', title

easyToolTip?.css

 // ツールチップ
 #easyToolTip{
   padding: 5px;
   border: 1px solid #ccc;
   color: #fff;
   background: #93B80A;
   font-size: 14px;
   white-space: nowrap;
   word-wrap: break-word;
 }

メモ

$ ->

添付ファイル: filejquery.confirm.zip 241件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-01-16 (土) 18:03:29 (435d)