convForm
1.0.0
나는 이것을 사이드 프로젝트로 시작했고 많은 사람들이 원래 의도했던 것과는 완전히 다른 방식으로 이것의 다른 용도를 보고 생명을 얻었습니다. 불확실한 미래에 언젠가 이러한 가능성을 달성하기 위해 이 작업을 처음부터 다시 수행할 수도 있지만 현재는 이 작업을 수행할 시간이 충분하지 않습니다. 죄송합니다. 무엇이든 도움을 주고 싶다면 언제든지 풀 리퀘스트를 열어주세요.
양식을 대화형 채팅으로 변환하는 플러그인입니다.
특징:
채팅을 작성하려면 요소 내부에 양식을 래핑하고 해당 jquery 선택기에서 .convform()을 호출하면 됩니다.
예:
$ ( function ( ) {
var convForm = $ ( '.my-conv-form-wrapper' ) . convform ( ) ;
} ) ;플러그인이 어떤 질문을 할지 알기 위해서는 모든 입력과 선택에 data-conv-question 속성이 있어야 합니다. 예:
< select data-conv-question =" Hello! I'm a bot created from a HTML form. Can I show you some features? " >
< option value =" yes " > Yes option >
< option value =" sure " > Sure! option >
select >원한다면 파이프 | 그들을 분리하기 위해. 플러그인은 채팅이 생성될 때마다 사용할 항목을 무작위로 선택합니다. 예:
< input type =" text " name =" name " data-conv-question =" Alright! First, tell me your full name, please.|Okay! Please, tell me your name first. " >입력에 정규식 패턴을 사용할 수 있습니다. 태그의 data-pattern 속성을 사용하면 됩니다. 사용자가 답변을 입력할 때 패턴에 맞지 않으면 보낼 수 없으며 입력 색상이 빨간색으로 변합니다. 예:
< input data-conv-question =" Type in your e-mail " data-pattern =" ^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$ " type =" email " name =" email " >사용자의 답변을 바탕으로 대화를 나누고 구체적인 질문을 할 수 있습니다. 이는 선택 항목에서 분기할 때만 작동합니다.
이렇게 하려면 대화를 포크하려는 질문 뒤에 div 태그를 삽입해야 하며, 선택 항목의 이름이 있는 data-conv-fork 태그도 있어야 합니다.
해당 div 내에서 하위 요소에 대한 대화를 분기하는 답변을 참조하는 data-conv-case 속성이 있는 div 태그를 생성해야 합니다.
< select name =" programmer " data-conv-question =" So, are you a programmer? (this question will fork the conversation based on your answer) " >
< option value =" yes " > Yes option >
< option value =" no " > No option >
select >
< div data-conv-fork =" programmer " >
< div data-conv-case =" yes " >
< input type =" text " data-conv-question =" A fellow programmer! Cool. " data-no-answer =" true " >
div >
< div data-conv-case =" no " >
< select name =" thought " data-conv-question =" Have you ever thought about learning? Programming is fun! " >
< option value =" yes " > Yes option >
< option value =" no " > No.. option >
select >
div >
div >질문에 대한 사용자 답변을 사용하려면 data-conv-question 태그 내에서 {inputname}을 사용할 수 있습니다. 여기서 inputname은 답변이 필요한 질문을 참조합니다. 원하는 경우 : 선택기(0-인덱스)를 사용하여 답변에서 특정 단어를 얻을 수 있습니다. 예를 들어 사용자의 이름이 필요한 경우 {name}:0을 사용할 수 있으며 플러그인은 "이름" 질문 답변에서 첫 번째 단어를 가져옵니다. 예:
< input type =" text " data-conv-question =" Howdy, {name}:0! It's a pleasure to meet you. How's your day? " >채팅 흐름에 메시지를 넣을 수 있습니다. 사용자의 답변을 기대하지 않는 질문이므로 플러그인은 즉시 다음 질문으로 넘어갑니다. 이렇게 하려면 입력 태그에 data-no-answer="true" 속성을 추가하세요. 예:
< input type =" text " data-conv-question =" A fellow programmer! Cool. " data-no-answer =" true " >사용자가 선택 항목에서 답변을 클릭하거나 질문의 끝에서 호출되도록 사용자 정의 함수를 사용할 수 있습니다(질문에 답변이 필요한 경우 사용자 입력 후 콜백이 호출됩니다. 그렇지 않은 경우 콜백 메시지를 인쇄한 후 호출됩니다.) 이렇게 하려면 옵션 태그의 "data-callback" 속성이나 입력 태그에 호출할 함수 이름을 입력하면 됩니다.
< select data-conv-question =" Selects also support callback functions. For example, try one of these: " >
< option value =" google " data-callback =" google " > Google option >
< option value =" bing " data-callback =" bing " > Bing option >
select >
< script >
function google ( stateWrapper , ready ) {
window . open ( "https://google.com" ) ;
ready ( ) ;
}
function bing ( stateWrapper , ready ) {
window . open ( "https://bing.com" ) ;
ready ( ) ;
}
script > 콜백 함수는 매개변수 stateWrapper 및 콜백 함수 ready 를 사용하여 호출됩니다. 상태 래퍼는 convForm 개체이고, 준비는 다음 질문으로 진행하기 위해 반드시 호출해야 하는 함수입니다.
다음을 포함하는 옵션 객체를 매개변수로 constForm 함수에 추가할 수 있습니다.
placeHolder : 사용자 입력에 표시할 자리 표시자typeInputUi : 'input' 또는 'textarea', 사용자 입력으로 사용할 html 요소의 유형을 선택합니다.timeOutFirstQuestion : 첫 번째 질문 이전의 로드업 애니메이션 지속 시간(ms)buttonClassStyle : 사용자의 답변 제출 버튼에 대한 클래스입니다.eventList : 특정 시간에 호출될 함수가 있는 객체. 현재 지원되는 유일한 것은 onSubmitForm (convState를 매개변수로 사용하여 호출되는 함수) 및 onInputSubmit (convState를 첫 번째 매개변수로 사용하여 호출되는 함수 및 준비된 콜백 함수) 다음 질문을 두 번째 매개변수로 인쇄하려면)formIdName : 양식의 HTML IDinputIdName : 사용자 입력에 대한 html IDloadSpinnerVisible : loadSpinner 클래스selectInputStyle : show (기본값), disable 또는 hide - 질문이 select 될 때 입력 필드를 처리하는 방법을 플러그인에 알려줍니다.selectInputDisabledText : selectInputStyle 이 disable 로 설정된 경우 선택 질문의 입력에 표시할 텍스트입니다. $ ( function ( ) {
var convForm = $ ( '.my-conv-form-wrapper' ) . convform ( {
eventList : {
onSubmitForm : function ( convState ) {
console . log ( 'The form is being submitted!' ) ;
convState . form . submit ( ) ;
}
}
} ) ;
} ) ; 콜백 함수는 onInputSubmit 함수 내에서 호출된다는 점에 유의하세요. 이 이벤트 함수를 변경하는 경우 HTML 태그에서 콜백 함수를 사용할 필요는 없지만 어떤 이유로든 필요한 경우 window[convState.current.input.callback](convState, readyCallback); 사용하여 여기에서 호출해야 합니다. window[convState.current.input.callback](convState, readyCallback);
