close

Trust Me!! Trust You!!


  • Blog
  • Local Log
  • Tag Cloud
  • Key Log
  • Guestbook
  • RSS Feed
  • Write a Post
  • Admin

혹시 블로그 스킨이 깨져 보이시나요? 최신버전의 Internet Explorer(Windows용), Opera, Firefox를 사용해보세요.

Found 2 article(s) for 'jQuery'.

  1. 2013/06/17 동적 추가 Tab~
  2. 2013/06/14 Query 플러그인 관련 사이트 모음 224

동적 추가 Tab~

웹 프로그래밍
2013/06/17 10:25
 

Tab 1
--------------------------------------------------------------------------------------------------------
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta name="keywords" content="jquery,ui,easy,easyui,web">
 <meta name="description" content="easyui help you build your web page easily!">
 <title>jQuery EasyUI Demo</title>
 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
 <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
 <script>
  function addTab(title, url){
   if ($('#tt').tabs('exists', title)){
    $('#tt').tabs('select', title);
   } else {
    var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
    $('#tt').tabs('add',{
     title:title,
     content:content,
     closable:true
    });
   }
  }
 </script>
</head>
<body>
 <div style="margin-bottom:10px">
  <a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a>
  <a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
  <a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a>
  <a href="#" class="easyui-linkbutton" onclick="addTab('ktvision','http://www.ktvision.co.kr/')">ktvision</a>
 </div>
 <div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
  <div title="Home">
  </div>
 </div>
</body>
</html>

Tab 2
--------------------------------------------------------------------------------------------------------
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Tabs - Simple manipulation</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes ··· y-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/fow/style.css" />
  <link rel="stylesheet" href="/fow/new.css" />
  <style>
  #dialog label, #dialog input { display:block; }
  #dialog label { margin-top: 0.5em; }
  #dialog input, #dialog textarea { width: 95%; }
  #tabs { margin-top: 1em; }
  #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
  #add_tab { cursor: pointer; }
  </style>
  <script>
  $(function() {
    var tabTitle = $( "#tab_title" ),
      tabContent = $( "#tab_content" ),
      tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
      tabCounter = 2;

    //var tabs = $( "#tabs" ).tabs();

 var tabs = $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
    });

    // modal dialog init: custom buttons and a "close" callback reseting the form inside
    var dialog = $( "#dialog" ).dialog({
      autoOpen: false,
      modal: true,
      buttons: {
        Add: function() {
          addTab();
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        form[ 0 ].reset();
      }
    });

    // addTab form: calls addTab function on submit and closes the dialog
    var form = dialog.find( "form" ).submit(function( event ) {
      addTab();
      dialog.dialog( "close" );
      event.preventDefault();
    });

    // actual addTab function: adds new tab using the input from the form above
    function addTab() {
      var label = tabTitle.val() || "Tab " + tabCounter,
        id = "tabs-" + tabCounter,
        li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
        tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";

      tabs.find( ".ui-tabs-nav" ).append( li );
      tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
      tabs.tabs( "refresh" );
      tabCounter++;
    }

    function addTab2() {
   $.ajax({
   type: 'GET',
   url: '/index.jsp',
   //url: '/publish.htm',
   dataType: 'html',
   success: function(html, textStatus) {

         var label = tabTitle.val() || "Tab " + tabCounter,
          id = "tabs-" + tabCounter,
          li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
          tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";

         tabs.find( ".ui-tabs-nav" ).append( li );
         tabs.append( "<div id='" + id + "'><p>" + html + "</p></div>" );
         tabs.tabs( "refresh" );
         tabCounter++;
         $( "#tabs" ).tabs( "option", "active", $( "#tabs li" ).length-1 );

   }
   });
    }

    // addTab button: just opens the dialog
    $( "#add_tab" )
      .button()
      .click(function() {
        addTab2();
      });

    // close icon: removing the tab on click
    tabs.delegate( "span.ui-icon-close", "click", function() {
      var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
      $( "#" + panelId ).remove();
      tabs.tabs( "refresh" );
    });

    tabs.bind( "keyup", function( event ) {
      if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
        var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
        $( "#" + panelId ).remove();
        tabs.tabs( "refresh" );
      }
    });
  });
  </script>
</head>
<body>

<div id="dialog" title="Tab data">
  <form>
    <fieldset class="ui-helper-reset">
      <label for="tab_title">Title</label>
      <input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" />
      <label for="tab_content">Content</label>
      <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea>
    </fieldset>
  </form>
</div>

<button id="add_tab">Add Tab</button>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
</div>
</body>
</html>


이올린에 북마크하기
TAG jQuery, tab, 동적추가, 탭추가
No received trackback. / No comment.

Trackback Address :: http://viper150.cafe24.com/trackback/236

You can also say.

Query 플러그인 관련 사이트 모음 224

웹 프로그래밍
2013/06/14 09:59
 
  1. Lightbox2
  2. colorbox
  3. FancyBox
  4. prettyPhoto
  5. ThickBox
  6. jQuery lightBox plugin
  7. Slimbox
  8. Facebox
  9. NyroModal
  10. Pirobox
  11. FancyZoom meet-jquery
  12. imgBox
  13. IMAGEBOX
  14. PICBOX
  15. CeeBox
  16. TopUp
  17. NotesForLightBox
  18. YoxView
  19. Fancy Zoom
  20. Image Zoom
  21. ZOOMIMAGE
  22. Sexy LightBox
  23. Image Magnify
  24. SuperBox! 


    slide / gallery 

    1. Basic
  25. slideViewer
  26. jFlow
  27. jQuery.flickrGallery
  28. Photo Slider
  29. s3Slider
  30. jqGalScroll
  31. Dynamic Image Gallery
  32. GalleryView
  33. AD Gallery
  34. Moving Boxes
  35. slideViewerPro
  36. Pikachoose
  37. CrossSlide
  38. Apple-style Slideshow Gallery
  39. jqFancyTransitions
  40. Nivo Slider
  41. A Simple jQuery Slideshow
  42. Image Strip
  43. jQuery Blinds
  44. BBC Radio 1 Zoom Tabs
  45. jquery.showcase
  46. jQuery slideView


    2. Unique
  47. SPACEGALLERY
  48. jQuery Cycle Plugin
  49. Slider Gallery
  50. jQuery.popeye
  51. supersized
  52. Beautiful jQuery slide
  53. morphing gallery
  54. ImageFlow
  55. Sliding Image Gallery
  56. Animate Panning Slideshow
  57. Looped Slider
  58. Mosaic Slideshow
  59. Zoomer Gallery
  60. Smooth Div Scroll
  61. Simple Controls Gallery
  62. z-index gallery
  63. Image Cube
  64. Micro Image Gallery
  65. background image slideshow
  66. Flip!
  67. Switch Display
  68. jFancyTile
  69. Gallery Slider Plugin


    3. Contents slider
  70. Easy Image or Content Slider
  71. horinaja
  72. loopedSlider
  73. Slick and Accessible Slideshow
  74. Making a Content Slider with jQuery UI
  75. Content Slider with jQuery
  76. EOGallery
  77. dualSlider
  78. simplesli.de


    4. Multifunction
  79. Galleria
  80. Galleriffic
  81. JQUERY MULTIMEDIA PORTFOLIO
  82. FeaturedContentSlider
  83. Start/Stop Slider
  84. AnythingSlider
  85. COIN SLIDER
  86. jQuery.slideShow({});
  87. aviaslider



    Carousel
  88. prettyGallery
  89. jQuery Image Scroller
  90. Infinite Carousel
  91. Step Carousel Viewer
  92. jCarousel
  93. jCarousel Lite
  94. jQuery.ScrollShow
  95. Agile Carousel
  96. infinite JQuery carousel
  97. Feature Carousel
  98. Tiny Carousel
  99. bxCarousel


    Tooltip
  100. jtip
  101. clueTip
  102. Digg-style post sharing tool
  103. jQuery Popup Bubble
  104. Easiest Tooltip
  105. Simple CSS + Javascript Tooltip with jQuery
  106. Coda Bubble
  107. Sticky Tooltip
  108. BeautyTips
  109. Thumbnail Hover Popup
  110. qTip
  111. tinyTips
  112. MopTip


    Effect
  113. Sliding Boxes
  114. Creating an Image Slider
  115. Image Overlay
  116. Photo Zoom Out Effect
  117. Thumbnail with Zooming Image
  118. Hover Zoom
  119. captify
  120. hover-block-jquery
  121. Greyscale Hover Effect
  122. Hover fading transition
  123. Fade Method
  124. Stunning Sliding Door Effect
  125. Using Opacity to Show Focus
  126. Thumbnail with Fading Caption
  127. jSquares
  128. hoverFade
  129. Fade In-Fade Out


    Loupe
  130. JQZoom
  131. Featured Image Zoomer
  132. Cloud Zoom
  133. Image Power Zoomer v1.1
  134. AnythingZoomer
  135. Loupe and Lightbox
  136. Apple-like Retina Effect
  137. Zoomple


    Menu
  138. Image Rotator with Description
  139. Fancy Thumbnail Hover Effect
  140. Feature List
  141. slidedeck
  142. Content Slider Using jQuery UI
  143. bxGallery
  144. Background Image Navigation
  145. IconDock
  146. Horizontal Tooltips Menu
  147. Realistic Hover Effect
  148. Rolling Rounded Menu
  149. Garage Door Style Menu
  150. Animated Menus
  151. Outside the Box
  152. BubbleUp
  153. AutoSprites
  154. jQuery Dashboard
  155. Smooth Animated Menu
  156. Elastic Thumbnail Menu
  157. megamenu
  158. Spy Effect
  159. quicksand
  160. Simple Image Viewer
  161. Horizontal Accordion


    With css3
  162. polaroid photo viewer with CSS3
  163. CSS3 Lightbox Gallery
  164. Cufonized Fly-out Menu
  165. Slide Down Box Menu
  166. Pretty Simple Content Slider
  167. ShineTime
  168. css3 transition slide
  169. Contextual Slideout Tips
  170. Bubble Navigation
  171. A Fresh Bottom Slide Out Menu
  172. Apple-Style Icon Slide Out Navigation
  173. Little Boxes Menu
  174. Slide Out Navigation
  175. Interactive Picture
  176. Thumbnails Navigation Gallery
  177. Sliding Panel Photo Wall Gallery
  178. Photo Desk
  179. Beautiful Photo Stack Gallery
  180. Image Highlighting and Preview
  181. Kitchen Table


    Others
  182. PANORAMA VIEWER
  183. VIRTUAL TOUR
  184. Create a Resizable Image Grid
  185. imgAreaSelect
  186. Jcrop
  187. gzoom
  188. Image Upload And Crop
  189. PhotoShoot
  190. Image Flip
  191. jQuery Corner
  192. jQSlickWrap
  193. Image Reflection
  194. jcoverflip
  195. ANIMATED INNERFADE
  196. jThumb
  197. It’s a Rainbow!
  198. Page Peel Effect
  199. jQuery-Notes
  200. Filter Image View
  201. Before/After
  202. maphilight documentation
  203. Plupload
  204. puffing-smoke-effect
  205. Animated Postcard
  206. scrolling background effect
  207. funky-parallax-background-effect
  208. Mouse Movements With JParallax
  209. Shadow Motion Effect
  210. Sponsor Flip Wall
  211. Spritely
  212. jQuery Robot
  213. Drag to Share
  214. Animate Curtains Opening
  215. Filling Up Using jQuery
  216. Full Size Background Image
  217. Lazy loader
  218. jQuery Canimate
  219. Sudo Slider
  220. imgCenter
  221. The Sexy Curls
  222. Animated Landscape Header
  223. Flickr-Style Photo Tagging
  224. QuickFlip
이올린에 북마크하기
TAG jQuery, jQuery plugin, plugin, 제이퀴리
No received trackback. / No comment.

Trackback Address :: http://viper150.cafe24.com/trackback/234

You can also say.

Prev 1 Next
블로그 이미지
이것저것 불펌금지도 퍼다가 담습니다. 외부에 비공개된 페이지 입니다. By. 어른왕자

카테고리

  • 전체 (298)
    • 사는 이야기 (115)
    • 웹 프로그래밍 (102)
    • App 프로그래밍 (22)
    • IT 뉴스&기타 (22)
    • 박한별 (4)
    • 역사&기타지식 (9)

태그목록

  • 전업남편
  • java.util.Map
  • 결혼
  • 여성
  • 만화
  • 소녀시대
  • 휴대폰
  • 의자
  • 방화벽
  • getRealPath
  • Pop
  • 고구려
  • 제프딕슨
  • Billy Joel
  • 생산성
  • substr
  • 팝
  • 탕평책
  • 미국
  • 붕당
  • NWS
  • hiddenmenu
  • 아이유착각
  • BOA
  • RequestMapping
  • C Left
  • 욕심
  • XSS
  • 1.6
  • 관상

최근에 올라온 글

  • 보험사의 조정신청 대응방법.
  • 어느 천재의 앞선 시선.
  • [병맛더빙] 누구게..... (1)
  • 韓경제 `회색 코뿔소` 상황...
  • SVN Connector 설치 URL.
  • 군대를 가지 않는 서울대생.
  • “운은 하늘의 귀여움 받는...
  • 목장에서 알바하다가 캐스...
  • [펌]믿고 거르는 관상.
  • 하루에 1세트씩 하면 좋다...

최근에 달린 댓글

  • <p><img src="https://i.imgur... 브레드 01/22
  • <p><img src="https://i.imgur... 브레드 01/22
  • <p><img src="https://i.imgur... 브레드 01/22
  • <p><img src="https://i.imgur... 브레드 01/22
  • <p><img src="https://i.imgur... 브레드 01/22

최근에 받은 트랙백

  • công ty may đồng phục. công ty may đồng phục 01/08
  • Israelnightclub`s recent blo... Israelnightclub`s recent blo.. 01/06
  • Suggested Browsing. Suggested Browsing 01/06
  • similar site. similar site 01/06
  • לאתר הבית שלנו. לאתר הבית שלנו 01/06

글 보관함

  • 2019/03 (1)
  • 2018/12 (1)
  • 2018/09 (1)
  • 2018/08 (1)
  • 2018/02 (1)

달력

«   2021/01   »
일 월 화 수 목 금 토
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            

링크

  • Total : 261975
  • Today : 8
  • Yesterday : 42
Tattertools
Eolin
rss

어른왕자's blog is powered byTattertools1.1.2.2 : Animato