loading・・・
curryQ-UI
fn$.swap：ブロックの入れ替え

この文章はダミーです。春はあけぼの。やうやうしろくなりゆく山ぎは、すこしあかりて、紫だちたる雲のほそくたなびきたる。

この文章はダミーです。秋は夕暮れ。夕日のさして、山の端いと近くなりたるに、烏の、寝所へ行くとて、三つ四つ、二つ三つなど、飛び急ぐさへ、あはれなり。まいて、雁などのつらねたるが、いと小さく見ゆるは、いとをかし。日入りはてて、風の音、虫の音など、はた、言ふべきにあらず。

この文章はダミーです。夏は夜。月の頃はさらなり、闇もなほ、蛍のおほく飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光りて行くも、をかし。雨など降るも、をかし。
//sticy menu
  /*   カードのスワップ  */
  fn$.swap({
    class_card: 'cury-block',
    class_up: 'moveup',
    class_down: 'movedown',
  })(document.getElementById('chngbox'));
！Newマーク表示お知らせ等
//CODE
fn$.marq()(ターゲット)::はみ出たら ー＞ 自動マーキー

親ボックスの幅を変えて確認！流れる文字が　流れてゆくよ～

河野俊郎酒店

/宮崎県宮崎市清武町にて昭和4年（1928年）創業。美味しい日本酒・焼酎・ワインを求めて全国の蔵元へ。こだわりの逸品をお届けします。

//sticy menu
fn$.marq()(document.getElementById('marq'));
fn$.acc()：アコーディオン化
  • 日本酒
    • ホゲホゲ
    • ホゲホゲ
    • ホゲホゲ
    • ホゲホゲ
    • ホゲホゲ
  • 焼酎
    • ホゲホゲ
    • ホゲホゲ
    • ホゲホゲ
    • ホゲホゲ
    • ホゲホゲ
  • ワイン
    • ホゲホゲ
    • ホゲホゲ
    • ホゲホゲ
    • ホゲホゲ
    • ホゲホゲ
  • ホゲホゲ
    • ホゲホゲ
    • ホゲホゲ
    • ホゲホゲ
    • ホゲホゲ
    • ホゲホゲ
  • ホゲホゲ
    • ホゲホゲ
    • ホゲホゲ
    • ホゲホゲ
    • ホゲホゲ
    • ホゲホゲ
  • ホゲホゲ
    • ホゲホゲ
    • ホゲホゲ
    • ホゲホゲ
    • ホゲホゲ
    • ホゲホゲ
CSS: 
    //CODE
      .acc-menu, .acc-cnts { width:100%; display: flex; margin: 0; }
// justify-content: space-between;で 開閉ボタンを 右寄せ
      .acc-menu { margin-bottom: 1rem;  margin-top: 1rem;
        flex-direction: row;  justify-content: space-between; }
//opacity: 0; で透明化、transition-duration: 0.4s;でアニメ
      .acc-cnts {line-height: 0;  height: 0; overflow: hidden;
        opacity: 0; transition-duration: 0.4s; }
//opacity: 1;で表示
      .acc-cnts.is-open { line-height: normal;
        height: auto;  opacity: 1; }
//acc-menu要素の子要素はクリック透過、アコーディオン要素に伝播させる
      .acc-menu > * { pointer-events: none; }

//開閉ボタンはアニメーションボタンを利用
javascript：クリックイベントでtoggle

//実行！
fn$.acc()(親要素);

//ボタンタグをel$生成要素で記述
fn$.acc({
  el_btn: { tag:'button', class:'mnu-btn plus-minus',inner:'' },
})(親要素);
fn$.urlAct(親要素)：：要素内のリンクがページURLと一致する場合アクティブ化
/* リンクとページの一致 */
fn$.urlAct({
   target:'parent', //親要素にもactiveクラスをつける場合
   act: 'act', //アクティブクラス
},)(document.getElementById('urlact'));
fn$.scroll(ターゲット,トップからの距離)()： スマートスクロール
fn$.clickTo(ターゲット,トップからの距離)(クリックボタン)： スマートスクロール
↑↑↑TOP↑↑↑
↑↑↑アコーディオン↑↑↑
//sticy menu
  fn$.scroll = function(el,op) {
   return function() {
  // スクロール位置に持たせるバッファ
     if(!op) op = window.innerHeight/7;
  // 画面上部から要素までの距離
    const rectTop = el.getBoundingClientRect().top
  //  const top = rectTop + offsetTop;
    const top = rectTop - op;
  //  el.scrollIntoView(true);
    window.scrollBy({ top: top, behavior: 'smooth'});
   };
  }

  fn$.clickTo = function($to,op) {
   return function(el) {
    el.addEventListener('click', fn$.scroll($to,op),false);
   }
  };
【備考】：表示領域に瞬時スクロール vanillas javascript

el.scrollIntoView(true);
fn$.sticky：スマホっぽいsticky、下にスクロール中は隠れて、上にスクロール中には表示
//sticy menu
fn$.sticky()(document.getElementById('stickymenu'));
fn$.reload(クリック時に実行する関数)(クリック要素); //クリックするとキャッシュクリアしてリロード

//reload
fn$.reload()(document.getElementById('reload'));
//ランダムな値を生成(5桁から10桁または指定桁数) g$.random($x)

g$.random(13);
//IDを取得なければ,重複のないランダム値を設定 fn$.setid(pre)(el);
//CSSのプロパティ値を取得：fn$.getCss(style)(el);
//配列の特定KEY値をアップデート:fn$.updateHashKey($hash,fun)($key);
//指定要素にクラスを追加:fn$.addClass($class)(el)
//指定要素のクラスを削除:fn$.removeClass($class)(el)

//カンマ区切り、スペース区切り、引数わたしに対応

fn$.inClass関数：fn$.inClass(ary,fun)(el);
クラスに配列の値が含まれているかどうか,->配列で値を返す（要注意！）
inClass(配列,'remove')(el); -> 含まれていたらそのクラスを削除

//edeitorのノード判定に使用
    let $match = fn$.inClass(editor$.class)(el);
//含まれる場合、クラス（値）からタイプ（Key）を取得
    if($match) return g$.key(editor$.typeset)($match[0]);
  • テス０ ->
  • テス１ ->
  • テス２ ->
  • テス３ -> 
//CODE
let color = ['blue','aka','midori','pink'];
//単数実行
fn$.inClass(color,'remove')(document.getElementById('node03'));

//複数をターゲットに実行する
node$('#node03 > li').fn('inClass',color,'remove');
g$.key(連想配列)(値) -> 値から連想配列のKEYを取得！

g$.key = function(obj) {
 return function(val) {
//fitterで一致する配列を返し、
   const $key = Object.keys(obj).filter((key) => { return obj[key] === val});
//値のみを返す、
   return $key[0];
 }
}
let $aryts1 = {
  hoge: 'fuga',
  ring: 'apple',
}
g$.key($aryts1)('apple'));
//絶対座標を取得：fn$.getGrid = function(padding)(el):
//data属性を取得（または設定）：fn$.data(hash)(el)
//apriボックス：fn$.box(options)(el);
box$(op)(ノードエレメント);ノードボックスを生成する
textareaとinput[type='text']の場合は要素を隠して中身を表示
テスト
/* ターゲットをboxでwrapする  */
let $ap = document.getElementById('box');
let $prebox =box$({
  el_box: {class:'kite-box p-2 m-2 pink text-white'},
  header: { inner:'ヘッダー'},
  btn: {el:{class:'close d-inline-block black text-white py-1 px-2',inner:'ボタンA'},target:'nav'},
});

//基本パーツは、box, innner, main, header, footer, nav
それぞれにclass等追加する場合は、el$(生成用配列を使う)
//例えば、
el_box: {class:'hoge-box', style:'width:100%;'},
el_inner: {class:'hoge-inner'},
el_main: { class:'hoge-main'},

//基本パーツは、box, innner, main


/* ノードボックスでwrapする  */
let $box = $prebox($ap);

//隠す
//pickerで元の選択フォームを隠して、スタートボタン生成するに使用
$box.hide();

/* ノードにアクセス可能  */
$box.btn.addEventListener('click',function(){
  console.log('click!');
  console.log($box.box);//親ボックスにアクセスできる！！
},false);

//エレメント予約語：box,nav,header,main,ori,footer;
//関数予約語：hide,json;