1

マテリアル UI を reflex frp と統合しようとしましたが、通常 (css のみの要素) は見栄えがよく、滑らかに見えますが、ドロップダウン/選択フォーム要素を初期化するには jQuery が必要なようです - これは機能しません:

<script>ステートメントの順序を変更し、本文の -line のindex.html前に document-ready-jQuery 文字列を挿入しようとしました。runmain.js

を挿入して、スクリプトタグが実行されることも確認しましたalert。

Main.hs

{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE RecursiveDo       #-}
import Reflex
import Reflex.Dom
import Data.Monoid ((<>))
import qualified Data.Map as Map
import Safe      (readMay)
import Data.Text (pack, unpack, Text)
import Control.Applicative ((<*>), (<$>))

main = mainWidget $ do
  el "script" $ text "$(document).ready(function(){$('select').material_select(); });"
  nx <- divClass "row" $ numberInput
  d <- divClass "input-field col s12" $ do
    d <- dropdown "*" (constDyn ops) def
    el "label" $ text "Operation"
    return d
  ny <- divClass "row" $ numberInput
  let values = zipDynWith (,) nx ny
      result = zipDynWith (\o (x,y) -> textToOp o <$> x <*> y)
                          (_dropdown_value d)
                          values
      resultText = fmap (pack . show) result
  text " = "
  dynText resultText

numberInput :: (MonadWidget t m) => m (Dynamic t (Maybe Double))
numberInput = do
  let errorState = "style" =: "border-color: red"
      validState = "style" =: "border-color: green"
  rec n <- textInput $ def & textInputConfig_inputType .~ "number"
                           & textInputConfig_initialValue .~ "0"
                           & textInputConfig_attributes .~ attrs
      let result = fmap (readMay . unpack) $ _textInput_value n
          attrs  = fmap (maybe errorState (const validState)) result
  return result

ops = Map.fromList [("+", "+"), ("-", "-"), ("*", "*"), ("/", "/")]

textToOp :: (Fractional a) => Text -> a -> a -> a
textToOp s = case s of
                    "-" -> (-)
                    "*" -> (*)
                    "/" -> (/)
                    _ -> (+)

index.html

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js "></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script language="javascript" src="https://rawgit.com/epsilonhalbe/4472d2462c3df7019beb881cec322b0d/raw/3c741f3dc676a8b9a9833bfbc89af4eca44be35f/rts.js"></script>
        <script language="javascript" src="https://rawgit.com/epsilonhalbe/4472d2462c3df7019beb881cec322b0d/raw/3c741f3dc676a8b9a9833bfbc89af4eca44be35f/lib.js"></script>
        <script language="javascript" src="https://rawgit.com/epsilonhalbe/4472d2462c3df7019beb881cec322b0d/raw/3c741f3dc676a8b9a9833bfbc89af4eca44be35f/out.js"></script>
    </head>

    <body>
        <script language="javascript" src="https://rawgit.com/epsilonhalbe/4472d2462c3df7019beb881cec322b0d/raw/3c741f3dc676a8b9a9833bfbc89af4eca44be35f/runmain.js" defer></script>
    </body>
</html>
4

0 に答える 0