ieでもhtml5要素をclone()する。

GeckoTang

2010-09-07 14:19:47

License: MIT License

Fork: 0

Fav: 0

View: 1285

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 54 lines
HTML 15 lines
CSS 106 lines

ieでhtml5要素をjQueryのclone出来ないのをなんとかしてみた。
残務としてはdata,eventのコピー・・・

追記----
jQueryの内部関数cloneCopyEventを利用することでdata,eventをコピーできました。

ieでもhtml5要素をclone()する。
jQuery v1.4.2

$(function(){
  $.data($("#sec1")[0],'hoge','fugafuga');
  $("#sec1").click(function(){
    alert("$(this).attr('id') : "+$(this).attr('id')+'\n'+"$.data(this,'hoge') : "+$.data(this,'hoge'));
  });
  //イベントもコピーする
  var cNode = $("#sec1").clone(true);
  var p = $('p',cNode);
  p.text(p.text()+'（イベントをコピーする）');
  $(cNode)
    .attr("id","sec3")
    .css({"border":"1px solid red"});
  $("body").append(cNode);
  //イベントはコピーしない
  var cNode2 = $("#sec1").clone();
  var p2 = $('p',cNode2);
  p2.text(p2.text()+'（イベントをコピーしない）');
  $(cNode2)
    .attr("id","sec4")
    .css({"border":"1px solid blue"});
  $("body").append(cNode2);
});
if(undefined !== window.ActiveXObject){
  $.fn.clone = function(events){
    //内部関数cloneCopyEventを利用
    function cloneCopyEvent(orig,ret){
      var i = 0;
      ret.each(function() {
        if ( this.nodeName !== (orig[i] && orig[i].nodeName) ) {
          return;
        }
        var oldData = jQuery.data( orig[i++] ), curData = jQuery.data( this, oldData ), events = oldData && oldData.events;
        if ( events ) {
          delete curData.handle;
          curData.events = {};
          for ( var type in events ) {
            for ( var handler in events[ type ] ) {
              jQuery.event.add( this, type, events[ type ][ handler ], events[ type ][ handler ].data );
            }
          }
        }
      });
    }
    var clone,$div;
    $div = $("<div/>").appendTo("body");
    $div[0].innerHTML = this[0].outerHTML;
    clone = $div.children().unwrap();
    clone = $(clone);
    if(events)cloneCopyEvent(this,clone);
    return $(clone);
  };
}

ieでもhtml5要素をclone()する。

/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
body {
  line-height:1;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  display:block;
}

nav ul {
  list-style:none;
}

blockquote, q {
  quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}

a {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}

mark {
  background-color:#ff9;
  color:#000;
  font-style:italic;
  font-weight:bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom:1px dotted #000;
  cursor:help;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
  vertical-align:middle;
}

ieでhtml5要素をjQueryのclone出来ないのをなんとかしてみた。残務としてはdata,eventのコピー・・・追記---- jQueryの内部関数cloneCopyEventを利用することでdata,eventをコピーできました。$(function(){ $.data($("#sec1")[0],'hoge','fugafuga'); $("#sec1").click(function(){ alert("$(this).attr('id') : "+$(this).attr('id')+'\n'+"$.data(this,'hoge') : "+$.data(this,'hoge')); }); //イベントもコピーする var cNode = $("#sec1").clone(true); var p = $('p',cNode); p.text(p.text()+'（イベントをコピーする）'); $(cNode) .attr("id","sec3") .css({"border":"1px solid red"}); $("body").append(cNode); //イベントはコピーしない var cNode2 = $("#sec1").clone(); var p2 = $('p',cNode2); p2.text(p2.text()+'（イベントをコピーしない）'); $(cNode2) .attr("id","sec4") .css({"border":"1px solid blue"}); $("body").append(cNode2); }); if(undefined !== window.ActiveXObject){ $.fn.clone = function(events){ //内部関数cloneCopyEventを利用 function cloneCopyEvent(orig,ret){ var i = 0; ret.each(function() { if ( this.nodeName !== (orig[i] && orig[i].nodeName) ) { return; } var oldData = jQuery.data( orig[i++] ), curData = jQuery.data( this, oldData ), events = oldData && oldData.events; if ( events ) { delete curData.handle; curData.events = {}; for ( var type in events ) { for ( var handler in events[ type ] ) { jQuery.event.add( this, type, events[ type ][ handler ], events[ type ][ handler ].data ); } } } }); } var clone,$div; $div = $("<div/>").appendTo("body"); $div[0].innerHTML = this[0].outerHTML; clone = $div.children().unwrap(); clone = $(clone); if(events)cloneCopyEvent(this,clone); return $(clone); }; } <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <section id="sec1"> <article> <div class="hoge"> <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p> </div> </article> </section> <section id="sec2"> <article> <div class="hoge"> <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p> </div> </article> </section>/* html5doctor.com Reset Stylesheet v1.4 2009-07-27 Author: Richard Clark - http://richclarkdesign.com */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; } table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; }

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/hi71/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/GeckoTang/hi71" title="ieでもhtml5要素をclone()する。">ieでもhtml5要素をclone()する。 - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip

ieでもhtml5要素をclone()する。

tags

Tweet

twitter

Tags