riotでjQueryを使わないスクロール止めの実装 - Qiita
背景 webページの一部のパーツがブラウザのスクロールに付いてくるようにしたい 例えばECサイトによくある、購入ボタンをブラウザのスクロールに追尾させて、 ユーザーがコンテンツのどこにを見ていても即座に商品をカートに入れれるようにしたい。 僕.「cssだけでできる?」 G .「position: stickyはどう」 僕.「いいやんけこれ」 僕.「IEもpolyfillあるし」 僕.「なんかうまいこといかん」 G .「親要素にoverflow(style)が使ってると動かんよ」 僕.「ぐぬぬ」 僕.「overflowいっぱい使ってるなあ・・・」 僕.「overflow外して良い？」 デ.「だめ」 僕.「ぐぬぬ」 ※Gはgoogle検索 ※デはデザイナーさん 僕.「ではscriptで対応するか・・・。」 G .「これなんか参考にならんか？ あとこれとか」 僕.「JQuery使ってるやつばっか
riotでjQueryを使わない複数行の三点リーダの実装 - Qiita
背景 長い文字列は末尾を三点リーダに変換したい 例えばECサイトとかで商品が一覧で並んでいるときに、 長ーい商品名のアイテムだけ高さがずれたらダサい。 僕.「cssだけでできる?」 G .「IEは対応してないけど良い？」 僕.「（IEからも割とアクセスされえるので）だめ」 ※Gはgoogle検索 僕.「ではscriptで対応するか・・・。」 G .「これなんか参考にならんか？ あとこれとか」 僕.「JQuery使ってるやつばっかやん。」 僕.「うちJQuery使ってないねん。」 僕.「あー。あとriot使ってるんでそっちで対応したい」 G .「該当ありません」 僕.「ぐぬぬ」 条件 表示する文字列が長い時に、描画領域で特定の高さになるように末尾を省略して三点リーダにして表示する riotjs使っているのでパーツをriotのtagで用意したい IEでも動く jQueryは使わない 今回は上記
riot.js ace tagを作る。 - Qiita
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js" type="text/javascript" charset="utf-8"></script> <script src="//gnjo.github.io/riot.js"></script> <ace></ace> <ace></ace> <ace></ace> <ace></ace> <ace></ace> <ace></ace> riot.tag(`ace` ,`<pre ref="code"></pre>` ,function(opt){ let ed=null; this.one('mount',function(){ ed = ace.edit(this.refs.code,{ maxLines: 30, wrap: true, auto
riot.js contenteditable - Qiita
this.one('mount',function(){ this.refs.ed.forEach((el,i)=>{ el.textContent=this.items[i].text; }) }) <script src="//gnjo.github.io/riot.js"></script> <loop></loop> <style> body{margin:0;width:100vw;height:100vh;} .f{ display:flex;flex-direction:row; width:80%;height:100%;justify-content:center; margin:auto; } .f>ul{margin:0;padding:0;width:100%;height:100%;} .f>ul li{ list-style:none; min-height:1
riot.js animate.css と合わせる - Qiita
<script src="//gnjo.github.io/riot.js"></script> <link rel="stylesheet" href="//gnjo.github.io/animate.css"></link> <anim></anim> <style> label{ display:inline-block; padding:0.1rem;margin:0.1rem; background-color:whitesmoke; } label:hover{background-color:orange} .orange{ color:orange} </style> let data=`bounce flash pulse rubberBand shake headShake swing tada wobble jello bounceIn bounceInDown b
riot.js 自明な設定をtag無しで設定する。 - Qiita
<script src="//gnjo.github.io/riot.js"></script> <system> <header>{today}</header> <aricle>xxx</aricle> <footer>{copyright}{owner}</footer> </system> riot.tag('system', false, function(opts) { this.copyright = new Date().toISOString().slice(0,'YYYY'.length) this.today=new Date().toISOString(); this.owner='gnjo' }) riot.mount('*') ; Register as a new user and use Qiita more conveniently You get art
riot.js aceの記述errorヒントを検知する。 - Qiita
let isError=fn.q('.ace_error',ed.container); <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js" type="text/javascript" charset="utf-8"></script> <script src="//gnjo.github.io/riot.js"></script> <ace></ace> let fn=this.fn||{}; fn.q=(s,doc=document)=>{return doc.querySelector(s)}; fn.ace=(el)=>{ var ed= ace.edit(el,{ maxLines: 30, wrap: true, autoScrollEditorIntoView: true, }) ed.
riot.js frame template - Qiita
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css"> <link rel="stylesheet" href="//gnjo.github.io/use.css"> <link rel="stylesheet" href="//gnjo.github.io/split2.css"> <script src="//gnjo.github.io/split.min.js"></script> <script src="//gnjo.github.io/riot.js"></script> <system> <wallpaper></wallpaper> <div class="rtb split parent"> <div class="l spli
riot.js global mixin - Qiita
riot.mixin({emit:function(){return this.trigger.apply(this,Array.from(arguments)) } }); riot.mixin({emit:function(){return this.trigger.apply(this,Array.from(arguments)) } }) ; riot.tag('t',false,function(opts){ this.on('xyzed',(x)=>{console.log('xyzed',x)}) this.emit('xyzed','emit'); this.trigger('xyzed','trigger') }); riot.tag('t2',false,function(opts){ this.on('xyzed',(x)=>{console.log('xyzed',
riot.js routerを使ったメモ帳 - Qiita
<script src="//gnjo.github.io/riot.js"></script> <script src="https://rawgit.com/riot/route/master/dist/route.min.js"></script> <app> <div f> <div l><div a>id:{now.id}</div><div ref="code" contenteditable="plaintext-only" oninput="{input}"></div></div> <div r><li each="{d in ds}" onclick="{jump}">{d.id}</li><li onclick="{add}">+</li></div> </div> </app> <style> [a]{border-bottom:1px solid} [f]{dis
riot.js table ショート表記タグ - Qiita
<tbl items="a,b,c,d|aliceblue,brown,chacole,darkblue|#aaa,#bbb,#ccc|a,b,c,d,e"></tbl> <script src="//gnjo.github.io/riot.js"></script> <tbl items="a,b,c,d|aliceblue,brown,chacole,darkblue|#aaa,#bbb,#ccc|a,b,c,d,e"></tbl> <style>*{font:14px/normal monaco,consolas,monospace}</style> riot.tag( 'tbl' ,`<table> <tr each="{item in opts.items.split('|')}"><td each="{d in item.split(',')}">{d}<td></tr> </
Riot Pug Sass Typescriptで楽にWebページ・アプリを開発 (概要編) - Qiita
前提 bashが動く && 動かせる node v8.+ が動く(nodebrew推奨) nodeやnodebrewはこちらの記事が非常に参考になります。 対象 最近の開発環境に触れてみたい方 直接FTPクライアントでサーバー側のファイルをいじってる方 ある程度Webの知識がついてきて、更に何かしたい方 タイトルの開発環境が欲しい方 概要 皆様、現状の開発環境に満足しておられますでしょうか。Webというものは派閥が多く、Angularだ、Reactだなんて言われているご時世ですが、そういったナウいものに手を出すには些か学習コストがかさむことが踏ん切りを邪魔してしまいがちです。 新しくて、便利なものを使っていきたいけど、難しいこと抜きでお願いしますって方は意外と多いのではありませんでしょうか？ そんな方々に朗報！！！！ タグのカッコや綴じタグの呪縛から開放してくれるPug 同上をCSSに持ち
【サーバレス】Firebaseとriotでweb開発を試す - Qiita
レガシーエンジニアがサーバレス+SPAやってみた 普段はLAMP+cakePHP+bootstrapのレガシーエンジニアがサーバレスを試してみました。はたしてJSだけでどこまでできるのか？ サーバレス気になる→Firebaseがイケてるらしい。mBaaSだがwebでもいけるみたい。 React、Angular、Vueはなじめなかった→マイナーだがriotというのが簡単らしい。 bootstrap、jquery止めたい→フロントよくわからないのでひとまずMaterialDesignLite。 LambdaとかCognitoは面倒だった→正直認証とか自動でやって欲しい。 認証、文章と画像の投稿と一覧表示まで適当にサンプル https://newagent-db971.firebaseapp.com/ ゲストユーザー test@test.com/testtest ※デザインとかほぼテンプレのまま
webpackでriotのcssをコンパイルしたい - Qiita
const postcss = require('postcss'); const prefixer = require('autoprefixer')({ browsers: ['last 2 version'] }); module.exports = { // ・・・省略 module: { rules: [ // ・・・ { test: /\.tag$/, exclude: /node_modules/, use: [{ loader: 'riot-tag-loader', options: { hot: 'false', style: 'postcss', parsers: { css: { postcss: (tagName, css) => postcss([prefixer]).process(css).css } } } }] } ] } }; 実行すると以下のエラーが出
Riotでイベントの最中にエレメントを消した場合の挙動 - Qiita
Riot.jsなどのJavaScriptフレームワークを使うと、簡単に要素を出したり消したりできます。ただ、時にはそれでややこしい現象になることもあります。 イベントが…うまく伝わらない Riotで作ったモジュールで、「確認済み - 未確認」の状態を制御するものを作っていました。 確認ボタンは未確認の状態でだけ出る 確認ボタンは<button type='submit'>になっていて、押したら確認フラグをセットしてあとはフォーム送信に任せる というような形となっていました。ところが、この確認ボタンを押すと、確認フラグをセットしてボタンを消す…ところまでは動くのですが、ブラウザによってその後に送信されるかされないかが違ってくる、という状況になってしまいました。 原因 どうやら、「イベントを送ったエレメントをイベント中に削除した場合」にどうなるかが、ブラウザによって違ってくるようでした。あるブ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
riot.js single tagの拡張。 - Qiita
riot.js classのon off - Qiita
riot.js click demo - Qiita
Laravel Mix に Riot の設定をしたい（少数派） - Qiita
続・Riot.jsの落とし穴まとめ - Qiita
