首页 发现 帮助
注册 登录
oleg
/
alpine
镜像自地址 https://github.com/alpinejs/alpine.git
1
0
派生 0
文件 工单管理 0 Wiki
浏览代码

Update the index.html

Caleb Porzio 5 年之前
父节点
e66b54721a
当前提交
9b34882fb8
共有 2 个文件被更改，包括 162 次插入 和 145 次删除
合并视图 显示文件统计
  1. 161 144
      index.html
  2. 1 1
      package.json

+ 161 - 144
index.html
查看文件 

@@ -1,154 +1,171 @@
 
 <html>
 
 <html>
 
     <head>
 
     <head>
 
         <style>
 
         <style>
 
-            .hidden { display: none; }
 
             [x-cloak] { display: none; }
 
             [x-cloak] { display: none; }
 
         </style>
 
         </style>
 
 
 
-
 
+        <script src="https://cdn.jsdelivr.net/gh/calebporzio/project-x@v0.4.2/dist/project-x.min.js" defer></script>
 
     </head>
 
     </head>
 
     <body>
 
     <body>
 
-        <div x-data="{ someText: 'bar' }">
 
-            <span x-text="someText"></span>
 
-
 
-            <div x-data="{ someScopedText: 'bob' }">
 
-                <span x-ref="lob">hey</span>
 
-                <button x-on:click="console.log($refs.lob)">Something</button>
 
-            </div>
 
-        </div>
 
-
 
-        <hr>
 
-
 
-        <div x-data="{ someText: 'bar' }">
 
-            <div x-on:click="someText = 'baz'">
 
-                <button x-on:click.stop>Change to baz</button>
 
-            </div>
 
-
 
-            <span x-text="someText"></span>
 
-        </div>
 
-
 
-        <hr>
 
-
 
-        <div x-data="{ count: 0 }">
 
-            <span x-text="count"></span>
 
-        </div>
 
-
 
-        <hr>
 
-
 
-        <div x-data="{ someText: 'bar' }">
 
-            <input x-model="someText"></input>
 
-
 
-            <button x-on:click="someText = 'baz'">Change to baz</button>
 
-        </div>
 
-
 
-        <hr>
 
-
 
-        <div x-data="{ open: false }">
 
-            <button x-on:click="open = true">Open Dropdown</button>
 
-
 
-            <ul
 
-                x-bind:class="{ 'hidden': ! open }"
 
-                x-on:click.away="open = false"
 
-                x-cloak
 
-            >
 
-                Dropdown Body
 
-            </ul>
 
-        </div>
 
-
 
-        <hr>
 
-
 
-        <div x-data="{ choices: ['bar', 'baz'] }">
 
-            <select x-model="choices" multiple>
 
-                <option disabled value="">Please select one</option>
 
-                <option>bar</option>
 
-                <option>baz</option>
 
-            </select>
 
-
 
-            <span x-text="choices"></span>
 
-        </div>
 
-
 
-        <hr>
 
-
 
-        <div x-data="{ currentTab: 'tab1' }">
 
-            <button x-bind:class="{ 'active': currentTab === 'tab1' }" x-on:click="currentTab = 'tab1'">Foo</button>
 
-            <button x-bind:class="{ 'active': currentTab === 'tab2' }" x-on:click="currentTab = 'tab2'">Bar</button>
 
-
 
-            <div x-bind:class="{ 'hidden': currentTab !== 'tab1' }">Tab Foo</div>
 
-            <div class="hidden" x-bind:class="{ 'hidden': currentTab !== 'tab2' }">Tab Bar</div>
 
-        </div>
 
-
 
-        <hr>
 
-
 
-        <div x-data="{ someArr: 'bar' }">
 
-            <input type="radio" x-model="someArr" value="bar"></input>
 
-            <input type="radio" x-model="someArr" value="baz"></input>
 
-
 
-            <span x-text="someArr"></span>
 
-        </div>
 
-
 
-        <hr>
 
-
 
-        <div x-data="{ name: 1 }">
 
-            <input type="text" x-model.number="name">
 
-
 
-            <span x-text="name"></span>
 
-        </div>
 
-
 
-        <hr>
 
-
 
-        <div id="goHere">
 
-            Click me.
 
-        </div>
 
-
 
-        <hr>
 
-
 
-        <div x-data="{ someArr: [] }">
 
-            <input type="checkbox" x-model="someArr" value="bar"></input>
 
-            <input type="checkbox" x-model="someArr" value="baz"></input>
 
-
 
-            <span x-text="someArr"></span>
 
-        </div>
 
-
 
-        <hr>
 
-
 
-        <div x-data="{}">
 
-            <span class="" x-bind:class="['hey']"></span>
 
-        </div>
 
-
 
-        <hr>
 
-
 
-        <div x-data="{ nested: { deeperNested: false, evenDeeper: { someFlag: false } } }">
 
-            <!-- Doesn't work, the class doesn't get attached on click. -->
 
-            <p x-bind:class="{ 'works': nested.deeperNested }" x-on:click="nested.deeperNested = true">
 
-                Append nested class
 
-            </p>
 
-
 
-            <p x-bind:class="{ 'works': nested.evenDeeper.someFlag }" x-on:click="nested.evenDeeper.someFlag = true">
 
-                Append even deeper nested class
 
-            </p>
 
-        </div>
 
-
 
-        <hr>
 
-
 
-        <div x-data="{ some: { nested: { obj: 'Some nested model' } }}">
 
-            <input type="text" x-model="some.nested.obj">
 
-            <span x-text="some.nested.obj"></span>
 
-        </div>
 
-
 
-        <script>
 
-            const thing = document.querySelector('#goHere')
 
-            const handler = (e) => {
 
-                thing.removeEventListener('click', handler)
 
-
 
-                const div = document.createElement('div')
 
-                div.setAttribute('x-data', '{hey: "there"}')
 
-                div.innerHTML = '<input type="text" x-model="hey"><h1 x-text="hey"></h1>'
 
-                e.target.appendChild(div)
 
-            }
 
-
 
-            var listener = thing.addEventListener('click', handler)
 
-        </script>
 
-
 
-        <script src="./dist/project-x.js"></script>
 
+        <table>
 
+            <thead>
 
+                <tr>
 
+                    <th>Feature</th>
 
+                    <th>Demo</th>
 
+                </tr>
 
+            </thead>
 
+            <tbody>
 
+                <tr>
 
+                    <td>Dropdown</td>
 
+                    <td>
 
+                        <div x-data="{ open: false }">
 
+                            <button x-on:click="open = true">Open Dropdown</button>
 
+
 
+                            <ul
 
+                                x-bind:class="{ 'hidden': ! open }"
 
+                                x-on:click.away="open = false"
 
+                                x-cloak
 
+                            >
 
+                                Dropdown Body
 
+                            </ul>
 
+                        </div>
 
+                    </td>
 
+                </tr>
 
+
 
+                <tr>
 
+                    <td>Tabs</td>
 
+                    <td>
 
+                        <div x-data="{ currentTab: 'tab1' }">
 
+                            <button x-bind:class="{ 'active': currentTab === 'tab1' }" x-on:click="currentTab = 'tab1'">Foo</button>
 
+                            <button x-bind:class="{ 'active': currentTab === 'tab2' }" x-on:click="currentTab = 'tab2'">Bar</button>
 
+
 
+                            <div x-bind:class="{ 'hidden': currentTab !== 'tab1' }">Tab Foo</div>
 
+                            <div class="hidden" x-bind:class="{ 'hidden': currentTab !== 'tab2' }">Tab Bar</div>
 
+                        </div>
 
+                    </td>
 
+                </tr>
 
+
 
+                <tr>
 
+                    <td>Data Binding</td>
 
+                    <td>
 
+                        <div x-data="{ text: 'foo', checkbox: ['foo'], radio: 'foo', select: 'foo', 'multiselect': ['foo'] }">
 
+                            <div x-text="JSON.stringify($data)"></div>
 
+                            Text:
 
+                            <input type="text" x-model="text">
 
+                            Checkbox:
 
+                            <input type="checkbox" x-model="checkbox" value="foo">
 
+                            <input type="checkbox" x-model="checkbox" value="bar">
 
+                            Radio:
 
+                            <input type="radio" x-model="radio" value="foo">
 
+                            <input type="radio" x-model="radio" value="bar">
 
+                            Select:
 
+                            <select x-model="select">
 
+                                <option>foo</option>
 
+                                <option>bar</option>
 
+                            </select>
 
+                            Multiple Select:
 
+                            <select x-model="multiselect" multiple>
 
+                                <option>foo</option>
 
+                                <option>bar</option>
 
+                            </select>
 
+                        </div>
 
+                    </td>
 
+                </tr>
 
+
 
+                <tr>
 
+                    <td>Cast to number</td>
 
+                    <td>
 
+                        <div x-data="{ number: 1 }">
 
+                            <div x-text="JSON.stringify($data.number)"></div>
 
+                            <input type="text" x-model.number="number">
 
+                        </div>
 
+                    </td>
 
+                </tr>
 
+
 
+                <tr>
 
+                    <td>Nested Binding</td>
 
+                    <td>
 
+                        <div x-data="{ foo: { bar: 'baz' } }">
 
+                            <div x-text="foo.bar"></div>
 
+                            <input type="text" x-model="foo.bar">
 
+                        </div>
 
+                    </td>
 
+                </tr>
 
+
 
+                <tr>
 
+                    <td>On Click</td>
 
+                    <td>
 
+                        <div x-data="{ show: false }">
 
+                            <div x-show="show">Hi There!</div>
 
+
 
+                            <button x-on:click="show = ! show">Show/Hide</button>
 
+                        </div>
 
+                    </td>
 
+                </tr>
 
+
 
+                <tr>
 
+                    <td>Refs</td>
 
+                    <td>
 
+                        <div x-data="{ someText: 'bar' }">
 
+                            <div x-ref="remove-target">Remove Me</div>
 
+
 
+                            <button x-on:click="$refs['remove-target'].remove()">Remove</button>
 
+                        </div>
 
+                    </td>
 
+                </tr>
 
+
 
+                <tr>
 
+                    <td>x-on:click.stop</td>
 
+                    <td>
 
+                        <div x-data="{ someText: 'bar' }">
 
+                            <span x-text="someText"></span>
 
+
 
+                            <div x-on:click="someText = 'baz'">
 
+                                <button x-on:click.stop>Shouldn't change to baz</button>
 
+                            </div>
 
+
 
+                        </div>
 
+                    </td>
 
+                </tr>
 
+
 
+                <tr>
 
+                    <td>x-on:click.prevent</td>
 
+                    <td>
 
+                        <div x-data="{}">
 
+                            <a href="https://google.com" x-on:click.prevent>Shouldn't go to Google</a>
 
+                        </div>
 
+                    </td>
 
+                </tr>
 
+
 
+                <tr>
 
+                    <td>Append DOM</td>
 
+                    <td>
 
+                        <div id="goHere">Click me.</div>
 
+                        <script>
 
+                            const thing = document.querySelector('#goHere')
 
+                            const handler = (e) => {
 
+                                thing.removeEventListener('click', handler)
 
+
 
+                                const div = document.createElement('div')
 
+                                div.setAttribute('x-data', '{hey: "there"}')
 
+                                div.innerHTML = '<input type="text" x-model="hey"><h1 x-text="hey"></h1>'
 
+                                e.target.appendChild(div)
 
+                            }
 
+
 
+                            var listener = thing.addEventListener('click', handler)
 
+                        </script>
 
+                    </td>
 
+                </tr>
 
+
 
+                <tr>
 
+                    <td>Cloak</td>
 
+                    <td>
 
+                        <div x-data="{}" x-cloak>
 
+                            I'm cloaked
 
+                        </div>
 
+                    </td>
 
+                </tr>
 
+            </tbody>
 
+        </table>
 
     </body>
 
     </body>
 
 </html>
 
 </html>

+ 1 - 1
package.json
查看文件 

@@ -1,7 +1,7 @@
 
 {
 
 {
 
   "main": "dist/project-x.js",
 
   "main": "dist/project-x.js",
 
   "name": "project-x",
 
   "name": "project-x",
 
-  "version": "0.4.0",
 
+  "version": "0.4.2",
 
   "repository": {
 
   "repository": {
 
     "type": "git",
 
     "type": "git",
 
     "url": "git://github.com/calebporzio/project-x.git"
 
     "url": "git://github.com/calebporzio/project-x.git"