既存のセレクトタグ内で部分一致の検索が行えます。
また、プルダウンリストにないものを即時に追加することも可能です。
index.html
<head> <link rel="stylesheet" href="jquery.vselect.css"> <script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script> <script charset="UTF-8" src="jquery.vselect.js"></script> <script charset="UTF-8" src="index.js" defer></script> </head><body> <select class="vselect" style="width: 200px;"> <option></option> <option>あいうえお</option> <option>かきくけこ</option> <option>さしすせそ</option> <option>たちつてと</option> <option>なにぬねの</option> <option>はひふへほ</option> <option>まみむめも</option> <option>やゆよ</option> <option>らりるれろ</option> <option>わをん</option> </select> </body>
index.js
'use strict'; (function($){ $(document).ready(function(){ $('select.vselect').vSelect(OPTION); }); })(jQuery);]]>
次の条件のもと作成されています。
・CompositionAPIを使用。
【ポイント】
onUpdatedを使用する。
index.html
<body id="body"> <user-table></user-table> </body>
index.js
'use strict'; Vue.createApp({ setup( ){ }, components: { 'user-table': Vue.defineAsyncComponent( () => window['vue3-sfc-loader']['loadModule']('./user-table.vue', window['Vue3']['loaderOption']() ) ), } }).mount('#body');
※window[‘Vue3’][‘loaderOption’]()はnormalize.jsから参照
user-table.vue
<template> <table id="table1"> <thead> <tr> <th>ID</th> <th>名前</th> <th>ユーザ名</th> <th>Email</th> </tr> </thead> <tbody> <tr v-for="(userObj, userIdx) in users" :key="userObj.id" :id="userObj.id" > <th class="move">{{ userObj.id }}</th> <td>{{ userObj.name }}</td> <td>{{ userObj.username }}</td> <td>{{ userObj.email }}</td> </tr> </tbody> </table> </template> <script scoped> import { onUpdated } from 'vue' export default{ setup( props ){ const users = Vue.ref([]); const getUsers = async () => { const response = await fetch('https://jsonplaceholder.typicode.com/users'); const data = await response.json(); users.value = data; }; getUsers(); onUpdated(() => { $('#table1').tableDnD({ dragHandle : 'th' }); }); return { users }; } } </script>]]>
サンプル・ダウンロード・使い方はこちらから
]]>
e.stopPropagation();
があるが、子や孫要素がたくさんあるとめんどくさい。
今回は親要素のクリックイベンド発火時に、
自身をクリックしたものか伝播してきたものかを判別し、
伝播してきたものは処理しないようにした
$('#parent').click(function(e){ /* 伝播は処理しない */ if( $(this).get(0) != $(e.target).get(0)) return; /* これ以降に処理を記述する */ console.log('親要素がクリックされました'); });]]>
表示自体はこれでも出来るけれども、
これではjQueryで操作が出来なかった。
deSVGを使ったら操作できるようになるが、
トラブル回避のために出来る限り標準の機能で行いたい。
loadを使ってインライン化する事でjQueryから操作が出来た。
$('#hoge').load('foo.svg', function(){ });]]>
// まずHTMLに値を代入する $('#hoge').val('代入する文字列'); // それからWYSIWYG化する CKEDITOR.replace('hoge');
CKEditorが有効になった後にJavaScriptでデータを書き換えたい時はsetDataを使うと書き換えることが可能です。
→ CKEditorの内容をJavaScriptから変更する
ただ、CKEditorが有効になるのとほぼ同時にデータを書き換えようとすると失敗する場合があります。
そういう時はinstanceReadyを使う事で回避する事が出来ます。
→ CKEditorの初期値が反映されない場合があるときの対処法
今回、非同期にデータを取得した後、CKEditorの内容を書き換えようとするとこれらでは対応できません。
Promiseを使うのも手ですが、今回は非同期にデータを取得した後
CKEditorの準備がまだの場合、ウェイトを入れ処理を待たせるようにしました。
let loop = function(i){ if(CKEDITOR['instances']['htmlCkeditor'].status == "ready"){ CKEDITOR['instances']['htmlCkeditor'].setData(html); return; }; if(i >= 100) return; setTimeout(function(){ loop( i + 1) }, 10); }; loop(0);
一応、無限ループ対策として100で処理を強制終了させています。
]]>アンダーバーから始まる部分を書き換えられるので動作しない模様。
その部分を文字列化して書き換えられないようにした。
// $.datepicker._updateDatepicker( hoge ); $.datepicker["_"+"updateDatepicker"]( hoge );]]>
[-]$('<iframe id="uploadResponse" name="uploadResponse" src="javascript:;"></iframe>').prependTo(document.body); [+]if(!$('#uploadResponse')[0]){$('<iframe id="uploadResponse" name="uploadResponse" src="javascript:;"></iframe>').prependTo(document.body);} [-]setTimeout(function(){$("#uploadResponse").detach()},1);]]>