專 案 設 定

---

結 構 清 單

---

網 頁 代 碼

---

Test/Develop Code (initialize to editor mode)

<script src="http://inline-cdn.jfetek.com/Scripts/jquery-2.2.0.js"></script>
<script src="http://inline.jfetek.com/Inline/js/jquery.inline.loader.js"
    data-inline=""
    data-inline-token=""
    data-inline-render="vash,handlebars,mustache"
    data-inline-reload="false"
    data-inline-ajax="json"></script>

---

Menu login code (initialize to render mode)

<script src="http://inline-cdn.jfetek.com/Scripts/jquery-2.2.0.js"></script>
<script type="text/javascript">
    var InlineLoaderOptions = {
        loaderReady: function (loader, fnDone) {
            //you can write your login editor code here
            if (!loader.IsEditor()) {
                $(document).on('click', '#InlineLoaderLoginButton', function(e) {
                    loader.LoginEditor('')//login with token
                        .then(function(token) {
                            console.log('Login editor success!');
                            window.location.reload();
                        });
                });
            }
            fnDone && fnDone();
        },
        domReady: function (loader, fnDone) {
            //you can modify dom before Inline render templates
            //just make a login trigger
            if (!loader.IsEditor()) {
                $('body').append($('<img />', {
                    'id': 'InlineLoaderLoginButton',
                    'src': loader.options.loader.host + '/Inline/Loader/css/1455882376_office-03.png'
                }).css({
                    'cursor': 'pointer',
                    'width': '4em',
                    'height': 'auto',
                    'position': 'fixed',
                    'bottom': '35px',
                    'left': '50px',
                    'z-index': 2000
                }));
            }
            var dfd = $.Deferred();
            setTimeout(function () { dfd.resolve('InlineLoaderOptions.domReady') }, 0);
            return dfd.promise();
        }
    };
</script>
<script src="http://inline.jfetek.com/Inline/js/jquery.inline.loader.js"
        data-inline=""
        data-inline-render="vash,handlebars,mustache"
        data-inline-reload="false"
        data-inline-ajax="json"></script>

---

Sample render(vash) code with script tag to insert after self

<div class="row">
<script type="text/x-template-vash"
        data-inline-schema="_image_title:text_text"
        data-inline-key="HeroBanner"
        data-inline-title="頁首橫幅"
        data-inline-default='{"image":"http://inline-cdn.jfetek.com/Inline/Web/spa/img/profile.png","title":"CLOUD INLINE","text":"Frontend easy - Backend happy - Customer satisfied"}'>
        <div class="col-lg-12">
        <img class="img-responsive" src="@image" alt="@title">
        <div class="intro-text">
        <span class="name">@title</span>
        <hr class="star-light">
        <span class="skills">@html.raw(text)</span>
        </div>
    </div>
</script>
</div>

---

Sample render(vash) code with any tag to replace self content html

<div class="row"
     inline-hide
     inline-renderonly
     data-inline-key="UserMenu"
     data-inline-schema="_image_title:text_list"
     data-inline-then="dummyWindow(global)FunctionNameEmptyForAutoReload"
     data-inline-onedit="dummyWindow(global)Function(form,json,data,fnDone)Name"
     data-inline-render="vash"
     data-inline-default='[
             {"title":"Project","image":"http://inline-cdn.jfetek.com/Inline/Web/spa/img/portfolio/cabin.png"},
             {"title":"Schema","image":"http://inline-cdn.jfetek.com/Inline/Web/spa/img/portfolio/cake.png"},
             {"title":"Loader","image":"http://inline-cdn.jfetek.com/Inline/Web/spa/img/portfolio/circus.png"},
             {"title":"Render","image":"http://inline-cdn.jfetek.com/Inline/Web/spa/img/portfolio/game.png"},
             {"title":"Editor","image":"http://inline-cdn.jfetek.com/Inline/Web/spa/img/portfolio/safe.png"},
             {"title":"Code","image":"http://inline-cdn.jfetek.com/Inline/Web/spa/img/portfolio/submarine.png"}
             ]'>
            @*<!--*@
            @model.forEach(function(v,i,a){
            <div class="col-sm-4 portfolio-item">
                <a href="#portfolioModal@(i+1)" class="portfolio-link" data-toggle="modal">
                    <div class="caption">
                        <div class="caption-content">
                            <i class="fa fa-search-plus fa-3x"></i>
                            <h3>@v.title</h3>
                        </div>
                    </div>
                    <img src="@v.image" class="img-responsive" alt="">
                </a>
            </div>
            })
            @*-->*@
</div>

---

Inline include partial HTML with ?name to replace by query string

<script type="text/x-include" inline-include="_navbar.html?replace=textForReplace">
</script>

Inline hold, inline ready would hold for no element with linline-hold attr, timeout 6 seconds.
You need do this when make static html page complete. Never warp unhold code in jquery ready function.

<div id="HoldSample" inline-hold></div>
<script>
$.get('temp.html').then(function(data){$('#HoldSample').html(data)}).always(function(){$('#HoldSample').removeAttr('inline-hold')});
</script>

姓 名 設 定

---

變 更 密 碼

---

登 入

---

註 冊

---